From 02dc7822ec439c9db449c81e347693038b247dda Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Fri, 2 Jul 2021 20:49:44 -0700 Subject: [PATCH] Web best practices: dark themes: Mention OLEDs OLED displays use less energy when displaying darker colors. --- content/posts/website-best-practices.gmi | 2 +- content/posts/website-best-practices.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index 3f0fe39..17c791c 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -110,7 +110,7 @@ When setting colors, especially with a dark background, I recommend checking you => 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. +Blue and purple links on a black background have much worse perceptual contrast than yellow or green links. Also, remember that the darker the background, the less battery your website will require devices with OLED screens. 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. diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index b312bcb..6dd5671 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -105,7 +105,7 @@ Some users' browsers set default page colors that aren't black-on-white. For ins 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 APCA 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. +When setting colors, especially with a dark background, I recommend checking your page's contrast using APCA 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. Also, remember that the darker the background, the less battery your website will require devices with OLED screens. 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.