Dark Mode and visual comfort

1) Why a dark theme

Eye comfort in low light, less glare and "light flashes."

Energy: Dark screens spend less battery on OLED/AMOLED.
Focus on data: Focus on content, not background.
User expectations: the system flag 'prefers-color-scheme' is the de facto standard.

2) Principles

1. Dark gray background> pure black for UI surfaces (better readability and gradation).
2. Contrast in content: not "white in black," but soft shades for long texts.
3. Careful "luminosity": backlights/accents are muffled, but distinguishable.
4. Shadow ≠ depth: we work with light/blurred shadow, not sharp contrast.
5. Availability: WCAG AA (minimum), visible focus and understandable states.

6. System settings are primary: auto-switching and "reduced movement."

3) Palette and tokens (example)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• Accents in dark mode are + 8-12% lighter than in light mode.
• Use grayscale (4-5 steps), avoiding absolute # 000 for large areas (exception - AMOLED mode).

4) Text and readability

Body text: light gray '# E6E8EB' to '# 0E1116' (contrast ~ 12:1).
Secondary text: '# A6AEB8'; hints - one step darker/more transparent.
Long reading: slightly warm shades (reduce "halo").
Links - accent + underline by default; color ≠ the only medium of meaning.

5) Surfaces, depth and glass

Elevations: `base` → `elev1` → `elev2`; each layer is lighter/warmer by 2-4%.
Shadows are soft, wide, with low opacity; avoid "glowing" strokes.
Translucent panels (blur) are moderately appropriate; contrast the text with the underlay.

The delimiters are semi-thin bounds' --bd-soft'or barely visible "heirs."

6) States and focus

Hover: + 2-3% lighter background; Active: − 2-3% (darker).
Focus: clear ring (e.g. 'outline: 2px solid # 6EA0FF; outline-offset: 2px; '), visible on accent buttons.
Disabled: reduce contrast carefully; do not fall below the readable level for text.

7) Buttons, forms and tables

Primary: background '--accent', text '# 0E1116'.
Secondary: background '--bg-elev1', border '--bd-strong', text '--fg-primary'.
Input fields: background '--bg-elev1', with focus - accent border; placeholder is duller, but readable.
Tables: zebra background is barely noticeable, row selection at hover is + 2-3% lighter.

8) Illustrations, logos and photos

Logos and pictograms - inversion versions on dark; avoid thin, light lines on saturated backgrounds.
Photo: Add a dark mask (40-60%) for contrasting headers on top.
Icons: single thickness, contour + filling - by condition, not "poisonous" colors.

9) Data visualization in a dark theme

The colors of the rows are of moderate saturation; at least 5 distinct tones.
Grids and axes - muted (alpha 20-30%), signatures - '--fg-muted'.
Annotations/incidents are vivid but readable; underline with shape/marker, not just color.
Blank data/lag - soft "fogs," not white fields.

10) Performance and battery

OLED really saves pure black (# 000) - use in AMOLED mode according to user option.
Avoid solid large glow/blur on weak GPUs.
Respect 'prefers-reduced-motion': Simplify animations/transitions.

11) Behavior and switching

The default is to follow 'prefers-color-scheme'.
Give the user an explicit switch (Light/Dark/System), keep the selection (cookie/localStorage).
When changing the theme - no flashes: pre-add theme class before rendering.

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) Availability (A11y)

Text contrast ≥ 4. 5:1 (regular), ≥ 3:1 (large).
Do not encode the state only in color: use the icon/pattern/signature.
Focus styles and keyboard navigation are mandatory.
VoiceOver/TalkBack: roles, labels, taba queuing.

13) Anti-patterns

Absolutely white text on an absolutely black background in large areas - "flickering" and fatigue.

Neon accents on dark - "light noise."

High contrast shadows (gray on black with hard border).
Transparent text in the photo without a mask.
Vanishing placeholder (alpha too low).

14) Examples of components

Button

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

Card

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) Test plan

Lighting: dark room/daylight/street evening.
Devices: OLED and IPS, mobile/desktop, different densities.
A11y: contrast checker, keyboard pass, readability of placeholders.
Perception: ab-test "eye fatigue" and input errors at night.
Performance: RUM metrics (INP/CLS) after including a dark theme; GPU load (blur/shadow effects).

16) Quality metrics

Contrast Violations/1k elements (target: → 0).

Complaint Rate on "too dark/bright."

Night Session Completion (behavioral metrics by session 22: 00-06: 00).
INP/CLS p75 in Dark Mode vs Light (no worse than basic).
Opt-in Dark Mode and retention of users who choose a theme.

17) Launch checklist

• Dark theme palette with 4-5 surface levels
• Contrast of text/icons/borders corresponds to WCAG AA
• Visible focus styles and states (hover/active/disabled)
• Logos/icons/photos adapted, masks in the photo added
• Graphs - muted grids, readable captions, non-poisonous rows
• Light/Dark/System switch, saving selection without "flash"
• Respect for 'prefers-color-scheme' and 'prefers-reduced-motion'
• RUM/perf-dashboard, regression alerts

18) Implementation plan (3 iterations)

Iteration 1 - Foundation (1-2 weeks)

Palette/tokens, base surfaces (base/elev1/elev2), text/borders, buttons/fields/tables, theme switch.

Iteration 2 - Granularity (3-4 weeks)

Graphs and illustrations in dark, masks in the photo, focus/states, animations taking into account reduced-motion, perf-audit.

Iteration 3 - Optimization (Continuous)

AMOLED mode as an option, fine-tuning contrasts, usability tests at night, Light vs Dark RUM comparison, regular brand/UX audits.

19) Mini-FAQ

Should I make a pure black background?
For UI, a deep dark gray is better; leave pure # 000 with the "AMOLED mode" option.

Do I need to increase the saturation of accents?

In dark - usually, on the contrary, slightly brighten and reduce saturation so as not to "glow."

What about banner images?
Add a dark background/mask, check the contrast of the text and logo.

Total

The dark theme is not a color inversion, but a separate design mode: a thoughtful palette, surface levels, readability, correct states, adapted graphics and media, and respect for system settings. Lean on tokens, control contrast and performance - and Dark Mode is a convenient, stable and beautiful tool for night and day users.