It's admittedly difficult and leads to a lot more styling than you probably need for your site.
On my dev website (shameless plug), the dark mode theme uses CSS custom properties for most things.
There are, however, certain situations where I'd rather not create a custom property. In those cases, I have a themed SCSS mixin that lets me pass in the property name, the light mode color, and the dark mode color.
Also, finding the right color combinations is a royal PITA.
This article doesn't talk about those difficulties because the websites that I have implemented this to have not been large websites with the need super complex CSS selectors.
(I am more used to writing with SCSS.) With the elements that need there own color change but don't need a whole new global variable, for one thing, I have added the media queries to that one element. If elements that don't need to change are one specific page I also add page classes to the body like <body class="page page-contact">
@weeb
That aligns 100% with the very little experience I have with styling websites 👍 Would you be willing to write a post going into the intricacies in further detail? I'm very interested!
I think OP wasn't trying to show how to theme a website, but rather showcasing how CSS variables and media queries could be applied to such an endeavor.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Why does no-one ever talk about the real difficulties of making a completely working dark mode?
It's not as simple as using some variables and media queries at all.
You can define a variable with any color, you still need to apply the that to every single element that need to change.
And you can't just do
something like
p{color:white;}, 'cause what if not allpelements need to change?In that case, you need to use lot of selectors, to reach those certain
pelements that need to change color.Or you can create a class like
.change-color{color:white;}.But in this case, you need to add this to every single element that need to change color.
And then do either with every single
button,span,p,inputetc element.I've seen several articles like this, about variables and this new media query, but it's not this simple at all.
Creating a fully functioning dark mode is difficult, especially on a complex, dynamic website.
It's admittedly difficult and leads to a lot more styling than you probably need for your site.
On my dev website (shameless plug), the dark mode theme uses CSS custom properties for most things.
There are, however, certain situations where I'd rather not create a custom property. In those cases, I have a
themedSCSS mixin that lets me pass in the property name, the light mode color, and the dark mode color.Also, finding the right color combinations is a royal PITA.
This article doesn't talk about those difficulties because the websites that I have implemented this to have not been large websites with the need super complex CSS selectors.
(I am more used to writing with SCSS.) With the elements that need there own color change but don't need a whole new global variable, for one thing, I have added the media queries to that one element. If elements that don't need to change are one specific page I also add page classes to the body like
<body class="page page-contact">Hope this helps :)
@weeb That aligns 100% with the very little experience I have with styling websites 👍 Would you be willing to write a post going into the intricacies in further detail? I'm very interested!
I think OP wasn't trying to show how to theme a website, but rather showcasing how CSS variables and media queries could be applied to such an endeavor.