From 17d7b71448a4a3c52accc96e742671fb0914ad74 Mon Sep 17 00:00:00 2001 From: Ryan Fox Date: Mon, 8 Nov 2021 11:50:01 -0800 Subject: [PATCH] Blog: Add bad-theming.md --- posts/2021-11-08-bad-theming.md | 28 ++++++++++++++++++++++++++++ static/images/theme-selector.png | Bin 0 -> 3608 bytes 2 files changed, 28 insertions(+) create mode 100644 posts/2021-11-08-bad-theming.md create mode 100644 static/images/theme-selector.png diff --git a/posts/2021-11-08-bad-theming.md b/posts/2021-11-08-bad-theming.md new file mode 100644 index 0000000..1d892b1 --- /dev/null +++ b/posts/2021-11-08-bad-theming.md @@ -0,0 +1,28 @@ +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. diff --git a/static/images/theme-selector.png b/static/images/theme-selector.png new file mode 100644 index 0000000000000000000000000000000000000000..f3b32dfd256e4dcb1612fb7feb7075ca6cf1c351 GIT binary patch literal 3608 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 e$Pkyo-S98K0se_lBL4;e0000