Home / Snippets / Typography /
Dark mode body text
Optimized body text settings for dark mode — reduced font-weight, increased letter-spacing, and tuned oklch lightness for comfortable reading.
Default
This body text uses pure white on a dark background with standard font-weight. The high contrast causes halation — letterforms appear to glow and blur, making long passages uncomfortable to read.
Optimized
This body text uses tuned oklch lightness, reduced font-weight, and wider letter-spacing. The result is softer contrast that reduces eye strain and keeps text crisp across extended reading sessions.
Quick implementation
:root {
--body-text: oklch(0.88 0.01 260);
--body-weight: 350;
--body-spacing: 0.01em;
--body-leading: 1.6;
}
@media (prefers-color-scheme: dark) {
body {
color: var(--body-text);
font-weight: var(--body-weight);
letter-spacing: var(--body-spacing);
line-height: var(--body-leading);
font-variation-settings: "wght" 350;
}
}
/* Light mode defaults */
@media (prefers-color-scheme: light) {
:root {
--body-text: oklch(0.2 0.02 260);
--body-weight: 400;
--body-spacing: 0;
--body-leading: 1.5;
}
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer specializing in typography and accessibility.
Goal: Optimized body text CSS for dark mode — no JavaScript.
Technical constraints:
- Use custom properties for body text color, weight, spacing, and line-height.
- Body text color must use oklch() with lightness ~0.88, not pure white.
- Reduce font-weight to 350 (or use font-variation-settings for variable fonts).
- Increase letter-spacing to 0.01em for dark backgrounds.
- Increase line-height to 1.6 for improved scanability.
- Wrap dark-mode rules in @media (prefers-color-scheme: dark).
Framework variant (pick one):
A) Vanilla CSS with custom properties and a prefers-color-scheme media query.
B) Tailwind v4 — use @custom-variant and theme tokens for dark-mode body text.
Edge cases to handle:
- Variable fonts: use font-variation-settings "wght" for precise weight control.
- Ensure sufficient WCAG contrast ratio (minimum 7:1 for AAA body text).
- Provide fallback font-weight for non-variable fonts (use 300 or 400).
- Account for both OLED (true black) and LCD (dark gray) backgrounds.
- Test against color-contrast() when browser support lands.
Return CSS.Why this matters in 2026
Dark mode is the default for most users and operating systems, yet body text is still routinely set to pure white. The halation effect — where bright text on a dark background appears to bleed outward — makes long-form reading uncomfortable. With oklch now supported everywhere, designers can precisely control perceptual lightness to find the sweet spot between readability and contrast compliance.
The logic
Pure white text (oklch(1 0 0)) on a dark background creates excessive luminance contrast that causes letterforms to visually thicken and blur — an optical illusion called halation. Dropping lightness to 0.88 in oklch reduces this effect while maintaining a WCAG AAA contrast ratio against typical dark backgrounds. The font-weight: 350 via font-variation-settings compensates for the perceptual weight gain that dark-mode rendering causes on most displays. Widening letter-spacing to 0.01em and bumping line-height to 1.6 further counteract the visual density, giving each glyph room to breathe.
Accessibility & performance
An oklch lightness of 0.88 against a background of oklch(0.13 0.02 260) produces a contrast ratio well above the WCAG AAA 7:1 threshold, so readability is never sacrificed for comfort. Custom properties make it trivial to adjust per-component — headings can use 0.93 lightness while body stays at 0.88. Because only color, font-weight, letter-spacing, and line-height change, there is zero runtime cost — no animations, no JavaScript, and the browser resolves everything at style-recalc time with no reflow penalty.