radix-ui
[Feature Request] Allow programmatically controlling the `ThemePanel` component
ThemePanel component is great, but I think it can be improved by allowing the user to control more of its behavior:
- Allow passing
openandonOpenChangetoThemePanelto control it's state - Allow customizing hotkeys for "show/hide" and "switch dark mode" actions. Also, allow passing
nullto 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
Why are you interested in that? What are you trying to achieve in your app?
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.
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.
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.
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.
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.
@vladmoroz Here's a PR with discussed changes: https://github.com/radix-ui/themes/pull/393