mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
Add recommendations for dark themes
This commit is contained in:
parent
f61bbfe3d2
commit
8607612e0a
2 changed files with 16 additions and 0 deletions
|
@ -89,6 +89,8 @@ Some users' browsers set default page colors that aren't black-on-white. For ins
|
|||
|
||||
It's got a grey background, a header with unreadable black/grey text, and unreadable white-on-white code snippets
|
||||
|
||||
## Dark themes
|
||||
|
||||
If you do explicitly set colors, please also include a dark theme using a media query:
|
||||
|
||||
```
|
||||
|
@ -99,6 +101,14 @@ For more info, read the relevant docs:
|
|||
|
||||
=> https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme prefers-color-scheme docs on MDN
|
||||
|
||||
When setting colors, especially with a dark background, I recommend checking your page's contrast using Advanced Perceptual Contrast Algorithm (APCA) values. You can do so in an online checker or Chromium's developer tools (you might have to enable them in a menu for experimental preferences.
|
||||
|
||||
=> https://www.myndex.com/APCA/simple Online ACPA Contrast Calculator
|
||||
|
||||
Blue and purple links on a black background have much worse perceptual contrast than yellow or green links.
|
||||
|
||||
CSS filters such as "invert" are quite expensive to run, so they should be used sparingly. Simply inverting your page's colors to provide a dark theme could slow it down or cause a user's fans to spin.
|
||||
|
||||
## Image optimization
|
||||
|
||||
Some image optimization tools I use:
|
||||
|
|
|
@ -98,8 +98,14 @@ Some users' browsers set default page colors that aren't black-on-white. For ins
|
|||
{{< picture name="website_colors" alt="This page with a grey background behind black/grey headers and white-on-white code snippets" >}}
|
||||
</a>
|
||||
|
||||
### Dark themes
|
||||
|
||||
If you do explicitly set colors, please also include a dark theme using a media query: `@media (prefers-color-scheme: dark)`. For more info, read the relevant docs [on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
|
||||
|
||||
When setting colors, especially with a dark background, I recommend checking your page's contrast using <abbr title="Advanced Perceptual Contrast Algorithm">APCA</abbr> values. You can do so in an [online checker](https://uglyduck.ca/lazy-dev-dark-mode/) or Chromium's developer tools (you might have to enable them in a menu for experimental preferences). Blue and purple links on a black background have much worse perceptual contrast than yellow or green links.
|
||||
|
||||
CSS filters such as `invert` are quite expensive to run, so they should be used sparingly. Simply inverting your page's colors to provide a dark theme could slow it down or cause a user's fans to spin.
|
||||
|
||||
Image optimization
|
||||
------------------
|
||||
|
||||
|
|
Loading…
Reference in a new issue