How can I add dark mode (based on device settings) to the magazine template? I can't figure it out because colors are defined in the template editor settings.
Much appreciated, Ray
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;
}
}
Answered a year ago ·
Improve this answer
Got it, thanks. I'm used to simpler CSS layouts like on your blog theme but magazine's had me lost for a moment ; )
Answered a year ago · Improve this answerDid you manage to do it? I'm trying to figure out myself.
Answered 10 months ago · Improve this answerHere'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
Answered 10 months ago · Improve this answer