New Pull Request: Dark Mode for Headline theme

I’ve implemented Dark Mode for the Headline theme. This adds a preference in the Theme settings to select Light, Dark or Auto.

If Auto is selected, dark mode will be enabled if the user’s browser indicates a preference for it.

The implementation is based on the colors and CSS that at the Casper theme uses for Dark Mode. The pull request is here:

5 Likes

can I use this by code injection?

My implementation involves a one-line change to default.hbs which can’t be done via code injection.

However, if you don’t want the option for Light mode or the option to for the mode to switch automatically, then it would be possible to read through my CSS, understand how to adapt it for that case, and then use code injection for a dark mode. It would be up to you to made that adaptation if you want to try it.

Site performance will be slightly better if code injection is avoided though. When CSS is implemented in screen.css, it can be loaded once and cached.

Whatever you add through Code Injection is loaded repeatedly on every page.

Maybe off topic, but how do I add my custom css to the css files to improve performance? I’m not really sure how to do that as I’m not a developer

Download a theme, unzip it, modify the screen.css, re-zip it, upload the zip file.

I’ve now produced zip file with my headline theme changes if you want to try them directly. Here’s the full list of changes:

  • Allows admin to support Light, Dark or Auto in Settings
  • Auto mode sets the color scheme based on user preference
  • Titles on tag pages are “Title Case” instead of UPPERCASE.
  • “Latest” items on home page has been replaced with “Featured” items.
  • Since there’s only one author, author photos and bylines have been hidden.
  • “Reading time” was hidden"
  • Less whitespace in the footer
  • Smaller “header” area
  • Narrower top bar
  • Custom archive.hbs page to list every post. To use it, add a route to it in routes.yml and link it navigation.

Here are screenshots of the front page and my custom archive page:

You can download the zip file from here: Release v1.0.0 · markstos/Themes · GitHub

If you want to further modify the theme for your own use, I’ve published the full source here with instructions on how to this:

I made this for my personal use and am sharing it. Feedback is welcome, but I’m not taking feature requests for further changes and may make incompatible changes in the future.

Enjoy.

1 Like

Hi,

Thank you for sharing this. I am using Journal free theme from Ghost marketplace and would like to add also this light/dark mode feature that depends on reader settings. Is it possible to do it the same way that you proceed with Headline ? Also, where can I find the code you added to add this feature in Headline ?

I haven’t looked at the Journal theme to see the differences. I assume it’s similar.

There are links to my source code on GitHub in my original post above.