What should you know when designing dark mode (dark theme) in a product UI?

Dark mode is not a single filter on light artboards. You lower the overall background luminance, use off-white text instead of full white on full black in large areas for comfort, and re-check every border and muted label for contrast. Elevation: shadows are weaker on dark; many systems use a stack of slightly brighter surfaces and subtle hairline borders. Logos, charts, and third-party media may need alternate assets. Implement with semantic tokens (background.default, text.secondary) so one component maps to different values in each theme. Offer system preference via `prefers-color-scheme` and often a three-way app toggle: light, dark, system. Test in a dim room and on OLED where black smear can appear in motion, depending on content.

@media (prefers-color-scheme: dark) {
  --bg-elev-1: #1c1c1c;
  --text: #e8e8e8;
  --border: #333;
}

Start simple: try this concept in a tiny project before moving to advanced tools.