DEV Community

Ayc0
Ayc0

Posted on • Updated on

Light/dark mode: the lazy way

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:

<meta name="color-scheme" content="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/

Note: this will work on both Chrome and Safari, but not Firefox

Discussion (0)