UI / Themes / Dark

Dark

Deep navy, calm at night. Easier on eyes than pure black.

data-theme="dark"
Launch plan
Launch post: AI workspaces thesisActive
Newsletter issue: AI workspaces primerDrafted
Founder outreach: 50 indie-builder DMsQueued
3 members · 17 rows

Why this theme

Dark is the night theme. The canvas sits at #0F1722, a deep navy with the same blue family as Light. We deliberately picked navy over neutral grey for this slot — Graphite below covers the greyscale story; Dark is for the much larger group of users who want a low-light theme that still feels like Dock, with the brand's blue family running through it.

The text picks up #F7F9FB, which is Light's canvas, mirrored. We pulled it 8 percent below pure white because pure white on a dark canvas causes the text-glow you've felt on every poorly-tuned dark mode at 11pm. The drop is invisible in isolation but the eye thanks you after an hour.

Surfaces lift in 4-percent steps: canvas #0F1722 → surface #1A2332 → muted #1E2A3A. Hierarchy comes from elevation, not from desaturation. The whole palette stays inside the same blue family the Light theme lives in, so flipping themes is a brightness change, not a personality change.

When to use

Working at night, working in dim rooms, working with ambient light low enough that a Light theme starts to glow. Default for users who prefer dark mode universally.

When not to use

When you want chrome to recede so agent colors are the only saturated thing on screen (use Graphite). When you're presenting on a projector and need higher contrast.

Color spec

Every CSS variable, what it's set to in this theme, and what we use it for.

--background#0F1722
Deep navy canvas. Same blue family as Light, dropped 90% in luminance.
--surface#1A2332
Cards + popovers. 4% lifted from canvas so they read as elevated.
--surface-muted#1E2A3A
Hover + selected rows. One more 4% step up from surface.
--border-color#2D3A4E
Edge color, halfway between surface and the top of the family.
--text-primary#F7F9FB
Light's canvas, mirrored. 8% off pure white to stop text-glow.
--text-secondary#C8DCEE
The blue-tinted secondary, lighter than primary.
--accent#C8DCEE
Primary buttons get a light blue, paired with --btn-primary-text deep navy.
← All themes
Components·Theme · glossary
UI home →