I like to dark mode all the things. But I also know lots of people who prefer light mode! To respect personal preferences and consider accessibilit...
For further actions, you may consider blocking this person and/or reporting abuse
This is cool! Here's how you can do it with one line of CSS and achieve the same results:
Check out this URL: codepen.io/phelixdusengimana/pen/O...
Advantages of this approach include:
It automatically changes form controls' appearance to fit the user's chosen theme.
It changes the text color and scrollbar theme based on the user's preferred UI theme.
Read more: developer.mozilla.org/en-US/docs/W...
TIL!! Thanks for that! I guess if you wanted different shades of black and white for the foreground/background colours you’d still have to do a bit more work?
Sure. If you want different background other than the CSS built-in you'd use the first approach.
I try to change my mode to dark in Ubuntu, but nothing happened :)
Unfortunately, setting Ubuntu on dark mode won't set Chrome as well.
Thus, it's not as straightforward as Windows, and it will work a bit differently, but it's simple to set up.
I made this step-by-step guide to follow when changing chrome to dark mode in ubuntu: Link
This is the way. I've never been a fan of using Javascript to switch themes. I've never actually implemented it before but if and when I do I'll do it your way. It might not work on every system yet, I'm not sure? But it'll get there in time if it doesn't.
Here's a compatibility overview for the three major components to this implementation: caniuse.com/prefers-color-scheme,c...
The
prefers-color-schemeis rather essential for pegging your css to the user's system theme, but the:rootpseudo class and even the custom properties / variables could be left out - although that'd mean nesting all your css within those media queries 😉I use a static blog generator with a light theme that I have overridden by hand. Now with this idea I can just wrap my overrides in the media query.
Sweet!
This is the way! 🥳
Look what's coming this year - Change the
accent-colorautomatically when light/dark mode changes !Thanks, Salma! A very handy read you gave us here. And there are some interesting spin-offs from the other folks here too. Thanks to all of you for keeping us on our toes!
And I'm back! I accepted @waylonwalker 's challenge and the comment by @shammisharma about doing it with CSS only. And yes, it was done. A lady from Taipei, Mu-An Chiou is the original creator of the work.
The details of is is not evident in her brief portfolio, but it is explained in great German-style detail by a gent named Philipp. I went and checked Philipp's site which uses the CSS implementation and W3C's CSS validator passes it with an all-clear.
Here is the link for those interested: kleinfreund.de/css-only-dark-mode/
The CodePen can be found here for those that want to dash straight to the honeypot. : codepen.io/kleinfreund/pen/bJwqpB
Super cool snippet :)
Great snippet.
This is awesome, thank you. I just applied it to my #100daysofcode blog/journal. adriaanb.herokuapp.com
Great work!
Good job with the article 👍
I really like this topic and I also have written a thorough article about ”How to create dark mode using only CSS” dev.to/laurilllll/how-to-create-da...
Check it out 💪
What about using
developer.mozilla.org/en-US/docs/W...
Dark mode in 10 lines of code: codepen.io/inspiredlabs/pen/OJQpPg...
Interesting approach! Except I'm viewing it in dark mode which shows white text on a grey background — which I can't read 😅
Exactly! Using
var(--color-bg, inherit)uses the browser's fallback value. Perhaps one day, browsers will simply have a algo to do this themselves, such as Luma: css-tricks.com/switch-font-color-f...Thanks for sharing
Very valuable article
Very detailed, thanks.
Thanks for writing this.
Awesome article.
add
I've been wanting to implement this for awhile, If I want to also include an override toggle button, do I need js?
yes I think js will be a proper way to implement it. Although we can use : checked , :not(: checked) property of checkbox. but I'm not sure how it will turn out.