DEV Community

[Comment from a deleted post]
Collapse
 
atila profile image
Atila Fassina

Having a dark mode can be extremely simple to achieve, or super hard. It depends how you set your styles architecture. I believe the most straightforward way, with vanilla CSS, would be something like:

:root {
--light-text: #eee;
--light-background: #bbb;
--dark-text: #222;
--dark-background: #333;
}

body {
  color: var(--dark-text);
  background-color: var(--light-background);

  transition: all 300ms linear; /* 😉 */
}

body[data-theme="dark"] {
  color: var(--light-text);
  background-color: var(--dark-background);
}

Example in JSBin

As others have said, if you aren't using variables, you'll probably will want to do some refactoring first. Search/Replace is your friend! 😅