Hi all! I’m self-hosting Ghost and using the Journal theme. While it’s almost perfect for my needs I really want a dark mode and I can’t figure out where the code for that goes! 
I’ve downloaded the Journal files from Github and read a ton of tutorials but I just can’t put the two together. I’d really appreciate if someone could break the process down for me.
What I want is to add a second colour palette (ideally including a second accent colour), have the site read if the user has a browser preference for light/dark mode and adjust accordingly, and have a button in the site header to toggle between the modes as a backup.
I feel like this should be easy but I haven’t done much with HTML.
1 Like
That’s one of the tutorials I tried following, but I’m afraid I can’t figure out where to put the new colour palette. Journal is calling colours using var(colour name) but I can’t find where those colours are initially defined.
(There’s a few hard-coded colours which I assume I’ll need to replace with variables once I’ve got the two palettes defined, but one step at a time.)
Looks like they’re mostly in vars.css and screen.css, which all get built to assets/built/screen.css (I think by gulp for that theme?). You can put your new colors anywhere after the build css loads with the same specificity (since later declarations win), or anywhere you like with higher specificity.
1 Like
Thank you! I’ll take a look.