Dark mode for Blog template?

Is there any way to switch the color variables for background color and text color in the Blog template when someone is using dark mode? I know how to do it with a media query in CSS, but I'm not sure how to do it with variables defined in a JSON file. Thanks!

5 replies

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}};
  ...
Answered a year ago · Improve this answer

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.

Answered a year ago · Improve this answer

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);
}
Answered a year ago · Improve this answer

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.

Answered a year ago · Improve this answer

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

Answered 3 months ago · Improve this answer

Markdown allowed
Question or feedback?
Contact us

Tags

developers 28 questions bug 14 questions posts 9 questions resolved 7 questions request 6 questions google-drive 5 questions configure 4 questions pages 3 questions added 3 questions meta 3 questions More tags →
Subscribe for changes
RSS Feed of latest questions