DEV Community

Cover image for Dark Mode
sudo-self
sudo-self

Posted on

Dark Mode

Life is already complicated.

dark mode doesn't have to be.


add a class to an SVG to use as a toggle

class="dark-mode-svg" onclick="toggleDarkMode()"

.dark-mode {
background-color: #333;
color: grey;
}

.dark-mode-svg {
fill: #333;
color: grey;
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 900px;
cursor: pointer;

function toggleDarkMode() {
  const body = document.body;
  const isDarkMode = body.classList.contains("dark-mode");
  body.classList.toggle("dark-mode", !isDarkMode);
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)