Vinicius De Antoni
1 min readJul 27, 2020

--

Hey,

With prefers-color-scheme (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme), the only way to activate dark mode is via an OS setting (https://web.dev/prefers-color-scheme/#activating-dark-mode-in-the-operating-system).

If you want to manually activate it (through a button for example) you need Javascript.

The way I usually do it, is by adding a class to body, and setting different css variables.

I created a simple example here: https://codesandbox.io/s/dark-mode-toggle-seche

If you are looking for an example with tailwind + toggle, you can check out my website vdeantoni.com. The code is available here: https://github.com/vdeantoni/vdeantoni.com

If you have more questions let me know.

--

--

No responses yet