Edge Theme Darkmode?

Hey guys, I’m hosting my blog on blog.dallasgroot.ca. New to ghost and wanted to build my own blogging server. Currently using edge theme in ghost 4.0. How do I set dark mode on the theme?

Hi Dallas, love your site, I’ve always wanted to visit Vancouver!

Looking at the demo of the Edge theme here: Edge it doesn’t appear to offer a switch to change from a light mode to a dark mode (not all themes have this feature)

The code for the theme on Github is here: GitHub - TryGhost/Edge: A visually aesthetic portfolio theme for Ghost

And if you’re confident / willing to learn how to make changes to the colours yourself and rebuild the theme, it looks like the file you need to edit is this one: Edge/basics.css at master · TryGhost/Edge · GitHub

Those 11 lines at the top of that file are colour variables - change them here, rebuild the theme, and everything should automagically change colour for you.

Also if you don’t want to rebuild the assets, you can change the colors for dark mode in Code injection > Site Header by overriding them. For example, this bit of CSS changes white to dark color when it’s in dark mode. Similar idea as how we implemented this in Dawn theme.

<style>
    @media (prefers-color-scheme: dark) {
        :root {
            --white-color: #1a1a1a;
        }
    }
</style>

Wow, thanks for the help you guys! I’ll do some more researching!