Zen's Automatic Dark Mode: How It Adapts

Zen automatically adapts its entire color palette to match your operating system’s appearance setting — no toggle, no button, no user preference stored anywhere. The adaptation is driven by the CSS prefers-color-scheme media query combined with a <meta name="color-scheme"> tag in index.html, which together allow the browser to select the correct theme the instant the page loads and to react in real time whenever you change your OS setting.

Light mode palette

In light mode Zen presents a calm, daylight island. The body background is a sky-blue gradient that sweeps from #78cbff at the top down to the richer #09a1ff at the bottom. The welcome card has a solid white border, the Enter Zen button uses light blue (#c0deff) with black text and a hard black box-shadow, and the moon is a vivid yellow circle with a matching glow.

body {
    background: linear-gradient(#78cbff, #09a1ff);
    font-family: Arial, Helvetica, sans-serif;
}

No explicit color is set on body in light mode, so text inherits the browser default — readable dark tones for headings and tips without any extra declaration.

Dark mode palette

When prefers-color-scheme: dark is active, the entire scene is replaced with a muted, nocturnal palette. The sky becomes a deep purple-to-black gradient, text shifts to a muted grey, the welcome card border darkens, the trees dim significantly, and the sand nearly disappears into the darkness. The moon transforms from bright yellow into a subdued grey sphere.

@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(#1f0021, #000);
        color: rgb(100, 100, 100);
    }
    #group-tree { filter: brightness(0.4); }
    #moon {
        background-color: rgb(60, 60, 60);
        box-shadow: 0 0 12px rgb(60, 60, 60, 0.5);
    }
    #sand { filter: brightness(0.2); }
}

Each rule targets a specific element:

Selector	Effect
`body`	Deep purple (`#1f0021`) to black gradient background; muted grey (`rgb(100,100,100)`) text.
`#welcome-container`	Border changes to near-black `rgb(20,20,20)` so it blends with the dark sky.
`#w-enter`	Button background becomes medium grey; shadow uses `rgb(50,50,50)` instead of black.
`#group-tree`	`brightness(0.4)` dims the trees to 40% of their normal luminance.
`#moon`	Solid grey `rgb(60,60,60)` with a matching dim glow — no longer yellow.
`#sand`	`brightness(0.2)` drops the sand to 20% luminance, creating a near-black shore.

Light vs. Dark side by side

Light mode CSS
Dark mode CSS

body {
    background: linear-gradient(#78cbff, #09a1ff);
}

#welcome-container {
    border: 4px solid white;
}

#w-enter {
    background-color: #c0deff;
    color: black;
    border: 2px solid black;
    box-shadow: 4px 4px 0 black;
}

#moon {
    background-color: yellow;
    box-shadow: 0 0 12px rgb(255, 255, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(#1f0021, #000);
        color: rgb(100, 100, 100);
    }

    #welcome-container {
        border: 4px solid rgb(20, 20, 20);
    }

    #w-enter {
        background-color: rgb(100, 100, 100);
        color: black;
        border: 2px solid rgb(20, 20, 20);
        box-shadow: 4px 4px 0 rgb(50, 50, 50);
    }

    #moon {
        background-color: rgb(60, 60, 60);
        box-shadow: 0 0 12px rgb(60, 60, 60, 0.5);
    }

    #group-tree { filter: brightness(0.4); }
    #sand { filter: brightness(0.2); }
}

Theme color meta tag

index.html includes three meta tags that extend theme awareness beyond the page content into the browser chrome itself:

<meta name="theme-color" content="#09a1ff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1f0021" media="(prefers-color-scheme: dark)">
<meta name="color-scheme" content="light dark">

theme-color (light) — sets the browser toolbar and address bar to #09a1ff (the bottom of the sky gradient) on mobile browsers that support the tag when the OS is in light mode.
theme-color (dark) — sets the browser chrome to #1f0021 (the deep purple top of the dark gradient) when the OS is in dark mode.
color-scheme: light dark — tells the browser that the page explicitly supports both schemes, which enables the browser’s own built-in UI elements (scrollbars, form controls, etc.) to adopt the correct system style. This tag is particularly important on iOS Safari.

The theme-color meta tag is supported in Chrome for Android and Safari on iOS 15+. On desktop browsers it has no visible effect, but it does not cause any harm.

How to switch

Zen reads your OS-level appearance setting automatically. There is no in-app toggle. To change the theme, update your system appearance:

macOS — System Settings → Appearance → select Light, Dark, or Auto.
Windows — Settings → Personalization → Colors → choose Light or Dark under Choose your mode.
iOS — Settings → Display & Brightness → select Light or Dark.
Android — Settings → Display → Dark theme (toggle on or off).

Zen picks up the change instantly — no page reload is needed. The browser re-evaluates the prefers-color-scheme media query in real time and the CSS transitions apply immediately.

If you have your OS set to Auto (automatic light/dark based on time of day), Zen will shift themes at the same time your system does — you may notice the island transition from a bright sky-blue daytime scene to a dark purple night scene as the sun sets.

Overview

Using Zen

Project

Zen's Automatic Dark Mode: How It Adapts

Light mode palette

Dark mode palette

Light vs. Dark side by side

Theme color meta tag

How to switch

Build docs developers (and LLMs) love

Overview

Using Zen

Project

Documentation Index

​Light mode palette

​Dark mode palette

​Light vs. Dark side by side

​Theme color meta tag

​How to switch

Build docs developers (and LLMs) love

Light mode palette

Dark mode palette

Light vs. Dark side by side

Theme color meta tag

How to switch