Dark mode for Blog template?

Hello! There is but you'll need to edit your template's CSS file. For example, if you fork an editable copy of the blog template, you can add a media query to target dark mode which overrides these values in lines 23-24 of style.css:

body {
  color: {{text_color}};
  background: {{background_color}};
  ...

Yeah, the only problem with that is that their are multiple places in the CSS where "text_color" is used. That's why it would be easier to change the value of the variable rather than hard code the change into a media query.

You could instead use CSS variables, replacing the use of template variables (e.g. {{text_color}}) like so:

:root {
  --text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #fff;
  } 
}

body {
  color: var(--text-color);
}

Thanks, that's exactly what I was wondering about. I had read up on CSS variables, but didn't know if there would be another way to do it with the existing JSON variables.

So how do you do it? I'm using magazine template.