How to force the theme for viewers on specific articles

Themes
1

It seems that the default mode (light or dark) of Ghost depends on the default settings of the device accessing the website. Is there a way to force the theme for readers on a specific article?

2

Are Custom Templates what you’re looking for?

https://ghost.org/tutorials/custom-page-templates/

3

I think that @rrapp, just like me, is looking for a way to force either dark or light mode upon the user. If you know how, please share.

I would love to apply dark mode as the default mode.

4

Yes, but they stated that they’re looking to

not the entire site. Hence a custom post template that can be selected post by post.

But then again, if I recall correctly I’ve seen minimaluminium or somebody else point out that one can inject a few JS lines into code injection in order to disable/enable dark/light mode, which I suppose could in place be added into post code injection on a case by case basis.

5

Okay. If you have an injection that disables light mode and forces dark, please share it. @minimaluminium do you by any chance have an injection for it?

6

There wouldn’t be a broad-based code injection for that across all themes, it would be based specifically on how light/dark mode was set up for each individual theme.

7

Okay. I’m using Dawn but I am in the process of switching over to Ease. Do you, by any chance, have a injection for Ease?

8

Nope, but dark mode for those two themes may be coded the same as I think they were both designed by minimaluminium. Go through his comment history (which I don’t think would be all that long) and you may find something. Then again that code may have been mentioned by Kevin, whose comment history is of course rather long. Or alternatively do a search or two.

9

Yep, cool. Thanks!

10

For Dawn theme, to make it dark globally, this script can be used in the injection.

<script>
    localStorage.setItem('dawn_theme', 'dark');
</script>

But when we use it in a post specific code injection, it won’t work as expected. Because once a reader visits the post, the theme will be dark globally.

To make it work for a specific post, we can inject the class of <html> element. By adding this in a post specific code injection, the dark mode will only work on that post, not globally.

<script>
    document.documentElement.classList.add('theme-dark');
</script>

Please note that this is only for Dawn theme. Ease theme doesn’t have dark mode feature.

1 Like
11

Thank you.