Simplest possible CSS dark mode

The following three lines are all that is required to enable responsive default dark mode support.1

body {
  color-scheme: light dark; /* tells the browse that the page supports both light and dark modes */
  color: CanvasText; /* sets the default text color to the browser's responsive default */
  background-color: Canvas; /* sets the default background color to the browser's responsive default */
}

Footnotes:

Author: Roger Farrell

Created: 2025-09-18 Thu 14:13

Validate