Dark Mode First Prompting: Contrast-safe, battery-friendly, beautiful
Designing dark-mode-first isn’t just a stylistic choice—it can improve readability in low light, reduce eye strain when applied well, and even conserve power on OLED screens. Empirical research found dark interfaces can save 3–9% energy at typical brightness, with larger gains at maximum brightness on OLED displays. See the Purdue University study and analysis for details, and Google’s developer findings on OLED behavior.
Below is a practical playbook for dark-mode-first generation, complete with AI prompts, quick auditing code, and testing tips. For inspiration, see a premium dark-mode prompt example and expressive design styles:
The dark-mode-first playbook
Color space choices
Start with perceptually uniform color spaces to preserve contrast as hues shift. oklch() (and oklab()) provide more predictable lightness than HSL for dark themes and are increasingly supported in modern browsers. If you need broader compatibility, consider lch() with a build-time fallback. Build tonal palettes (e.g., 0–100 scales) and select steps explicitly for surfaces, borders, and text rather than inverting light-mode colors.
Accessible contrast
Follow WCAG 2.2 contrast minimums: 4.5:1 for body text, 3:1 for large text (≥24 px regular or ≥18.66 px bold). For future-ready design, evaluate the APCA model, which better reflects perception in dark contexts; many teams target Lc ≥ 60 for body text and Lc ≥ 45 for larger/bolder text. Always test focus states, disabled states, charts, and overlays.
Layered elevation
In dark UIs, elevation is conveyed with lighter overlays and subtle borders more than deep shadows. Use elevation tokens that progressively increase surface lightness (e.g., +2–8 L in OKLCH) and pair them with low-opacity, color-aware shadows. Maintain clear separations for drawers, modals, and sticky bars while avoiding “glow blur” that reduces legibility.
System preference detection
Respect user settings and offer an explicit toggle that persists per site. Use prefers-color-scheme for auto detection and the color-scheme property to align form controls and scrollbars.
/* CSS */
@media (prefers-color-scheme: dark) {
:root { color-scheme: dark; }
}
/******** Toggle with a class ********/
:root { color-scheme: light dark; }
:root.theme-dark { color-scheme: dark; }
:root.theme-light { color-scheme: light; }
Learn more at MDN and MDN color-scheme.
Base AI prompt and 3 variants
Use and adapt the following prompts in your favorite AI coding tool. Explore more examples in the prompt library and build your own in the prompt builder.
Base prompt (dark‑mode‑first website)
Generate a dark-mode-first responsive website using semantic HTML and modern CSS.
Requirements:
- Color: Use OKLCH tokens with a neutral base (text L≈0.94, surface L≈0.14, elevated surfaces +2–8 L).
- Contrast: Ensure WCAG AA (4.5:1 body, 3:1 large). Include focus-visible outlines ≥3:1.
- Elevation: Subtle borders and overlays for cards, modals, nav; avoid heavy shadows.
- System: Honor prefers-color-scheme with a JS toggle that stores choice in localStorage.
- Components: Header, hero, feature grid, pricing, CTA, and accessible footer; keyboard-friendly nav.
- Performance: Inline critical CSS; lazy-load noncritical assets; prefer-reduced-motion support.
- Docs: Comment tokens and include a short README on palette and contrast decisions.
Output: index.html, styles.css, script.js.
Variant 1: Luxury app (premium feel)
Adapt the base prompt for a luxury app UI:
- Palette: Near-black surfaces, warm off-whites for text, subtle gold accents (OKLCH chroma low).
- Typography: High-end serif display + geometric sans for body; letter-spacing tuned for glare.
- Micro-interactions: Reduced motion by default, elegant focus rings; glassy elevated cards.
- Reference aesthetic: Bold, expressive hero. See category ideas: https://prowebsitetemplates.com/categories/expressive-bold
Variant 2: Fintech dashboard
Adapt the base prompt for a fintech analytics dashboard:
- Data density: Tables, KPIs, spark-lines, candlestick chart; accessible color palettes.
- Contrast: 4.5:1 for text; chart lines and bars ≥3:1 against plotting area; gridlines de-emphasized.
- States: Clear gains/losses with dual encoding (color + icons), screen-reader labels on deltas.
- Security: Mask sensitive values with a toggle; focus management for modals and toasts.
Variant 3: Creative portfolio
Adapt the base prompt for a creative portfolio:
- Layout: Responsive bento grid, immersive media, and accessible carousel controls.
- Palette: High-chroma accents on deep surfaces; ensure text-on-media overlays meet 4.5:1.
- Performance: Preload hero media, responsive images (srcset/sizes), and lazy-load galleries.
- Add a “View in light” toggle and store preference.
For more ready-to-use prompts, browse Dark Mode Premium App and the categories index.
Quick contrast audit script
This lightweight script scans text nodes and logs any elements below 4.5:1 contrast (WCAG). It’s a starting point—augment with APCA in your build for more accurate dark-mode perception.
<script>
(function() {
function lum(c){ c=c/255; return c<=0.03928? c/12.92: Math.pow((c+0.055)/1.055,2.4); }
function relLum(rgb){ return 0.2126*lum(rgb[0]) + 0.7152*lum(rgb[1]) + 0.0722*lum(rgb[2]); }
function parse(rgb){ return rgb.match(/\d+/g).slice(0,3).map(Number); }
function contrast(fg,bg){ const L1=relLum(parse(fg))+0.05, L2=relLum(parse(bg))+0.05; return (Math.max(L1,L2)/Math.min(L1,L2)).toFixed(2); }
const nodes = Array.from(document.querySelectorAll("*:not(script):not(style)"));
nodes.forEach(el => {
const s = getComputedStyle(el);
if(parseFloat(s.fontSize) < 9 || s.visibility !== 'visible' || s.display === 'none') return;
const text = (el.textContent||'').trim();
if(!text) return;
const cr = parseFloat(contrast(s.color, s.backgroundColor));
if(cr < 4.5) console.warn('Low contrast', cr, el);
});
})();
</script>
Cross-check with
APCA tools and your design tokens pipeline.
Glare testing tips
- Test in bright ambient light and direct sun; raise screen brightness to 100% and verify body text, key icons, and chart lines remain legible.
- Add thin, low-contrast strokes to light text on very dark surfaces to improve edge definition without halos.
- Increase letter-spacing and line-height slightly for small text to reduce halation.
- Prefer mid-dark backgrounds (e.g., L≈0.12–0.18 OKLCH) over pure black for better contrast balance.
- Evaluate both OLED and LCD devices; dark gray often reads better than #000 on LCD in glare.
- Follow platform guidance (e.g., Apple HIG; Material 3) and UX research on dark mode legibility.
Research overview: Nielsen Norman Group on Dark Mode
Keyword deep-dives
Dark mode
Dark mode prioritizes low-luminance surfaces with high-contrast text and accents. It reduces glare in dim environments and, on OLED screens, can lower power draw because black pixels emit less light. Implement it as a first-class theme with explicit tokens and an accessible toggle rather than a color inversion of light mode.
Accessibility
Accessibility spans contrast, focus, motion sensitivity, and color-vision deficiency. Approximately 8% of men and 0.5% of women have some form of color blindness, so dual-encode meaning (color plus icons or text), ensure focus-visible states, and respect prefers-reduced-motion. Source: Colour Blind Awareness.
Contrast ratios
Target at least 4.5:1 for body text and 3:1 for large text per WCAG 2.2, and consider APCA’s Lc targets (≈60 for body, ≈45 for larger/bolder text) for dark contexts. Validate all states (hover, focus, disabled), links, and graphical objects (icons, chart elements).
Design systems
Define mode-aware design tokens for color, elevation, borders, and shadows, and generate palettes in OKLCH/LCH. Document usage, contrast thresholds, and component states. Consider the community design token format for portability across codebases. Reference: Design Tokens Community Group.
AI prompts
Good prompts specify color spaces, contrast thresholds, elevation rules, motion preferences, and performance constraints. Start from the base prompt above, then tailor for your domain. Browse more dark-mode examples in the Prompts and How it works sections.
Fintech UI
Fintech interfaces are data-dense and must uphold accuracy, status clarity, and accessible data visualizations. Use high-contrast labels, dual-encoded gains/losses, and keyboard navigation for tables and filters. See data-viz accessibility guidance in the IBM Carbon Design System.
UX
Offer a persistent theme toggle, avoid pure-white text on pure-black backgrounds, and support prefers-reduced-motion. Dark mode can help comfort in low light but may reduce readability for some users; give users control and verify tasks in both themes. Reference: NN/g dark mode guidance.
Performance
Improve perceived and actual performance with critical CSS, deferred noncritical scripts, responsive images, and color-scheme-aware UA rendering. Respect system motion preferences to reduce GPU overhead. On OLED, darker pixels can reduce energy use; measure with real devices. Learn more about prefers-reduced-motion and color-scheme.
Put it into practice
Start with a proven template, then customize. Explore the dark-mode collection in Categories, try the featured prompts, and assemble your own in the Prompt Builder. For step-by-step guidance, see How it works.