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 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.

Ana Tudor (@anatudor.bsky.social)

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

Bluesky Social