New Pull Request: Dark Mode for Headline theme

Themes
1

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
2

can I use this by code injection?

3

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.

4

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

5

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

6

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:

image
image1612×1929 137 KB

image
image1619×1050 79.9 KB

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
7

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 ?

8

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.

9

I’ve made my dark mode Headline theme better documented and easier to install. Details here:

Direct Github repo link:

10

Hi,
This is really great!

I noticed one minor thing in Dawn theme. When I have auto color selected, backticks (``) content looks inconsistent.
Theme color is Auto:
In light theme: it looks good
In dark theme: it looks exactly like light(instead of what dark theme provides)

It seems like the backticks content in auto selection is not overwriting when the browser/computer theme is dark, keeps using the light one.

Attaching images for context:

Screenshot 2023-03-03 233646
Screenshot 2023-03-03 233646735×350 69.2 KB

11

Thanks for spotting that. A patch to fix it would be welcome.

12

Did you mean the Headline theme? This thread is only about the Headline theme.

13

Oops, I thought its general, since I saw many themes in comments. Is the auto theme a default ghost feature on all themes or it is per theme?

Do you know if I my problem can be solved, new to ghost.