Saturday, November 19, 2022

[FIXED] How to change color in a number of different classes that all share the same class with a toggle function

      , , ,      No comments   

Issue

I'm coding a simple website with bootstrap 4 and SCSS. I would like to add a toggler which alternates dark and light mode on the web page. However, I cannot change the backgroundcolor of 6 bootstrap cards, footer and the text color of nav links. Can you help me please?

html:

function myFunction() {

  let text = document.getElementById("nox-lumos");
  if (text.innerHTML == 'Nox!') {
    document.getElementById("nox-lumos").innerHTML = 'Lumos!';
  } else if (text.innerHTML == 'Lumos!') {
    document.getElementById("nox-lumos").innerHTML = 'Nox!';
  }


  let page = document.body;
  page.classList.toggle("dark-mode");
}
body {
    font-family: 'Courier New', Courier, monospace;
}

.rowstyle {
    background-color: #252525;
    color: white;
    border: 1px solid white;
}

.dark-mode {
    background-color: #252525;
    color: white;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    margin-top: 4px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

#nox-lumos {
    text-decoration: underline 1px;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e9ecef;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 5px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #fff200;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

input:focus + .slider {
    box-shadow: 0 0 1px #e9ecef;
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.picture {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid;
    margin-top: 20px;
    background-image: url(../assets/img/mypicture.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    z-index: 1;
}

.jumbotron {
    background-image: url(../assets/img/amalfi3-2.jpg);
    height: 400px;
    background-position: 0% 85%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: -1;
}

.jumbotron h1 {
    color: #fff;
    font-weight: bold;
    text-shadow: 2px 2px black;
    margin: 0 auto;
}

.achievements p {
    text-align: center;
}

.achievements h3 {
    text-align: center;
}

#hobbies {
    border-bottom: 1px solid #e9ecef;
}

.card {
    width: auto;
    height: 200px;
    overflow: hidden;
}

.card-img-top {
    width: 40px;
}

.skills i {
    margin-bottom: 1em;
}

#webdev {
    width: 50px;
    filter: invert(23%) sepia(50%) saturate(7357%) hue-rotate(351deg) brightness(88%) contrast(110%);
}

#website {
    width: 50px;
    filter: invert(23%) sepia(69%) saturate(3745%) hue-rotate(212deg) brightness(103%) contrast(108%);
}

#hiking {
    width: 36px;
    filter: invert(33%) sepia(71%) saturate(5507%) hue-rotate(24deg) brightness(97%) contrast(94%);
}

#tech {
    width: 50px;
}

#nutrition {
    width: 50px;
    filter: invert(93%) sepia(94%) saturate(2873%) hue-rotate(320deg) brightness(102%) contrast(101%);
}

#travel {
    width: 50px;
    filter: invert(23%) sepia(69%) saturate(3745%) hue-rotate(212deg) brightness(103%) contrast(108%);
}

footer {
    margin-top: 30%;
    padding-bottom: 0.5%;
    background-color: #e9ecef;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
}
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-expand-sm navbar-light col-12 col-md-12" id="navbar">
    <div class="container">
      <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" target="_blank">Curriculum</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contacts</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#" target="_blank"><i class="fa-brands fa-github"></i> Github</a>
              <a class="dropdown-item" href="#" target="_blank"><i class="fa-brands fa-linkedin"></i> Linkedin</a>
              <a class="dropdown-item" href="#"><i class="fa-solid fa-envelope-open"></i> Email</a>
              <a class="dropdown-item" href="#" target="_blank"><i class="fa-brands fa-twitter"></i> Twitter</a>
            </div>
          </li>
          <li class="nav-item">
            <label class="switch"> <!--Switch for change colors-->
              <input type="checkbox" checked aria-label="true">
              <span class="slider round" id="button" onclick="myFunction(); myFunction2()"></span>
            </label>
            <span id="nox-lumos">Nox!</span>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <header class="jumbotron">
    <div class="container">
      <div class="row picture mx-auto">

      </div>
      <div class="row col-12 col-sm-8 mt-3 mx-auto">
        <h1>Hello!</h1>

      </div>

    </div>
  </header>
  <div class="container">
    <div class="row row-content">
      <div class="col col-12 col-sm-6">
        <h3>Lorem et opossum est</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="col col-12 col-sm-6 mt-1">
        <section class="achievements">
          <h3>Loremlorem:</h3>

          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 100%">100%</div>
          </div>
          <p>Lorem et santicum</p>

          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" style="width: 85%">85%</div>
          </div>
          <p>Lorem et frigidus</p>

          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" style="width: 70%">70%</div>
          </div>
          <p>Lorem et mammt</p>
        </section>
      </div>
    </div>

    <div class="row row-header text-center">
      <div class="col col-12 col-sm-6 mt-5 mx-auto">
        <h3 id="hobbies">Lorem and Lorem:</h3>
      </div>
    </div>

    <div class="row text-center">
      <div class="col col-12 col-md-4 mt-5">
        <div class="card border-danger text-center">
          <img class="card-img-top mx-auto mt-2" id="webdev" src="assets/svgs/code-solid.svg" alt="coding">
          <div class="card-body">
            <h5 class="card-title">Lorem</h5>
            <p class="card-text text-md-left">LoremLoremLoremLorem</p>
          </div>
        </div>
      </div>
      <div class="col col-12 col-md-4 mt-5">
        <div class="card border-primary text-center">
          <img class="card-img-top mx-auto mt-2" id="website" src="assets/svgs/display-solid.svg" alt="website">
          <div class="card-body">
            <h5 class="card-title">Lorem</h5>
            <p class="card-text text-md-left">LoremLoremLoremLorem</p>
          </div>
        </div>
      </div>
      <div class="col col-12 col-md-4 mt-5">
        <div class="card border-warning text-center">
          <img class="card-img-top mx-auto mt-2" id="hiking" src="assets/svgs/person-hiking-solid.svg" alt="person hiking">
          <div class="card-body">
            <h5 class="card-title">Lorem</h5>
            <p class="card-text text-md-left">LoremLoremLoremLorem</p>
          </div>
        </div>
      </div>

    </div>

    <div class="row text-center">
      <div class="col col-12 col-md-4 mt-5">
        <div class="card border-danger text-center">
          <img class="card-img-top mx-auto mt-2" id="tech" src="assets/svgs/microchip-solid.svg" alt="microchip">
          <div class="card-body">
            <h5 class="card-title">Lorem</h5>
            <p class="card-text text-md-left">LoremLoremLoremLorem</p>
          </div>
        </div>
      </div>
      <div class="col col-12 col-md-4 mt-5">
        <div class="card border-primary text-center">
          <img class="card-img-top mx-auto mt-2" id="travel" src="assets/svgs/earth-europe-solid.svg" alt="earth europe">
          <div class="card-body">
            <h5 class="card-title">Lorem</h5>
            <p class="card-text text-md-left">LoremLoremLoremLorem</p>
          </div>
        </div>
      </div>
      <div class="col col-12 col-md-4 mt-5">
        <div class="card border-warning text-center">
          <img class="card-img-top mx-auto mt-2" id="nutrition" src="assets/svgs/utensils-solid.svg" alt="food utensils">
          <div class="card-body">
            <h5 class="card-title">Lorem</h5>
            <p class="card-text text-md-left">LoremLoremLoremLorem</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  <footer>
    <div class="container">
      <div class="row text-left">
        <div class="col-12 col-sm-8 mr-0">
          <p>This page was created by me</p>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>


Solution

Set all classes inside .dark-mode (this is SCSS/LESS syntax which requires a CSS pre-processor):

.dark-mode {
    background-color: #252525;
    color: white;

    .card-body {
        background-color: #252525;
        color: white;
    }
    footer {
         ...
    }
    ...
}

"Normal" CSS solution:

.dark-mode .card-body {
    background-color: #252525;
    color: white;
}
.dark-mode footer {
    ...
}
...


Answered By - Bqardi
Answer Checked By - Senaida (PHPFixing Volunteer)

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...