58 lines
1.4 KiB
Markdown
58 lines
1.4 KiB
Markdown
---
|
|
title: Dark Mode Design Patterns
|
|
description: Best practices for dark-themed premium websites.
|
|
tags: [design, dark-mode, accessibility, patterns]
|
|
---
|
|
|
|
# Dark Mode Design Patterns
|
|
|
|
## Core Principles
|
|
|
|
### 1. Not Pure Black
|
|
- Background: `#0a0a0a` or `#111111` (not `#000000`)
|
|
- Pure black causes eye strain on OLED
|
|
- Subtle gradient: `#0a0a0a` → `#0f0f0f`
|
|
|
|
### 2. Surface Hierarchy
|
|
- Layer 1 (bg): `#0a0a0a`
|
|
- Layer 2 (cards): `#111111`
|
|
- Layer 3 (elevated): `#1a1a1a`
|
|
- Elevation via lighter shade, not shadow
|
|
|
|
### 3. Text Colors
|
|
- Primary: `#f5f5f5` (90% white)
|
|
- Secondary: `#a0a0a0` (60% white)
|
|
- Muted: `#666666` (40% white)
|
|
- Never use pure `#ffffff` (too harsh)
|
|
|
|
### 4. Border Treatment
|
|
- Use `rgba(255,255,255,0.08)` for subtle borders
|
|
- Hover states: `rgba(255,255,255,0.15)`
|
|
- Focus states: `accent-color` ring
|
|
|
|
### 5. Accent Colors
|
|
- Lighter variants work better on dark
|
|
- `#6366f1` → `#818cf8` for hover
|
|
- Ensure 3:1 contrast ratio for accents
|
|
|
|
## CSS Implementation
|
|
```css
|
|
:root {
|
|
--bg-primary: #0a0a0a;
|
|
--bg-surface: #111111;
|
|
--bg-elevated: #1a1a1a;
|
|
--text-primary: #f5f5f5;
|
|
--text-secondary: #a0a0a0;
|
|
--text-muted: #666666;
|
|
--border-subtle: rgba(255,255,255,0.08);
|
|
--accent-primary: #6366f1;
|
|
--accent-hover: #818cf8;
|
|
}
|
|
```
|
|
|
|
## Anti-Patterns
|
|
- Never use pure `#000000` background
|
|
- Never use pure `#ffffff` text
|
|
- Never rely on shadows for elevation in dark mode
|
|
- Never skip contrast checking (WCAG AA minimum)
|