I have a Sass-driven site I’ve inherited. There’s a `variables.scss` file that defines a bunch of color and media size and other variables; makes sense. But now I want to basically overwrite all those variables with new values for dark-mode purposes. Is there a way to easily do this in Sass?
(Assume I have DDGed `sass dark mode` and none of the first dozen hits seemed to be relevant to this kind of situation, either because they aren’t or because I don’t speak Sassafrassh and so misunderstood.)
@Meyerweb completely contrived example (sorry ahead of time if this does not bear any relevance to your question, all depends on how the variables are being used, and how the project is toggling dark/light mode styling)
```
// variables that might be defined in your variables.scss file
$a_color: #dca;
$an_another_color: #753;
// some random stylesheet
.foo {
background: $a_background_color;
}
@media (prefers-color-scheme: dark) {
.foo {
background: $an_another_color;
}
}
```
@wholewheattoast So basically define dark-mode versions of all the colors, like so:
```
$main-color: #333;
$dark-main-color: #CCC;
$bg-color: #EEE;
$dark-bg-color: #111;
```
…and then flop everything in CSS `@media()` statements? That feels really clumsy, given that the `$color` references will be scattered throughout the rest of the Sass. I’d much rather something like:
```
$main-color: #333;
$bg-color: #EEE;
@media (prefers-color-scheme: dark) {
$main-color: #CCC;
$bg-color: #111;
}
```
@Meyerweb @wholewheattoast @media that shouldn't work as the SASS variables are precompiled, but the media statement is client side.
Without knowing the size of your codebase, if this is something you're going to maintain I would recommend converting all colors to CSS variables. Could perhaps be solved quite easily with some regexs, depending on advanced the usage of the colors in SASS are.
@Meyerweb @wholewheattoast I saw the latter used in a bunch of places and eventually adopted it myself. With a bit of tweaking, it even works on images.
https://css-tricks.com/dark-modes-with-css/
There is also an automatic switching method -- https://blog.jim-nielsen.com/2021/css-system-colors/ -- but I haven't tried it yet.
Last time I tried to use `light dark` it was buggy, so I backed off.
@Meyerweb That won't work in Sass because it's precompiled, but you could switch them out for CSS custom properties.
```
--main-color: #333;
--bg-color: #EEE;
@media (prefers-color-scheme: dark) {
--main-color: #CCC;
--bg-color: #111;
}
```
Then just do a search and replace on the CSS for `$main-color` and replace it with `--var(--main-color)` etc.
@danbarber Yeah, this is the conclusion I’ve been coming to as I‘ve tried various ideas and run into deep quicksand. I’m a little unhappy about it given universal `var()` support only goes back about five years, so I’ll need to backstop all the var()s, but I guess nobody promised this would be easy.
Edited to addend: Huh, I guess it’s actually been eight years, not five. Time!… is marching on, and time… is still marching on.)
@Meyerweb not sure to grasp the demand, still: have you looked at the !default keyword when defining SASS var ?
you can then override the var values when importing the file
i do things like
@use "constants";
@use "module" with (
$var-a: constants.$var-a-override,
);
@Meyerweb Are the variables mixed with length (and so on...) ones? Are they named consistently so that you can extract just those related to the palette?
For example, this would suck to automate:
```
$background-1: gainsboro;
$width-ico: 80px;
$text-main: #222;
$shadow-c: rgba(0, 0, 0, .2)
```
But for the case when they're named consistently:
```
$back-c: gainsboro;
$width-ico: 80px;
$text-main-c: #222;
$shadow-c: rgba(0, 0, 0, .2)
```
You can automate creating a list of the dark versions.
@Meyerweb This would also allow you to have a list of excludes (for example, you want to exclude the shadow from the list).
And in that case, you'd end up having something like:
```
$back-c: gainsboro;
$text-main-c: #222;
$shadow-c: rgba(0, 0, 0, .2);
$back-c-dark: #222;
$text-main-c-dark: #eee;
```
Then in the code, I would use a Sass function that generates a `color-mix()` (for better support) or `light-dark()` from the desired base variable name and a custom property indicating the theme.
@Meyerweb The idea from here basically https://bsky.app/profile/anatudor.bsky.social/post/3kh2ekxdc2k23
I would *not* use CSS variables for the palettes and for things that aren't dynamic in general. Using Sass variables means faster websites. My main laptop is from 2006, these things can make a difference.
Here's a pure CSS version that also has an auto option based on a `prefers-color-scheme` MQ. And now you know why I was asking this a few months ago https://twitter.com/anatudor/status/1715014962874040353 just having text options got boring after about a year 🙃 Live demo https://codepen.io/thebabydino/pen/eYxOmRY?editors=1100 #css
@Meyerweb
What I do recently is a kind of mix where I use css variables for all colors, and the `light-dark(...)` css function for defining them, and only in the parameters to the light-dark function do I use sass color functions.
When using a module that is customized by putting colors in sass variables for it, I try to use `var(--my-color)` as the value of the sass variable.
@Meyerweb Apologies if you’ve figured this out or I’m otherwise unhelpful, but I’ve done something like this in the past. If refactoring the SCSS variables throughout your stylesheet isn’t too much, then this might work for you
Eric A. Meyer
FeloniousPunk
Shawn Eisenach
andersaloof
Chris Finazzo
Daniel Barber
Bram Gotink
John Morahan
David Marland
Aki the Conqueror 🦓
akazzop
Ana Tudor 🐯
Rasmus Kaj 🎼🦀
tinynow
Joshua Hamilton