Tag-based code injection, Headline theme

Themes
1

Hi all – I’ve just moved my portfolio over to Ghost and just reading this forum has been really helpful already!

Is it possible to trigger a dark mode only on certain posts in the ‘Headline’ theme? I’d like to have this on video and audio embeds only; these all have a ‘watch’ or ‘listen’ tag on my website.

This would probably be really easy with a custom template, but I’m limited to what’s possible in the ‘Headline’ theme with code injection and yaml edits. So far, my header code injection looks like this to ditch all post sidebars and give audio/video posts homepage-only thumbnails:

<style>
  .gh-article-sidebar {
  display: none !important;
  }
  .tag-watch .gh-article-image {
    display:none;
  }
  .tag-listen .gh-article-image {
    display:none;
  }
  </style>

Is it possible to force a dark theme in those .tag-listen and .tag-watch sections?

Any help greatly appreciated :slight_smile:

2

Iirc, headline includes classes like .tag-slug, so yes, you should be able ti change styling based on tags. See this (second part) for how to sort out dark mode: Adding a dark mode button to your Ghost blog

2 Likes
3

Thank you, this worked!