How to toggle many css styles to make a dark mode?

April 15, 2022

I’m using HTML, CSS and JavaScript to build my website. I want to add a Darkmode switch button, so by clicking, it will toggle to Dark/ Light mode, but my JavaScript script applies only for one css style – body. But actually, I have many div‘s, which are light, but they are not changed by color.

Here’s my HTML code (with JS <script> container):

How can I solve the problem, so by clicking the button I can make my website dark mode?

function darkMode() {
  var element = document.body
  element.classList.toggle("dark-mode");
  element.classList.toggle("yeaaaaaa");
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #fff;
}

.dark_mode {
  background-color: #000;
}

.yeaaaaaa {
  background-color: #111;
}


/* main styles */

.main {
  display: grid;
  background-color: #f5f7fa;
  grid-template-columns: 22.15em auto;
  grid-template-rows: auto auto;
}

.grid-item {
  background: #1e2939;
}

.photo-coverup {
  display: flex;
  align-items: flex-end;
}

.info-name {
  color: #1e2939;
  margin-bottom: 5px;
}

.info-list {
  color: #1e2939;
  margin-bottom: 25px;
}

.info-yee {
  color: #1e2939;
  width: 400px;
}


/* about styles */

.about {
  background-color: #F1F9fc;
  padding: 15px 120px 10px 50px;
}

.info {
  color: #1e2939;
}

.texx-alt {
  font-style: normal;
  color: black;
}

#delegar {
  position: fixed;
  right: 10px;
  top: 10px;
  width: 90px;
  height: 35px;
  border: none;
  outline: none;
  color: #87c9f5;
  background: #1e2939;
  cursor: pointer;
  z-index: 0;
  border-radius: 15px 0 0 15px;
  -webkit-transition: ease-in 1s;
  transition: color 1s;
}

#delegar:hover {
  color: #1e2939;
  background-color: #87c9f5;
  font-weight: bold;
}

<!--Main-->
<div class="main grid">
  <div class="photo-coverup grid-item">
    <img src="img/Profile pic.jpg" alt="Dude Pic" class="photo">
  </div>
  <!--About User-->
  <span>
        <div class="about grid-item yeaaaaaa">
          <p class="info">
          <h2 class="info">Developer and Graphic Designer</h2>
          <h1 class="info-name">George Mos</h1>
          <p class="info-yee">
            My name is George (GMos) Mos. I'm a graphic designer and programmer. I have:
          </p>
          <ul class="info-list">
            <li class="info-section-list-component">4-year-experience in Adobe Photoshop and Adobe Illustrator</li>
            <li class="info-section-list-component">3-year-experience in programming
              (Python, HTML5, Bash and JavaScript)</li>
          </ul>
          <p class="info">I'm from Ukraine, Kyiv. I work as a freelancer and, usually, my work consists
            of creating logos, wallpapers, art and/
            or making softwares, programs and websites. My life motto: "Optimistic and ambitious"
          </p>
          <p class="info">In my spare time I often lay back in Discord either texting or taking part in a voice
            channels. If you wanna join, don't hesitate yourself by following the "Discord" link in "Social Media"
            section! (or you can just <a href="https://discord.gg/PGkJgQtCwZ" class="texx-alt">click here</a> though)
          </p>
          </p>
        </div>
      </span>
  <div>
    <button onclick="darkMode()" id="delegar">Dark Mode</button>
  </div>

>Solution :

Just add the class dark-mode to your body tag with JavaScript, then define all your dark styles with .dark-mode in front of them, like this:

a {
    color: #330033; /* or whatever dark color */
}

.dark-mode a {
    color: white; /* or whatever light color */
}

For more info on CSS specificity and cascading, see this page:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

I recommend grouping all dark mode styles together with a comment above them, like this /* Dark mode styles: */, and put them toward the bottom of your stylesheet (above any responsive breakpoints), so they’re together, and they’re after your regular styles – because CSS takes the last defined style (hence, cascading). That way you don’t run into problems with re-defining styles. Make sure all overriding styles have more specificity than the ones they’re attempting to override. Try to avoid use of !important where possible.