DEV Community

loading...

Light/dark mode: the lazy way

Ayc0
I try to build good tools for JavaScript and React 😅
Updated on ・1 min read

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)