Dark Backgrounds & Dark Theme Design

Why Dark Themes?

Dark Themes Are a Preference, Not a Default

Comfort with dark themes varies from person to person: some readers find light text on a dark background harder to read for long passages, especially in bright rooms. The safest approach is to follow the user's system setting and offer a manual toggle, rather than assuming everyone wants dark.

Dark Theme Color Theory

Understanding color in dark themes is crucial for creating visually appealing and functional designs.

The Dark Background Spectrum

Depth & Elevation in Dark Themes

/* Dark theme elevation system */
:root {
    --surface-0: #000000;  /* Base level */
    --surface-1: #0d0d0d;  /* Cards, sheets */
    --surface-2: #1a1a1a;  /* App bars */
    --surface-3: #242424;  /* Dialogs, popups */
    --surface-4: #2d2d2d;  /* Navigation drawers */
}

/* Apply elevation */
.card {
    background-color: var(--surface-1);
    /* Subtle shadow for depth */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.dialog {
    background-color: var(--surface-3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
}

Professional Dark Color Palettes

1. Midnight Blue Dark Theme

/* Midnight Blue Theme */
--bg-primary: #0a0f1b;
--bg-secondary: #141b2d;
--bg-tertiary: #1f2940;
--accent: #4a9eff;
--accent-light: #64b5f6;

2. True Black OLED Theme

/* OLED Black Theme */
--bg-primary: #000000;
--bg-secondary: #0a0a0a;
--bg-tertiary: #1a1a1a;
--accent-green: #00ff88;
--accent-pink: #ff0066;

3. Charcoal Professional Theme

/* Charcoal Theme */
--bg-primary: #1c1c1c;
--bg-secondary: #2d2d2d;
--bg-tertiary: #3e3e3e;
--accent-blue: #0066cc;
--accent-turquoise: #40e0d0;

Contrast & Readability in Dark Themes

The targets below summarize what passes WCAG, but a working list of pairings, common failures, and how to verify them on photo-backed surfaces lives on the accessible dark backgrounds guide. Use this section for the quick numbers and that page when you are auditing a real design.

Text Contrast Guidelines

On pure black these blend to roughly #dedede (15.6:1), #999999 (7.4:1) and #616161 (3.4:1). Disabled text is exempt from WCAG contrast requirements, but 3.4:1 would fail AA for ordinary text. WCAG AA requires 4.5:1 for normal text and 3:1 for large text and UI components; AAA requires 7:1 and 4.5:1. Test your own pairs with the contrast checker.

Color Contrast Requirements

/* WCAG compliant dark theme colors */
.dark-theme {
    /* Backgrounds */
    --bg-primary: #121212;     /* Base background */
    
    /* Text colors with proper contrast */
    --text-primary: #ffffff;   /* 18.7:1 contrast ratio on #121212 */
    --text-secondary: #b3b3b3; /* 8.9:1 contrast ratio */
    --text-disabled: #666666;  /* 3.3:1 - disabled text only */

    /* Interactive elements */
    --link-color: #4a9eff;     /* 6.8:1 contrast ratio */
    --link-hover: #6bb6ff;     /* 8.7:1 contrast ratio */

    /* Status colors */
    --success: #4caf50;        /* 6.7:1 contrast ratio */
    --warning: #ffb74d;        /* 10.8:1 contrast ratio */
    --error: #ff5252;          /* 5.9:1 contrast ratio */
}

Theme Switching Implementation

The implementation below uses a data-theme attribute, but most sites can lean on the prefers-color-scheme media query first and only add manual override on top. Our dark mode backgrounds with prefers-color-scheme page walks through both patterns, including how to avoid the flash of wrong theme on first paint.

Complete Theme Switcher

/* CSS Setup */
:root {
    --transition-speed: 0.3s;
}

[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --text-primary: #000000;
}

[data-theme="dark"] {
    --bg-primary: #000000;
    --bg-secondary: #121212;
    --text-primary: #ffffff;
}

/* Smooth transitions */
body,
.card,
.button {
    transition: 
        background-color var(--transition-speed) ease,
        color var(--transition-speed) ease,
        border-color var(--transition-speed) ease;
}

/* Theme toggle button */
.theme-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    border: 2px solid var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

/* JavaScript Implementation */
class ThemeManager {
    constructor() {
        this.theme = localStorage.getItem('theme') ||
            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
        this.init();
    }
    
    init() {
        // Apply saved theme
        document.documentElement.setAttribute('data-theme', this.theme);
        
        // Listen for system changes
        window.matchMedia('(prefers-color-scheme: dark)')
            .addEventListener('change', e => {
                // Only follow the system if the user hasn't chosen
                if (!localStorage.getItem('theme')) {
                    this.theme = e.matches ? 'dark' : 'light';
                    document.documentElement.setAttribute('data-theme', this.theme);
                }
            });
    }
    
    toggle() {
        this.setTheme(this.theme === 'light' ? 'dark' : 'light');
    }
    
    setTheme(theme) {
        this.theme = theme;
        document.documentElement.setAttribute('data-theme', theme);
        localStorage.setItem('theme', theme);
        
        // Dispatch custom event
        window.dispatchEvent(new CustomEvent('themechange', {
            detail: { theme }
        }));
    }
}

const themeManager = new ThemeManager();

// Toggle button handler
document.querySelector('.theme-toggle')
    .addEventListener('click', () => themeManager.toggle());

Dark Theme Best Practices

Testing Checklist