29 lines
1.1 KiB
Markdown
29 lines
1.1 KiB
Markdown
|
template: post
|
|||
|
title: Respect my damn color scheme preference
|
|||
|
author: flewkey
|
|||
|
timestamp: 1636400000
|
|||
|
license: CC-BY
|
|||
|
|
|||
|
I recently switched from light themes to dark themes. Dark themes seem to be
|
|||
|
supported enough that most applications seem to work with them. Many
|
|||
|
websites don’t, but it’s not the end of the world. Theming is hard and I do not
|
|||
|
expect developers to support it.
|
|||
|
|
|||
|
However, I find it inexcusable and frustrating when a website already has a dark
|
|||
|
theme, but ignores the user’s preferences. Especially if they have a stupid
|
|||
|
little theme selector that writes to a value in localStorage or something.
|
|||
|
|
|||
|
![That’s _not_ how you do that!]({root}images/theme-selector.png)
|
|||
|
|
|||
|
If you must use JavaScript to set your themes, consider taking your user’s color
|
|||
|
scheme preference into consideration when choosing which theme to default to. We
|
|||
|
will be grateful.
|
|||
|
|
|||
|
```
|
|||
|
if (window.matchMedia("(prefers-color-scheme: dark)").matches)
|
|||
|
/* Set theme */
|
|||
|
```
|
|||
|
|
|||
|
Even better, you can just use a media query like a normal person. If you need
|
|||
|
to override it with JavaScript later, you can do that.
|