What’s a blog without dark mode? My prior blog home had only dark mode. I was inspired by Aleksandr’s blog with a clever little lamp that toggles between light and dark mode. Hopefully for others, he will write a blog on this topic. I ended up spending the time to reverse engineer it and apply to this fork of gridster theme.

Update: as it turns out, Aleksandr will not be creating a blog, and also prefers that I not use his lamp. Although I personally really like the lamp idea, after a conversation with a graphic artist regarding what is more intuitive for end users, I ended up instead switching to the more common and open source sun and moon icons from google’s material design.

It is probably a good idea to not hardcode color values, as mentioned in Derek Kedziora’s Dark Mode Revisited. The default Jekyll Gridster theme I am using has a bunch of hardcoded values, so that’s another thing to fix.

The key is the JavaScript toggle method that removes a class if already present, otherwises adds the class:

document.body.classList.toggle("dark-theme", forceDarkMode)

Adding New Dark Mode Items

There are two places to make changes: The javascript toggle, and the CSS style.

For instance, to change the color palette note that one of the parent div classes is color-change. A line is added to the ToggleDarkMode function:

ToggleDarkModeItem('.color-change', forceDarkMode);

To actually toggle to a dark mode class, we need to have defined that class. This is typically included in _lamp.scss for instance add this line to the comma-separated list of elements and classes. (recall classes are names with a dot-prefix):

.color-change.dark-theme,

See _includes/_dark_mode.js typically found in the _includes/footer.html.

The _sass/partials/components/_lamp.css contains the classes for all dark mode toggles:

head.dark-theme,
article.dark-theme,
.sidebar.dark-theme,
code.dark-theme,
body.dark-theme {
    color: #eee;
    background: #121212;

    a {
        color: antiquewhite;
    }

    a:hover {
        color: white;
        text-decoration-color: white;
        text-decoration: underline;
    }
}

Code snippet syntax highlighting is implemented with rouge and is installed with:

gem install rouge

To toggle dark-mode, the rougify style base16.dark > github.dark.css command was used (there does not seem to yet be a github.dark implemented). The resultant file had all the .highlight text segments removed, then was all placed within the code.dark-theme in the _lamp.scss file.

See also this blog