[Feature Request] Allow programmatically controlling the `ThemePanel` component

[snelsi]

ThemePanel component is great, but I think it can be improved by allowing the user to control more of its behavior:

1. Allow passing open and onOpenChange to ThemePanel to control it's state
2. Allow customizing hotkeys for "show/hide" and "switch dark mode" actions. Also, allow passing null to disable a hotkey.

Here are a couple of great custom hotkey hooks for inspiration:
https://github.com/JohannesKlauss/react-hotkeys-hook
https://github.com/arthurtyukayev/use-keyboard-shortcut
https://github.com/greena13/react-hotkeys

[vladmoroz]

Why are you interested in that? What are you trying to achieve in your app?

[snelsi]

I want to add a custom button in the header/footer that toggles a ThemePanel on click.
And I want to remap default "T" and "D" hotkeys to something else.

Also, when ThemePanel is closed it really misses some sort of floating button that reopens it.

[vladmoroz]

I am more interested about this in terms of what this achieves for your users? Why do you need Theme Panel in production? It was never meant as a component that the end user would see; it's just a tool for us to demo the theme options better and for the developer to explore their app style.

[snelsi]

I'm building a catalogue of premade components/sections.
Very similar to Radix Playground.
I'm using it to demo the theme options better as well.

[snelsi]

In general, I don't see why ThemePanel can't be used in production to allow user to customize the appearance of the app. Especially when working with dashboards / platforms and not stuff like landing pages.

[vladmoroz]

Feel free to PR open and onOpenChange props and a prop to disable hotkeys.

We won't want to add a way to reassign hotkeys because using Theme Panel in a real app is not a case that we see as legitimate/realistic; nor it makes sense to add a dependency for that.

[snelsi]

Okay, I'll take a look today

[snelsi]

@vladmoroz
Here's a PR with discussed changes:
#393