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" />

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):

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