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)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs