Add dark mode to magazine template?

That's a tricky one, you'll need to refactor a lot of the template's CSS to make this work.

Note that the template settings editor modifies the values in your template's package.json file, e.g. when you set the background color using the color picker, the value of background_color in package.json changes. If you manually edit the background_color property in your package.json file, you'll see the color picker on the template settings page reflect this change.

The variable {{background_color}} is then available to all of the views on your template, including the CSS file.

In order to accomplish what you're after, I'd refactor the CSS file so that instead of repeatedly using {{background_color}} and {{text_color}} across the CSS, you'd create a single CSS variable for each, which you could then override when dark mode is required:

 :root {
   --background: {{background_color}};
   --text: {{text_color}};
 }

@media (prefers-color-scheme: dark) {
    :root {
        --background: #2e2f33;
        --text: #D8D4D4;
    }
}

Got it, thanks. I'm used to simpler CSS layouts like on your blog theme but magazine's had me lost for a moment ; )

Did you manage to do it? I'm trying to figure out myself.

Here's how I did it -- at or near the top of css-theme.css, add:

:root {
   --bg: {{background_color}};
   --text: {{text_color}};
   --accent: #ff3700;
   --text-light: #585858;
   --border: #d8dae1;

 }

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #2e2f33;
        --text: #D8D4D4;
        --accent: #ffb300;
        --text-light: #ababab;
        --border: #424242;

    }
}

{{background_color}} is defined in the template settings per the original answer above (you can always replace it with your own color code).

In the second part (@media) these are the dark color settings, i.e. --bg #2e2f33.

Then you wade through the rest of the CSS to replace the hard coded colors to the vars above, i.e.:

.bg-background: {background: var(--bg);}
.bg-sidebar: {background: var(--bg);}

.black-90 {
  color: var(--text);
}

.black-80 {
  color: var(--text);
}

.black-50 {
  color: var(--text);
}

.black-30 {
  color: var(--text);
}

.b--black-10 {border-color:var(--border);}
.b--black-05 {
    border-color:rgba({{#rgb}}var(--border);{{/rgb}},.05)
}

It takes some experimenting to get 'em all.

Hope this helps, Ray

So does this change Magazine to be persistently in dark mode, or does it respond to the user's device settings? That's what I'm really after.

@media (prefers-color-scheme: dark) is what tells the CSS to "look for" the device using dark mode.

Having that will switch the colors to whatever is inside that brackets when the device is set to dark mode. If light mode is preferred then it will look at the default in the "default" root. You will have to make your color look at the variable as described above.