dark mode

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

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

(this section is a stub, please help expand it with specific steps!)

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

See Also

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• https://css-tricks.com/dark-modes-with-css/
• whitehouse.gov has a dark mode as of 2021: https://www.theverge.com/2021/1/20/22240864/new-white-house-website-dark-mode-accessibility
• https://infosec.exchange/@catsalad/109910417804717204 and possible page-cartoon:
  • "*Hacker Noises*" @catsalad February 22, 2023
• 2025-04-10 Cassidy Williams: How to make your images in Markdown on GitHub adjust for dark mode and light mode (archived) (syndicated to GitHub Blog) - example of using picture elements to automatically be able to show a correct decorative image depending on the browser color scheme.