Edge Theme Darkmode?

Themes
1

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?

2

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: https://github.com/TryGhost/Edge/blob/master/assets/css/general/basics.css

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.

3

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>
4

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

5

so I added the injection

did I make a mistake somewhere

image
image1920×783 144 KB

6

Seems like your site doesn’t have the latest version of Edge (GitHub - TryGhost/Edge: A visually aesthetic portfolio theme for Ghost) where CSS custom properties were added. As the version you’re using doesn’t have CSS custom properties, you can update the colors manually per element. For example,

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
        }
    }
</style>
1 Like
7

1st thank you for the code you gave me worked …but I have to figure out how to change my black navigation text to white or grey because I can’t see lol

with that being said would it be easier time-wise to download the new version of edge and go through page by page of my current theme to make sure my custom stuff is carried over … I saw that you also added some code for alt text for featured images and having that is important.

or should i stick with what I have and just figure out how to change my navigation colors

ps. I tested my current theme on a sample ghost account running 4.9 and I saw the new alt image feature even tho I didnt have the new alt code on my theme …not sure if that is needed

8

In case you’re upgrading to the latest edge: What you are looking for is a way to change the :root element in the basics.css file:

:root {
    --primary-text-color: #333;
    --secondary-text-color: #999;
    --white-color: #fff;
    --light-gray-color: #f1f1f1;
    --mid-gray-color: #e9e9e9;
    --dark-gray-color: #1a1a1a;
    --black-color: #000;
    --font-base: rubik, sans-serif;
    --animation-base: ease-in-out;
}

These determine what colors are applied to elements across your theme, like the color of the body element: color: var(--primary-text-color);. Given you change the above variables, you can statically change your theme. If you’d like to do that dynamically, it’s a bit technical but certainly doable with some code injection

You could try to do the following:

  1. Create a classified :root pseudo-element: :root.dark-mode
  2. Use an injected JS function to recognize the user’s preference and then apply the class dynamically
<style>
:root.dark-mode {
    --primary-text-color: #ccc;
    --secondary-text-color: #aaa;
    /* ... etc*/
}
</style>

<script>
  // check if user has dark mode preferences in their browser settings
  const hasDarkPreference = window.matchMedia("(prefers-color-scheme: dark)").matches;
  // Conditionally apply the dark-mode class to the root element (= document.documentElement)
  if(hasDarkPreference) {
    document.documentElement.className = 'dark-mode';
  } else {
    document.documentElement.classList.remove('dark-mode')
  }
</script>

I’ll be frank - I haven’t tried this one, but it might just work. If you need a reference, feel free to take a look into a project of mine that uses this approach:

CSS: https://github.com/tq-bit/candidus-lite/blob/master/assets/css/variables.css
Javascript: candidus-lite/theme-toggle.js at master · tq-bit/candidus-lite · GitHub

9

thank you I might try the second option…I spent a lot of time customizing the old edge theme and the new code for alt text is nice but I’m not sure I want to spend the time to recode everything