Dark Mode & Theming Hub
Design complete light and dark theme systems with real-time previews, WCAG contrast validation, and production-ready exports for CSS, Tailwind v4, and JSON design tokens.
Interactive Theme Studio
Edit 11 semantic tokens per mode, preview both themes simultaneously, and validate accessibility before exporting.
Linear Flow
Theme preview card
This card demonstrates how your theme tokens render across surfaces, text, and accents.
Linear Flow
Theme preview card
This card demonstrates how your theme tokens render across surfaces, text, and accents.
WCAG Contrast Matrix Light Mode
All 10 pairs pass WCAG requirements (AA / AAA)
| Pair | Ratio | Grade | Preview |
|---|---|---|---|
| Text on Surface | 19.75:1 | AAA | Aa Preview |
| Text on Elevated | 18.76:1 | AAA | Aa Preview |
| Muted on Surface | 7.73:1 | AAA | Aa Preview |
| Primary on Surface | 6.29:1 | AA | Aa Preview |
| Primary FG on Primary | 6.29:1 | AA | Aa Preview |
| Success on Surface | 7.13:1 | AAA | Aa Preview |
| Warning on Surface | 7.31:1 | AAA | Aa Preview |
| Error on Surface | 8.31:1 | AAA | Aa Preview |
| Info on Surface | 6.70:1 | AA | Aa Preview |
| Border on Surface | 3.22:1 | AA | Aa Preview |
/* Linear Flow — CSS Custom Properties */
:root {
--color-surface: #FFFFFF;
--color-surface-elevated: #F8F9FC;
--color-text: #0A0A0F;
--color-text-muted: #52525B;
--color-primary: #4F46E5;
--color-primary-foreground: #FFFFFF;
--color-border: #8E8EA0;
--color-success: #166534;
--color-warning: #9A3412;
--color-error: #991B1B;
--color-info: #1D4ED8;
}
[data-theme="dark"],
.dark {
--color-surface: #111113;
--color-surface-elevated: #1A1A1F;
--color-text: #EEEEF0;
--color-text-muted: #A1A1AA;
--color-primary: #818CF8;
--color-primary-foreground: #0C0A1A;
--color-border: #636373;
--color-success: #34D399;
--color-warning: #FBBF24;
--color-error: #F87171;
--color-info: #60A5FA;
}Theme Token Editor
Editing light mode tokens.
Light Tokens
Curated Theme Presets Directory
Explore 30 production-ready light/dark theme pairs across SaaS, editorial, vibrant, monochrome, and cyberpunk styles. Click any to open in Studio.
Linear Flow
SaaS & Tech
#FFFFFF
#111113
Clean, purple-accented theme inspired by modern project management tools.
Vercel Edge
SaaS & Tech
#FFFFFF
#000000
Monochrome-forward with a stark white/black contrast and subtle blue accent.
Stripe Clarity
SaaS & Tech
#FFFFFF
#0A1B2E
Indigo accent on clean surfaces with warm gray muted tones.
GitHub Slate
SaaS & Tech
#FFFFFF
#0D1117
Cool blue-gray palette used by developer collaboration platforms.
Notion Soft
SaaS & Tech
#FFFFFF
#191919
Warm off-white surfaces with soft brown tones and a clean content-first vibe.
Terracotta Bloom
Warm & Organic
#FDF8F3
#1C1210
Earthy clay and warm cream palette evoking natural materials and craft.
Forest Sage
Warm & Organic
#F7F9F5
#0E170E
Deep greens and warm stone, inspired by mossy woodland clearings.
Amber Harvest
Warm & Organic
#FFFDF5
#1A1408
Golden amber tones with rich brown anchors, warm and inviting.
Blush Petal
Warm & Organic
#FFF7F8
#1A0D12
Soft pink and rose on creamy backgrounds, delicate and feminine.
Sand Dune
Warm & Organic
#FAF8F5
#171412
Neutral sandy tones with warm beige, perfect for understated elegance.
Navy & Gold
Editorial & Luxury
#FCFAF7
#08101D
Deep navy and burnished gold, classic editorial luxury.
Ink & Parchment
Editorial & Luxury
#F6F1E7
#171410
Classic charcoal on warm cream, inspired by letterpress and typographic tradition.
Champagne Noir
Editorial & Luxury
#FAF8F4
#0F0F10
Champagne-tinted light mode with deep noir dark mode, timelessly elegant.
Wine Cellar
Editorial & Luxury
#FBF7F6
#14080B
Deep burgundy and charcoal with refined warmth and depth.
Ivory Tower
Editorial & Luxury
#FFFDF7
#120E0A
Warm ivory surfaces with deep espresso text and subtle teal accent.
Electric Indigo
Vibrant & Bold
#FFFFFF
#0A0717
High-voltage indigo accent that demands attention on clean white.
Coral Pop
Vibrant & Bold
#FFFFFF
#140C08
Bright coral-orange on cool surfaces, energetic and friendly.
Emerald Spark
Vibrant & Bold
#FFFFFF
#041209
Rich emerald green on crisp white, conveying growth and vitality.
Ultraviolet
Vibrant & Bold
#FFFFFF
#0B041A
Deep violet primary with a high-contrast split between light and dark.
Hot Magenta
Vibrant & Bold
#FFFFFF
#12040E
Punchy magenta accent that brings boldness to any product UI.
Pure Grayscale
Monochrome & Minimal
#FFFFFF
#0A0A0A
Zero-chroma neutral scale for content-first designs with no color distraction.
Cool Zinc
Monochrome & Minimal
#FFFFFF
#09090B
Slightly blue-tinted zinc scale for a more refined monochrome feel.
Warm Stone
Monochrome & Minimal
#FAFAF9
#0C0A09
Warm gray stone tones for a cozy yet minimal aesthetic.
Near Black
Monochrome & Minimal
#F8F8F8
#050505
Almost-black surfaces in light mode too — a dark-first design system.
Paper Minimal
Monochrome & Minimal
#FFFFFF
#111111
Ultra-clean paper-white with the softest possible neutral hierarchy.
Neon Matrix
Cyber & Neon
#F0FFF4
#020C04
Electric green on pitch black, a terminal-grade cyberpunk aesthetic.
Cyberpunk Pink
Cyber & Neon
#FFF0F5
#0D0209
Hot pink neon on deep dark surfaces with a futuristic edge.
Arctic Blue
Cyber & Neon
#F0FAFF
#020F17
Ice-cold cyan on deep navy, crisp and futuristic like a HUD display.
Toxic Lime
Cyber & Neon
#F7FEE7
#0A1203
Acidic lime-green with dark charcoal base for maximum visual impact.
Plasma Amber
Cyber & Neon
#FFFBEB
#120900
Warm amber glow on deep space backgrounds, like vintage radar displays.