Dark Mode themes no longer properly affect card background-colors

Using Ghost
1

Fill out the following bug report template with as much detail as possible!

Are you sure this is a bug? If you just need help, post in the developer help category. If it’s a feature request, head to the ideas category.

Issue Summary

A recent update to cards. min. js (I have to put spaces after the periods because the automod thinks these are websites and won’t let me share more than three) and cards. min. css changed the ability for card-assets (bookmarks, audio, etc.) to adapt to dark mode in various themes downloaded from ghost. org. I made a ticket for this issue on the Attila theme github but I tried installing Liebling and am having the same issue. I believe this bug likely affects all themes with a dark mode transition toggle. cards. min. css is overriding the background-color-secondary style in the theme so that when dark mode is enabled, the text and and controls (play buttons, etc.) change color but the background color does not, so it becomes light on light and illegible. There is a code injection workaround here which will keep the card contents legible and usable, but it still results in the cards being in light mode while the rest of the site is in dark mode. Ideally, cards should transition to dark mode with the rest of the site, as has been functional in previous versions of Ghost (example of this on the demo site for Attila, which does not have cards. min. css)

I believe this is a ghost bug and not a theme bug since it breaks multiple themes and there does not appear to be a way at the theme-level to override cards.min.css

Steps to Reproduce

  1. Create a Ghost site
  2. Install Attila, Liebling, or likely many other themes from ghost. org which feature a dark mode toggle
  3. Create a new post
  4. Add a /bookmark or /audio
  5. Publish post
  6. Toggle theme between dark mode and light mode
  7. You will observe the text color of the card-assets changing but not the background-color-secondary.

Setup information

Ghost Version
5. 94 .0

Node.js Version
Hosted on PikaPods

How did you install Ghost?
Hosted on PikaPods

Provide details of your host & operating system
Hosted on PikaPods.

Database type
MySQL 8

Browser & OS version
Safari. iPadOS 17. 6. 1

2

This is by-design:

3

Well that’s frustrating. So I’ll need to modify every theme I use until they get updated I guess. I wish more consideration was taken to how this would affect the themes promoted on the main Ghost website. As a new user who is not a web developer, with only two computer science classes under my belt, this is a bit tricky to navigate. Dark theme is an important accessibility feature for users with certain visual disabilities so breaking dark mode is problematic for that portion of my audience who rely on strong color contrast.

I’m sure that eventually theme designers will catch up to this change, but this felt like quite the mystery to have to investigate. Time to mess around with json.

4

Hmmm the exclusion fix doesn’t really work if your theme does not already have its own card styling. So the Liebling theme’s audio posts are still broken, for instance. If I exclude audio card-assets then it’s just un-themed because the developer was depending on the default theming. So the solution here is to develop my own theme, use a different theme that hasn’t been broken (I suspect it is all of them though), or wait for the developer to update their theme.

5

This is fixable with code injection. Link a page with the problem and I’ll help you fix it. :)

1 Like
6

I really appreciate the offer! By the time I saw this I had already worked out the code injection on my own though.

<style>
.kg-audio-play-icon,
.kg-audio-pause-icon {
color: #000000 !important
}

.kg-audio-play-icon svg, .kg-audio-pause-icon svg, .kg-audio-unmute-icon svg, .kg-audio-mute-icon svg {
fill: #000000 !important
}

.kg-audio-seek-slider::before, .kg-audio-volume-slider::before {
background-color: #000000 !important
}

.kg-audio-playback-rate svg {
fill: #000000 !important 
}

.kg-audio-playback-rate {
color: #000000 !important 
}
  
</style>

This is what I am using for the Liebling theme. It’s not ideal since the card is still bright white instead conforming to dark mode but I don’t have the technical know-how to reverse-engineer Eduardo Gomez’s light/dark mode toggle and create new dark-theming for the card, so this is good enough for now. It remains legible between dark mode and light mode.

For Attila, I was able to exclude the bookmark card from the json file to fix those. Liebling’s audio cards were broken by that, but Attila had functional fall-back theming.

Thank you for offering though.

1 Like