Skip to content
Ayc0

Light/dark mode: the lazy way

1 min read • Posted on May 29, 2021 (Edited on Jan 16, 2023)

Color scheme

If you already have a website working, and you haven’t used any styles (no custom background, no custom color, no custom inputs), then you can use in your HTML:

<meta name="color-scheme" content="light dark" />

or in your CSS:

:root {
  color-scheme: light dark;
}

This will enable both default light and dark modes for your website and will follow your system mode (no toggle available in the UI).

You can read more about it here: https://web.dev/color-scheme/.

System colors

There is also another powerful tool available to us: native system themed colors.

In CSS, you can say that a color should follow the system color for multiple semantic elements, like LinkText, or Canvas (background color):

A few examples of system colors

The best is that those colors will have automated variants in dark mode.

For the whole list of system colors, and their semantic meaning, you can out the MDN page, or check them out in the CSS spec.

Result