dark mode

This article is a stub. You can help the IndieWeb wiki by expanding it with relevant information.

dark mode is a feature of websites and apps that change the color scheme to be easier to read at night or in low light settings.

Why

You should support Dark Mode on your website so when readers choose to use Dark Mode in their OS or browser, your website restyles accordingly and handles images and other resources better than any default color transformations would.

A few more reasons why you might want to add a dark mode include:

dark mode can be less intense on one’s eyes, thus providing a better UX to those who struggle with bright colors on screen.
add more reasons

How To

Come to the light-dark() Side by Sara Joy explains how to use light-dark CSS
Light/dark mode done fast by Kalechips explains how to add dark mode with a CSS media query
Color Schemes and Theme Switchers (CSS and JS) by Solaria explains how to switch themes with Javascript
See Jeremy Keith’s article Dark Mode for an introduction and step by step description of how it works and what he had to do to add Dark Mode support to his website.

IndieWeb Examples

Jeremy Keith has supported dark mode on his website adactio.com since 2019-09-29.
David Shanske added dark mode to his WordPress theme on david.shanske.com since 2021-07.
Ryan Barrett has supported automatic (OS-based) dark mode on snarfed.org since 2021-07-14
Kelson Vibber has supported dark mode on his site since 2022-04-13
Anthony Ciccarello has supported dark mode on his website since 2023-10-02
Paul Watson has supported dark mode on his www.lazaruscorporation.co.uk since 2024-02-03
Joe Crawford began support for dark mode using the @media screen and (prefers-color-scheme: dark) on artlung.com since 2024-05-16
capjamesg has a dark mode implemented with the CSS prefers-color-scheme: light dark feature. His implementation is documented in https://jamesg.blog/2024/11/24/dark-mode.
zacharykaiwrites uses CSS prefers-color-scheme: light dark since Sep 2025.