DEV Community

Ayc0
Ayc0

Posted on • Edited on

Light/dark mode: the lazy way

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" />
Enter fullscreen mode Exit fullscreen mode

or in your CSS:

:root {
  color-scheme: light dark;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)