Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
mneveroff opened this issue Feb 4, 2024 · 3 comments · May be fixed by #323
Open

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

mneveroff opened this issue Feb 4, 2024 · 3 comments · May be fixed by #323

Comments

@mneveroff
Copy link

mneveroff commented Feb 4, 2024 •
edited
Loading

Continuing from #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:
SCR-20240204-dcny-2

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>
@mneveroff mneveroff changed the title [Dawn] Code snippets are unreadable, again [Dawn] Code snippets seem to be unreadable (see issue from 2022) Feb 7, 2024
georgepstaylor added a commit to georgepstaylor/Themes that referenced this issue Feb 25, 2024
@georgepstaylor
fix TryGhost#320
7503fa0
@georgepstaylor
Copy link
Contributor

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 😄

@georgepstaylor georgepstaylor linked a pull request Feb 25, 2024 that will close this issue
Open
@mneveroff
Copy link
Author

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
Copy link

jevidl commented Mar 8, 2024

@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.

georgepstaylor added a commit to georgepstaylor/Themes that referenced this issue Jul 25, 2024
@georgepstaylor
fix TryGhost#320
8d74394
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix #320 - default font colour when not using Prism for code blocks georgepstaylor/Themes
3 participants
@georgepstaylor @mneveroff @jevidl