What is dark mode UI design?

Dark mode UI design uses dark backgrounds (typically #0a0a0a to #1a1a1a) with light text and carefully chosen accent colors. Unlike simply inverting a light theme, proper dark mode requires adjusting color saturation, using surface elevation through subtle lightness differences, and ensuring all text meets WCAG AA contrast ratios (4.5:1 minimum).

How to implement dark mode in Tailwind CSS?

Tailwind supports dark mode via the 'dark:' variant. Set darkMode: 'class' in tailwind.config to toggle with a class, or 'media' for system preference. Use CSS custom properties (--background, --foreground) to define theme colors, then reference them in Tailwind config. Toggle by adding/removing the 'dark' class on the html element.

What are the common mistakes in dark mode design?

Common mistakes: using pure black (#000) backgrounds (causes halation on OLED), insufficient contrast between surface layers, using the same saturation as light mode (colors look too intense on dark backgrounds), white text at full opacity (use 87% opacity for body text), and not adjusting shadows (use lighter, more diffused shadows or subtle borders instead).

Should I design dark mode first or light mode first?

For developer tools, media apps, and creative platforms, consider dark-first design. For business, e-commerce, and content-heavy sites, light-first is usually better. The key is to design both simultaneously using CSS custom properties / design tokens, so neither mode is an afterthought. StyleKit provides dual-mode tokens for all styles.

What colors work best for dark mode backgrounds?

Avoid pure black (#000000) for large backgrounds — it causes halation on OLED screens and makes elevation impossible. Use a near-black range instead: #0a0a0a to #121212 for the base layer, then raise surfaces in steps (#181818, #1e1e1e, #242424). If you want warmth, add 2-4% of a hue: a blue-tinted dark like #0b0d12 feels cooler, a warm dark like #12100e feels softer. Reserve saturated colors for accents only, and desaturate them 15-20% compared to light mode.

How do I make dark mode accessible (WCAG)?

Three rules cover most failures: body text needs 4.5:1 contrast (large text 3:1) against its surface — on a #121212 background that means at least #a7a7a7; never use pure white at 100% opacity for long body text, 87% opacity (#ffffffde) reduces glare while staying compliant; and do not rely on color alone for states — pair error red with an icon or text label, since 8% of men have some color vision deficiency. Test with the prefers-contrast media query and provide a high-contrast variant if your accent gets close to the limit.

StyleKit · Dark interface spec & prompts

Dark Mode UI Prompts

Dark mode design is more than inverting colors. It requires careful attention to surface elevation (using lighter shades of dark for raised elements), reduced saturation for colored elements, proper contrast ratios (minimum 4.5:1 for text), and strategic use of accent colors. A well-executed dark mode reduces eye strain in low-light environments while maintaining visual hierarchy and readability.

8 prompts5 surfacesWCAG verifiedEN / ZH

Elevation: lightness is altitude

Light UIs express elevation with shadows. On dark canvases shadows are nearly invisible, so lightness does the job — the closer a surface sits to the user, the lighter it gets. Select a layer to read its value and role.

Spec 02card

Card

#131316

Resting cards and panels. One step lighter than base, separated by a 1px border, not shadow.

Rule: each step is ~3-4% lighter than the one below, separated by a 1px low-contrast border. Five layers cover any interface.

The four rules

Write these four into any prompt and AI-generated dark UIs jump a quality tier. Each rule ships with its proof.

Never use pure black

#000000 smears on OLED panels and erases every shadow and elevation cue. Start at #09090b so the interface keeps room below itself.

Lighter, less saturated color

Saturated light-theme colors vibrate against dark canvases. Shift text and icons one step lighter — blue-500 becomes blue-400 — and keep 500 for solid fills only.

Dim the white, keep three tiers

Pure #fff glares on dark. Use #fafafa for primary, #d4d4d8 for body, #a1a1aa for captions — three tiers carry an entire page, all clearing AAA.

One accent, spent carefully

A dark interface is 90% grayscale. The accent goes to the primary action, the active state, and one key metric. Color everywhere is emphasis nowhere.

Verified contrast

Every ratio below is computed with the WCAG relative-luminance formula. Paste the table into a prompt and the AI has no excuse for unreadable text.

Aa	FG / BG	Ratio	WCAG	Use
Aa	#fafafa / #09090b	19.06	AAA	Primary text on base
Aa	#d4d4d8 / #131316	12.55	AAA	Body text on panels
Aa	#60a5fa / #09090b	7.83	AAA	Accent text, links
Aa	#a1a1aa / #09090b	7.76	AAA	Captions on base
Aa	#a1a1aa / #131316	7.24	AAA	Captions on panels
Aa	#3b82f6 / #09090b	5.41	AA	Accent fills, icons
Aa	#71717a / #09090b	4.12	AA-LG	Large dim labels only, 18px+
Aa	#52525b / #09090b	2.57	FAIL	Too dim — never ship this

The eight prompts

Each one carries concrete hex values, elevation steps, and contrast constraints — dashboards, SaaS, mobile, auth, pricing. Expand to read, copy, and paste straight into ChatGPT, Claude, Cursor, or v0.

01Dark Mode DashboardCHATGPT / CLAUDE

Design a dark mode analytics dashboard. Background colors: #0a0a0a for base, #141414 for cards, #1e1e1e for elevated elements. Text: #f5f5f5 for primary, #a3a3a3 for secondary. Use a single accent color (blue #3b82f6) for interactive elements and data highlights. Cards should have subtle 1px borders in #262626. Charts should use the accent color with varying opacity for data series. Ensure all text meets WCAG AA contrast standards.

02Dark Theme App for v0V0

03Dark Mode for CursorCURSOR

04Dark Mode for ClaudeCLAUDE

05Dark Mode SaaS Landing PageCHATGPT / CLAUDE

06Dark Mode Mobile App for ChatGPTCHATGPT / CLAUDE

07Dark Mode Login Page for ClaudeCLAUDE

08Dark Mode Pricing Page for CursorCURSOR

Do and don't

Straight from StyleKit's dark-mode style definition. When a generation drifts, paste the violated line back to the AI.

Use dark backgrounds bg-slate-900, bg-gray-900, bg-[#0f172a]
Cards use slightly lighter backgrounds bg-slate-800/50, brighten on hover hover:bg-slate-800
Borders use low contrast border-slate-700, illuminate on hover hover:border-slate-500
Text uses text-slate-100 primary, text-slate-400 secondary, secondary text brightens on group-hover group-hover:text-slate-300
Highlight colors maintain high saturation blue-500, green-500
Buttons use inner glow shadow-[inset_0_1px_0_rgba(255,255,255,0.15)] to simulate dark light source
Buttons must have active:scale-[0.98] tactile press confirmation
All interactive elements must have focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900
Card hover with hover:-translate-y-0.5 + dark outer shadow for elevation
Use rounded-lg or rounded-xl corners

Don't

Do not use pure white text text-white (too harsh)
Do not use high-contrast borders
Do not use pure black background #000000 (too dull)
Do not use dark text on dark backgrounds
Do not overuse highlight colors
Do not use light-colored shadows (light shadows cannot convey depth on dark backgrounds)
Do not omit active:scale-[0.98] on buttons (buttons need tactile confirmation, otherwise they feel like decoration)
Do not use focus:ring without focus:ring-offset-slate-900 (focus ring must separate from element to be visible on dark backgrounds)

References

Runnable dark templates and related styles — every style page ships full tokens, component recipes, and exportable AI rules.

Starter templates

Related dark styles

Questions, answered

Need a different direction? Browse all 146 design styles, or head back to the prompt library.

146 styles All prompts

Dark Mode UI Prompts

8 prompts5 surfacesWCAG verifiedEN / ZH

FG / BG

Ratio

WCAG

#fafafa / #09090b

19.06

AAA

#d4d4d8 / #131316

12.55

AAA

#60a5fa / #09090b

7.83

AAA

#a1a1aa / #09090b

7.76

AAA

#a1a1aa / #131316

7.24

AAA

#3b82f6 / #09090b

5.41

#71717a / #09090b

4.12

AA-LG

#52525b / #09090b

2.57

FAIL