---
title: "No dark mode support (design/no-dark-mode)"
description: "design/no-dark-mode: Many users run their OS in dark mode; a bright page at night is jarring."
canonical: https://void-design.vercel.app/rules/design/no-dark-mode
lastModified: 2026-09-16
---

# No dark mode support

`design/no-dark-mode` · severity **info** · category Design · detected by `void design` and `void audit`

## Why it matters

Many users run their OS in dark mode; a bright page at night is jarring. Not required, but expected of polished sites.

## How to fix it

Define semantic color tokens for light and dark and switch with @media (prefers-color-scheme: dark) or a class set before paint.

## Example

```
@media (prefers-color-scheme: dark) { :root { --bg: oklch(0.16 0.01 270); --fg: oklch(0.95 0 0); } }
```

## More design rules

`void design` reports 19 rules in this category. Measured design heuristics from computed styles: font families, type scale, line length, palette and accent sprawl, spacing grid, radius sprawl, dark mode and the tells of generated UI.

- `gradient-text` Gradient-filled heading text — [design/gradient-text](https://void-design.vercel.app/rules/design/gradient-text)
- `purple-gradient` Purple/indigo gradient background — [design/purple-gradient](https://void-design.vercel.app/rules/design/purple-gradient)
- `emoji-icons` Emoji used as icons — [design/emoji-icons](https://void-design.vercel.app/rules/design/emoji-icons)
- `spacing-off-grid` Spacing values are off the 4px grid — [design/spacing-off-grid](https://void-design.vercel.app/rules/design/spacing-off-grid)
- `radius-sprawl` Too many different corner radii — [design/radius-sprawl](https://void-design.vercel.app/rules/design/radius-sprawl)
- `color-scheme-missing` color-scheme is not declared — [design/color-scheme-missing](https://void-design.vercel.app/rules/design/color-scheme-missing)
- `selection-unstyled` ::selection is not styled — [design/selection-unstyled](https://void-design.vercel.app/rules/design/selection-unstyled)
- `horizontal-overflow` Page scrolls horizontally at 375px — [design/horizontal-overflow](https://void-design.vercel.app/rules/design/horizontal-overflow)

Detected by `void design` and `void audit`. Explain it in a terminal: `void rules design/no-dark-mode`