[sean-kendle]

Just add the class dark-mode to your body tag with JavaScript, then define all your dark styles with .dark-mode in front of them, like this:

a {
    color: #330033; /* or whatever dark color */
}

.dark-mode a {
    color: white; /* or whatever light color */
}

For more info on CSS specificity and cascading, see this page:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

I recommend grouping all dark mode styles together with a comment above them, like this /* Dark mode styles: */, and put them toward the bottom of your stylesheet (above any responsive breakpoints), so they’re together, and they’re after your regular styles – because CSS takes the last defined style (hence, cascading). That way you don’t run into problems with re-defining styles. Make sure all overriding styles have more specificity than the ones they’re attempting to override. Try to avoid use of !important where possible.

[Author]

Posts