Dark mode implementation best practices?

Dùng CSS custom properties cho tất cả màu — khai báo --bg: #fff; --text: #1a1a1a ở :root, override trong dark mode.

Hai cách detect:
- @media (prefers-color-scheme: dark) — tự động theo system setting
- Class-based toggle (.dark trên <html>) — cho user tự chọn + lưu vào localStorage

Color palette: dùng oklch để perceived brightness đồng đều, kiểm tra contrast WCAG AA (4.5:1). Tránh pure black (#000) cho background — dùng dark gray (#1a1a1a) để giảm mỏi mắt.

The most important step is using CSS custom properties for all colors instead of hardcoding — declare --bg: #fff; --text: #1a1a1a in :root and override them in dark mode.

Two detection approaches: @media (prefers-color-scheme: dark) automatically follows the system setting, or class-based toggle (adding .dark to <html>) lets users choose and save preference in localStorage.
When choosing dark mode colors, use the oklch color space to auto-generate palettes with consistent perceived brightness, and always check contrast ratios meet WCAG AA (4.5:1 for normal text).
Avoid pure black (#000) for backgrounds — it strains the eyes; use dark gray (#1a1a1a or similar) instead.

Xem toàn bộ CSS cùng filter theo level & chủ đề con.

Mở danh sách CSS

Dùng CSS custom properties cho tất cả màu — khai báo --bg: #fff; --text: #1a1a1a ở :root, override trong dark mode.

Hai cách detect:
- @media (prefers-color-scheme: dark) — tự động theo system setting
- Class-based toggle (.dark trên <html>) — cho user tự chọn + lưu vào localStorage

The most important step is using CSS custom properties for all colors instead of hardcoding — declare --bg: #fff; --text: #1a1a1a in :root and override them in dark mode.

Two detection approaches: @media (prefers-color-scheme: dark) automatically follows the system setting, or class-based toggle (adding .dark to <html>) lets users choose and save preference in localStorage.
When choosing dark mode colors, use the oklch color space to auto-generate palettes with consistent perceived brightness, and always check contrast ratios meet WCAG AA (4.5:1 for normal text).
Avoid pure black (#000) for backgrounds — it strains the eyes; use dark gray (#1a1a1a or similar) instead.