Code block text not visible in dawn night mode

Image from HTTP/2 Flow Control Deadlock

Text not visible when the theme goes into dark mode. I have disabled dark mode for the time being.

I would maybe suggest to the theme creator, if its a core one then here works but without the theme its just a guessing game.

1 Like

@Samlighty HNY!

I can repro this with the Dawn theme if my Mac is running dark mode and I have the theme Color scheme set to Auto

If I have Dawn running the Dark color scheme, the contrast is good! You can switch between these in design settings in Ghost (/ghost/#/settings/design/edit)

Your options then:

  1. If you want everyone to experience your site in a dark mode, you can toggle the dark colour scheme on for all
  2. If you want Dawn to be responsive to the user’s choice of light or dark mode, use auto and apply a fix!

There are a few ways you could write a temporary fix using CSS. I’ve not fully tested this (it might catch things I didn’t mean to catch, it might need some tweaks for browsers other than Safari MacOS) but here’s a starter for 10:

<style>
  @media (prefers-color-scheme: dark) {
  pre {
    background-color: #2f333c;
    color: #e2e2e2;
  }
}
</style>

Apply that to the Site header in code injection.

Dawn is one of our official themes, so I’ve raised a bug report with the design team and they can look into this to get a proper fix for a future update.

1 Like