[Dawn] Code snippets seem to be unreadable (see issue from 2022)

[mneveroff]

Continuing from https://github.com/TryGhost/Themes/issues/197

There seems to still be an issue as of Dawn latest release with the code snippets

I assume that the order in which the .css files are loaded is incorrect, as this is what I see in my code inspection for pre blocks on the Blogpost preview page:

It's apparent that there seem to be two variables: --primary-text-color and --color-primary-text. Whilst the latter would read well in dark mode it's not the one that gets applied. Any advise? For now I'm overriding the color property of pre HTML elements.

Installation details

Version: 5.78.0 Environment: production Database: mysql8 Theme: dawn v1.0.0 (as per UI, but uploaded one from https://github.com/TryGhost/Dawn/archive/main.zip, but I must say that some versioning wouldn't hurt)

Workaround

Adding this snippet to page footer mitigates the issue:

<style>
  /* Fixing ghost Dawn theme issue */
  pre {
    color: var(--color-primary-text)
  }
</style>

[georgepstaylor]

Hi @MNeverOff 👋 In case you were unaware, you can use Prism to provide richer code blocks. See: https://ghost.org/tutorials/code-snippets-in-ghost/

I did a bit of digging on this issue as I'd experienced the same thing - I eventually tracked it down to a one of the vars -color-lighter-gray not being overridden on detection of a browser requesting a dark theme. Which is why this looked okay when selecting a dark or light theme manually, but letting the browser call for the dark theme had the wrong background colour. Check out #323 - hopefully one of the Ghost team sees this 😄

[mneveroff]

Hey @georgepstaylor, well done on submitting a PR there, I came to sam e realisation but wasn't as confident in my overarching knowledge of Ghost just yet to submit the fix myself, appreciate you taking that step!

Also, will definitely check out Prism, looks much better than the thing I've built with a :pre copypasting of content from codeblocks

[jevidl]

@MNeverOff thank you for including the workaround. I find it annoying that on dark it's still a white box, but this makes it readable!

Hopefully the pull request gets reviewed soon and the workaround is no longer needed.