CSS variables
They are a great out-of-the-box tool that enables you to write cleaner and more reusable styles.
Similar to how variables...
For further actions, you may consider blocking this person and/or reporting abuse
Excellent, thanks
nice article 😀 variables really have made this sort of thing way easier!
as you’ve shown here, it’s good practice to use the system settings as your default, but you also want the user selection to override that so they can have more granular control over their experience.
this subject also goes way deeper as you start to introduce selection persistence, SSR, and custom themes that go beyond just light and dark. maybe a follow up post??? 😉
again, nice aricle! and keep up the great work!
Indeed, it becomes a bit more interesting when it comes to synchronizing default & opt-in preferences -- then persistence. 😁
I probably will come up with a follow-up post on these.
Thanks for the feedback and for this great suggestion!
i can't wait to read it
Very nice article! Thanks ☺️
Thank you!
Since this is my first post, your comment motivates me to continue 😁
Glad to hear that! 💪
Thanks for the article, do you know if this "prefers-color-scheme" is configured in the browser settings somewhere? I remember that there was an attribute that can be added to the body tag or something to indicate which color scheme a user prefers...
I believe it is an operating system level setting and the browser passes it onto loaded pages. That is happening on the combination of macOS & Chrome that I'm using. It could differ on other operating systems though.
By the sounds of it, you might be referring to the
color-schemeproperty.