search

saadeghi / theme-change

Change CSS theme with toggle, buttons or select using CSS custom properties and localStorage
https://codepen.io/saadeghi/pen/OJypbNM
MIT License
1.42k stars 46 forks source link

Option to prioritize system default #19

Closed ollebergkvist closed 1 year ago

ollebergkvist commented 2 years ago

Is there a way to prioritize the system default somehow? E.g. When a user who has selected dark mode in their system preferences, when entering the page the plugin defaults to dark mode?

rafifos commented 2 years ago

Since a theme can be any string (for example: cyberpunk, in daisyUI), then this also implies that there would be an option to set which theme is treated as light and which is treated as dark? If so, how would that be configured?

saadeghi commented 1 year ago

E.g. When a user who has selected dark mode in their system preferences, when entering the page the plugin defaults to dark mode?

That depends on the CSS. daisyUI does this. by default, dark theme on daisyUI will be activated if the OS is on dark mode.

theme-change does not care about the CSS.
This is all theme-change does:

So, by default, if no theme is chosen by user and your CSS has a style for @media (prefers-color-scheme: dark) (daisyUI does) the dark style would apply. otherwise it would be light.
And if user have chose a theme, the theme name would be inside Local Storage and theme-change will put that chosen theme in <html data-theme="______">.