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

Low contrast styling in light and dark modes #140

Open
kyeotic opened this issue Jan 23, 2024 · 1 comment · May be fixed by #143
Open

Low contrast styling in light and dark modes #140

kyeotic opened this issue Jan 23, 2024 · 1 comment · May be fixed by #143

Comments

@kyeotic
Copy link
Contributor

kyeotic commented Jan 23, 2024 •
edited
Loading

I'm using this kit for my blog with very minimal styling (basically list-style and a single bg-color).

Most of the time it looks correct.

But under some conditions the contrast of text/background goes to almost zero (notice the invisible titles?)

I can get this to happen by toggling the "night mode" option on Firefox iOS. Some others have reported it in a variety of conditions that I cannot reproduce.

What's going on here? Is this from styling in deno_blog or gfm? I can't find anything that would do this, but its consistent.
@kyeotic
Copy link
Contributor Author

kyeotic commented Feb 7, 2024

It looks like this is caused by the theme: 'dark' setting when it conflicts with the Browsers theme selection. The body ends up looking like this when the browser is in light mode.

div class="mt-8 markdown-body" data-color-mode="dark" data-light-theme="light" data-dark-theme="dark"

When I remove the blogs theme override, it looks like this

div class="mt-8 markdown-body" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark"

And everything looks correct.

@kyeotic kyeotic linked a pull request Feb 7, 2024 that will close this issue
Open
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.

Theme fix kyeotic/deno_blog
1 participant
@kyeotic