Skip to content

Dark-mode: A/B test green vs blue vs white #40

Open

Description

@gwern

At present, dark-mode defaults to a simple reversal: black-on-white turns into white-on-black*. But this has some visual downsides - it is hard to get the brightness right, and there is some inherent moire or ghosting to such harsh contrast.

There are 3 other viable colors which could be the 'negation of black' for dark-mode. Red, and green or blue:

Image

'Red' is ideal in some ways (see rubrication) and in theory should less damage sleep/melatonin (hence its usual use in low-level lighting), but it is unfortunately skunked by the association with horror, vampires, goth teens, FPSes etc. So that leaves blue and green.

In a 2019-11-26 poll on Twitter of my followers about preferred color for Dark mode, the results were (n = 177):

  1. blue: 43%
  2. green: 29%
  3. neither: 28% [tacit endorsement of 'white'? no idea what other color they could seriously be preferring]

This is highly balanced, unfortunately, and it's not viable to make it configurable (since most users are first-time readers and even returning users rarely configure anything), and we have to pick one - even if just to declare firmly that it will always be 'white'.

So this seems like a good thing to run an A/B test on.

We can use the usual per-day setup and randomize triplets of white/blue/green for dark-mode users and look for overall traffic effects in Google Analytics, and put in a JS stub to override the default white CSS.

* Examples: https://gwern.net/doc/meta/2025-08-08-gwern-gwernnet-desktopheader-blogversion-darkmode.png https://gwern.net/doc/cs/css/2023-11-19-gwern-gwernnet-linkunderlining-darkmode.png https://gwern.net/doc/cs/css/2023-08-21-gwern-gwernnet-mobile-darkmode-aunnpagetop.png https://gwern.net/doc/cs/css/2023-08-21-gwern-gwernnet-desktop-index-darkmode-pagetopwithtoggleopen.png https://gwern.net/doc/cs/css/2021-03-28-gwern-gwernnet-annotations-mobilepopins-darkmode.png

Activity

  1. added
    enhancementNew feature or request
    questionFurther information is requested
    FrontendApplies to in-browser experience; primarily CSS/JS, but not the raw HTML, nginx, or backend/content.
    BackendOriginal content, Hakyll/Haskell/scripts, Markdown/HTML etc. Usually not CSS/JS. Owner: Gwern.
    on Apr 15, 2026
  2. changed the title [-]Dark-mode: A/B test green vs blue[/-] [+]Dark-mode: A/B test green vs blue vs white[/+] on Apr 15, 2026
  3. pixelazer commented on Jul 4, 2026

    @pixelazer

    Gwern,
    I noticed that the shade of green you've picked looks a lot like the interior colour of post-MiG-21 Soviet aircraft. Was this intentional? It reportedly helps prevent eye strain. Might be something to consider, even if green is trailing blue a little in the polls.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

BackendOriginal content, Hakyll/Haskell/scripts, Markdown/HTML etc. Usually not CSS/JS. Owner: Gwern.FrontendApplies to in-browser experience; primarily CSS/JS, but not the raw HTML, nginx, or backend/content.enhancementNew feature or requestquestionFurther information is requested

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions