Body is not taking the new class

HTML-CSS
1

I am trying to set a Dark/Light mode.
I declared some variables for background and font colors.

I also set others values for the same variables in a class (“test”).
I am testing if it works, manually adding and removing the class from the body in the index.html file.

it always takes the class value regardless the class is in the body, in the html.index
Can you please help? here the coding.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">

  <link rel="stylesheet" href="CSS/style.css">

  <title>Frontend Mentor | GitHub user search app</title>

</head>

<body class="test">

  <div class="container">

    <nav>

      <h1>devfinder</h1>

      <div id="toggleButton">

        <div class="toggleIcon active"><h3>LIGHT</h3><img src="./assets/icon-sun.svg" alt="sun icon"></div>

        <div class="toggleIcon inactive"><h3>DARK</h3><img src="./assets/icon-moon.svg" alt="moon icon"></div>

      </div>

    </nav>

    <section class="searchBox">

      <img src="/assets/icon-search.svg" alt="">

      <input id="userName" placeholder="Search GitHub username..." type="text">

      <span class="tempMess show">Not Found</span>

      <button id="submit" type="submit">Search</button>

    </section>

    <main>

      <section class="userInfo">

        <div class="imageProfile">

          <img class="info link" src="./assets/583231.png" alt="">

        </div>

        <div class="userDesc">

          <h3 class="info">The Octocat</h3>

          <h4 class="info">@octocat</h4>

          <h4 class="info date">Joined 25 jan 2011</h4>

        </div>

      </section>

      <section class="desc">

        <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque officiis hic laudantium, voluptas qui perferendis?</p>

      </section>

        <section class="stat">

          <h4 >repos</h4>

          <h4>followers</h4>

          <h4>following</h4>

          <h4 class="info">8</h4>

          <h4 class="info">3938</h4>

          <h4 class="info">9</h4>

        </section>

        <section class="media">

          <div><div class="img"><img src="./assets/icon-location.svg" alt=""></div><a><h4 class="info">San Francicso</h4></a></div>

          <div><div class="img"><img src="./assets/icon-website.svg" alt=""></div><a class="socialLinks" href="https://"><h4 class="info socials">Not Available</h4></a></div>

          <div><div class="img"><img src="./assets/icon-twitter.svg" alt=""></div><a class="socialLinks" href="https://twitter.com/">@<h4 class="info socials">https://github.blog</h4></a></div>

          <div><div class="img"><img src="./assets/icon-company.svg" alt=""></div><a><h4 class="info socials">@github</h4></a></div>

        </section>

    </main>

    

  </div>

<script src="script.js"></script>

</body>

</html>

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

$background1: rgb(20, 29, 47);

$background2: rgb(30, 42, 71);

$background3: rgb(0, 121, 255);

$colorFont1: white;

$colorFont2: black;

$colorFont3: white;

$colorFont4: white;

.test {

  $background1: rgb(246, 248, 255);

  $background2: white;

  $colorFont1: rgb(105, 124, 154);

  $colorFont2: black;

  $colorFont3: white;

  $colorFont4: rgb(105, 124, 154);

}

body {

  background-color: $background1;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  height: 100vh;

  color: $colorFont1;

  font-family: "Space Mono";

  h1 {

    font-size: 26px;

    line-height: 38px;

  }

  h2 {

    font-family: "Space Mono";

    font-size: 22px;

    line-height: 33px;

  }

  h3 {

    font-family: "Space Mono";

    font-size: 16px;

    line-height: 24px;

  }

  h4 {

    font-family: "Space Mono";

    font-size: 13px;

    line-height: 20px;

  }

  a {

    text-decoration: none;

    color: $colorFont1;

    display: flex;

    align-items: center;

  }

  a.socialLinks {

    cursor: pointer;

  }

  p {

    font-family: "Space Mono";

    font-size: 13px;

    text-align: justify;

  }

  .container {

    margin: 1.5em 0;

    width: 90%;

    max-width: 800px;

    nav {

      display: flex;

      justify-content: space-between;

      align-items: center;

      h1 {

        color: $colorFont2;

      }

      div.inactive {

        display: none;

      }

      div.active {

        display: flex;

        img {

          margin-left: 1em;

        }

      }

    }

    .searchBox {

      background-color: $background2;

      padding: 0.5em 0.5em;

      margin: 1em auto;

      width: 100%;

      border-radius: 10px;

      display: flex;

      align-items: center;

      justify-content: space-around;

      input {

        height: 30px;

        background-color: $background2;

        border: 0;

        color: $colorFont4;

        outline: none;

        width: 100%;

        text-align: center;

      }

      ::placeholder {

        color: $colorFont1;

        font-size: 12px;

      }

      .show {

        visibility: hidden;

      }

      button {

        background: rgb(0, 121, 255);

        border: none;

        color: $colorFont3;

        font-weight: bold;

        padding: 0.8em 1.5em;

        border-radius: 10px;

      }

    }

    main {

      background-color: $background2;

      color: $colorFont1;

      padding: 1em 1.5em;

      border-radius: 20px;

      section.userInfo {

        display: flex;

        .imageProfile {

          display: flex;

          align-items: center;

          margin-right: 1em;

          img {

            width: 60px;

            height: 60px;

            border-radius: 50px;

          }

        }

        .userDesc {

          flex-basis: 80%;

        }

      }

      section.desc {

        margin: 1em 0;

      }

      section.stat {

        background-color: $background1;

        border-radius: 10px;

        padding: 1em;

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        justify-content: center;

        align-items: center;

        gap: 0.5em;

        h4 {

          font-size: 12px;

          text-align: center;

        }

      }

      section.media {

        div {

          display: flex;

          margin: 0.5em 0em;

          img {

            width: 15px;

            height: auto;

            margin-right: 0.8em;

          }

          h4 {

            display: flex;

            align-items: center;

          }

        }

      }

    }

  }

}
2

For dark mode try this solution:

 <div class="container" onclick="body.classList.toggle('activeclass')">

This changes into a dark mode. On toggle the class changes so do the style:

.activeclass {
  background-color: #292929;
  color: rgb(241, 240, 240);
  transition: all 600ms ease;
}

You need to define a button for this. Maybe modify a div tag for that.

3

Thank you for this. What’s wrong with my code?

4

I tried to insert ur code in an online editor like codepen but I didn’t get the actual result. eg I can not see the toggle button. If you could provide a like to an online editor it would have been better.

For the toggle button you need to have separate styling. Maybe something like this one:

.toggle-button {
  width: 65px;
  height: 30px;
  background-color: rgb(190, 190, 190);
  position: relative;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
5

the problem for me it is not setting the toggle button, it’s easy with js.
The issue that I have is in the sass file.

If you check above, I have some variables that are used ti fill out the colors.
Below those variables and before the body I create a class (“test”) whit the same variables as above but with different colors.

I would expect that if I manually add or remove the “test” class in the body tag, in the index.html the colors would change, but it doesn’t and I don’t understand why. If I am not able to change it manually it useless to make the toggle button because it won’t work.

6

You give the body tag the class of test. Well there is no background-color: syntax in the CSS part of the test class. There are just Sass variables.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.