# New Pull Request: Dark Mode for Headline theme **URL:** \ **Category:** Themes\ **Created:** [June 24, 2022, 2:08am UTC](https://forum.ghost.org/t/new-pull-request-dark-mode-for-headline-theme/30960 "2022-06-24T02:08:31Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![markstos](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/markstos/32/18182_2.png) [@markstos](https://forum.ghost.org/u/markstos)\ **Post date:** [June 24, 2022, 2:08am UTC](https://forum.ghost.org/t/new-pull-request-dark-mode-for-headline-theme/30960/1 "2022-06-24T02:08:31Z")
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: > > > Implement dark mode for headline theme based on Casper theme implementation. > > … - New option in Theme settings to select Light, Dark or Auto. Defaults to Light. > - Auto respects browser/OS preference and sets accordingly. > > This commit does not include the "built" assets for easier review. > > The theme passes \`gscan\`. > > !\[image\](https://user-images.githubusercontent.com/25829/175447543-5c410ea6-3d51-4351-ac7a-1c1c74a89e5f.png) ---
**Author:** ![Rodhirejab](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/rodhirejab/32/15706_2.png) [@Rodhirejab](https://forum.ghost.org/u/Rodhirejab)\ **Post date:** [June 27, 2022, 2:56pm UTC](https://forum.ghost.org/t/new-pull-request-dark-mode-for-headline-theme/30960/2 "2022-06-27T14:56:19Z")
can I use this by code injection? ---
**Author:** ![markstos](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/markstos/32/18182_2.png) [@markstos](https://forum.ghost.org/u/markstos)\ **Post date:** [June 27, 2022, 4:02pm UTC](https://forum.ghost.org/t/new-pull-request-dark-mode-for-headline-theme/30960/3 "2022-06-27T16:02:41Z")
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. ---
**Author:** ![Leepish](https://avatars.discourse-cdn.com/v4/letter/l/53a042/32.png) [@Leepish](https://forum.ghost.org/u/Leepish)\ **Post date:** [June 27, 2022, 10:02pm UTC](https://forum.ghost.org/t/new-pull-request-dark-mode-for-headline-theme/30960/4 "2022-06-27T22:02:10Z")
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 ---
**Author:** ![markstos](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/markstos/32/18182_2.png) [@markstos](https://forum.ghost.org/u/markstos)\ **Post date:** [June 28, 2022, 1:02am UTC](https://forum.ghost.org/t/new-pull-request-dark-mode-for-headline-theme/30960/5 "2022-06-28T01:02:03Z")
Download a theme, unzip it, modify the screen.css, re-zip it, upload the zip file. ---
**Author:** ![markstos](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/markstos/32/18182_2.png) [@markstos](https://forum.ghost.org/u/markstos)\ **Post date:** [June 30, 2022, 5:16pm UTC](https://forum.ghost.org/t/new-pull-request-dark-mode-for-headline-theme/30960/6 "2022-06-30T17:16:44Z")
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](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/a/4/a4c175458ceceb8af3be6c10d9655205d3efb356.jpeg) ![image](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/f/4/f4cbca0cecb76d4ce226525a2964d83a5476a795.jpeg) You can download the zip file from here: [Release v1.0.0 · markstos/Themes · GitHub](https://github.com/markstos/Themes/releases/tag/v1.0.0) 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. ---
**Author:** ![bastien](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/bastien/32/40675_2.png) [@bastien](https://forum.ghost.org/u/bastien)\ **Post date:** [August 7, 2022, 9:51am UTC](https://forum.ghost.org/t/new-pull-request-dark-mode-for-headline-theme/30960/7 "2022-08-07T09:51:34Z")
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 ? ---
**Author:** ![markstos](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/markstos/32/18182_2.png) [@markstos](https://forum.ghost.org/u/markstos)\ **Post date:** [August 7, 2022, 10:44am UTC](https://forum.ghost.org/t/new-pull-request-dark-mode-for-headline-theme/30960/8 "2022-08-07T10:44:49Z")
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. ---
**Author:** ![markstos](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/markstos/32/18182_2.png) [@markstos](https://forum.ghost.org/u/markstos)\ **Post date:** [December 24, 2022, 3:57pm UTC](https://forum.ghost.org/t/new-pull-request-dark-mode-for-headline-theme/30960/9 "2022-12-24T15:57:32Z")
I’ve made my dark mode Headline theme better documented and easier to install. Details here: > **[My Ghost Headline theme fork with dark mode](https://mark.stosberg.com/my-ghost-headline-theme-fork-with-dark-mode/)** > > This blog is powered by the free, open source Ghost blogging software. > > > Why I like the Headline theme > > For my personal site I wanted a dark mode theme that would work well for writing about a range of unrelated topics. I also go for months without... Direct Github repo link: > **[GitHub - markstos/Headline-markstos at markstos](https://github.com/markstos/Headline-markstos/tree/markstos)** > > markstos ---
**Author:** ![Junaid\_Effendi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/junaid_effendi/32/23404_2.png) [@Junaid\_Effendi](https://forum.ghost.org/u/Junaid_Effendi)\ **Post date:** [March 4, 2023, 4:36am UTC](https://forum.ghost.org/t/new-pull-request-dark-mode-for-headline-theme/30960/10 "2023-03-04T04:36:27Z")
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](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/3X/8/2/824f82c23cdea9d77ba392ee1ee6a9e07164cd37.png) ---
**Author:** ![markstos](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/markstos/32/18182_2.png) [@markstos](https://forum.ghost.org/u/markstos)\ **Post date:** [March 4, 2023, 11:42am UTC](https://forum.ghost.org/t/new-pull-request-dark-mode-for-headline-theme/30960/11 "2023-03-04T11:42:01Z")
Thanks for spotting that. A patch to fix it would be welcome. ---
**Author:** ![markstos](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/markstos/32/18182_2.png) [@markstos](https://forum.ghost.org/u/markstos)\ **Post date:** [March 4, 2023, 12:50pm UTC](https://forum.ghost.org/t/new-pull-request-dark-mode-for-headline-theme/30960/12 "2023-03-04T12:50:14Z")
> [@Junaid\_Effendi](#): > > I noticed one minor thing in Dawn theme. Did you mean the Headline theme? This thread is only about the Headline theme. ---
**Author:** ![Junaid\_Effendi](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/junaid_effendi/32/23404_2.png) [@Junaid\_Effendi](https://forum.ghost.org/u/Junaid_Effendi)\ **Post date:** [March 4, 2023, 2:27pm UTC](https://forum.ghost.org/t/new-pull-request-dark-mode-for-headline-theme/30960/13 "2023-03-04T14:27:08Z")
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.