Component: Theme selector
Closed this issue · 3 comments
We need a component to select dark/light/system theme. Should be flexible, providing various layouts, such as list of buttons, drop down menu, etc.
As always, plenty of overrides to customize it as well.
Check out priv/static/pyro.js to see the client-side API.
I took the liberty to start a branch for this feature, see my theme-selector branch.
So far it is implemented as a button supporting to toggle between system, dark and light. In system mode the theme should switch on system theme switches automatically.
It also supports to show labels (hidden labels is the default) and change the used icons and labels for each theme.
As Safari seems to have issues with the localStorage, I save the state as classes on the document. Not 100% sure that's the best idea ever. Maybe you have a better idea.
Should I create a PR?
Cool! I'm not sure about using document classes, wouldn't that lose state on a page reload/page switch/new tab? 🤔
If you don't mind working with some feedback, a PR would be great.
Great. And you are right, it should use the local storage. I will add that tomorrow and also check why it isn't working on my safari setup (I guess the cookie settings).
I'll great a PR afterwards.