Q4 2025 Trend Report

Q4 2025 Trend Report: Dark Mode First Design

Published October 2025

Dark mode has evolved from an accessibility feature to a design-first approach. Leading apps and platforms now design for dark themes first, treating light mode as the adaptation rather than the default.

Technical Considerations

Designing for dark mode isn't simply inverting colors. Sophisticated dark palettes use layered grays to create depth, careful accent color selection to maintain vibrancy without eye strain, and elevated contrast ratios to ensure readability. The best dark mode implementations feel intentionally designed, not automatically generated.

True black (#000000) is rarely used in modern dark mode design. Instead, designers opt for dark grays (#0D0D0D to #1A1A1A) that provide better contrast for layered UI elements while being gentler on OLED displays. This nuanced approach creates visual hierarchy through subtle elevation rather than harsh borders.

Featured Palettes

#11111B

#1E1E2E

#313244

#6C7086

#CDD6F4

Catppuccin Mocha

Colors from the open-source Catppuccin Mocha theme (crust, base, surface0, overlay0, text).

#0D1117

#161B22

#21262D

#8B949E

#E6EDF3

GitHub Dark

Based on GitHub's dark theme canvas, border and text colors.

#121212

#1E1E1E

#2D2D2D

#999999

#F5F5F5

Material-Style Dark

Material Design-style dark surfaces built on the recommended #121212 base.

#1C1C1E

#2C2C2E

#3A3A3C

#98989D

#F2F2F7

iOS-Style Dark

Inspired by Apple's dark-mode gray scale (#1C1C1E, #2C2C2E, #3A3A3C). Note that iOS itself uses pure black as its base background.

#0F0F0F

#1A1A1A

#272727

#AAAAAA

#F1F1F1

Near-Black Neutral

Neutral near-black grays. (Only true black #000000 fully switches OLED pixels off; near-blacks save slightly less power but show elevation better.)

Accessibility in Dark Mode

Maintain Contrast Ratios: WCAG AA requires 4.5:1 for normal text, 3:1 for large text. Test all text against your dark backgrounds to ensure compliance.
Avoid Pure White Text: #FFFFFF on pure black creates harsh contrast and can cause eye strain. Use softer whites like #E6E6E6 or #F2F2F2.
Desaturate Accent Colors: Vibrant colors appear more intense against dark backgrounds. Reduce saturation by 15-20% compared to light mode equivalents.
Layer with Transparency: Semi-transparent white overlays (for example rgba(255,255,255,0.05)) are one way to create surface elevation; Material Design uses this approach.
Test in Low Light: Dark mode is often used in dimly lit environments. Ensure your palette remains readable without appearing too bright.

Implementation Best Practices

Design Dark First: Start with dark mode and adapt to light, not the other way around. This ensures dark mode feels intentional rather than automatic.

Use CSS Variables: Define separate color tokens for dark and light modes using CSS custom properties. This makes theme switching seamless and maintainable.

Respect System Preferences: Use prefers-color-scheme media query to automatically match user's OS theme preference. Always provide manual toggle as well.

Consider Image Treatment: Bright images can be jarring in dark mode. Apply subtle overlays or reduce brightness for better integration.

Shadows Work Differently: Traditional drop shadows disappear in dark mode. Use lighter shadows or glows to create elevation and depth.

Explore More Palettes

Browse more hand-picked palettes with HEX codes, ready to copy or export.

Browse Palette Library