search

denoland / deno_blog

Minimal boilerplate blogging.
MIT License
451 stars 93 forks source link

Low contrast styling in light and dark modes #140

Open kyeotic opened 5 months ago

kyeotic commented 5 months ago

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 commented 4 months ago

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.