How could I make it so that the dark mode switch effects more then just the body, As well as making it change icons to a moon once toggled? - Html

Anthony
March 7, 2023
145 views
1 vote
2 Answers

function myFunction () {
    let element = document.body;
    element.classList.toggle("dark-mode");
}

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@1,700&display=swap'); /*Used for Nav */

@import url('https://fonts.googleapis.com/css2?family=Sono:wght@300&display=swap'); /* used for body */


body {
    background-color: #5465FF;
    font-family: 'Sono', sans-serif;
    color: black;
   }

 img {
    width: 30%;
     height: auto;
    margin-top: 50px;
    border: solid black 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

nav{
    font-family: 'Roboto Condensed', sans-serif;;
    display: flex;
    justify-content:space-evenly;
    padding-top: 10px;
    padding-left: 3%;
     /* background-color: rgba(135, 151, 252, 0.288);  */
    font-size: 19px;

}

nav ul li {
    display:inline-block;
    margin-left: 75px;
}

nav ul li a{text-decoration:none}

nav ul li a:visited {
    color: black;
}

nav ul li a:hover {
    color: yellow; 
}

.logo {
    font-size: 30px;
    background-color: rgba(73, 86, 126, 0.637);
    border: solid black;
    border-radius: 15px;
    padding: 10px;
}

p {
    font-size: 20px;
    border: solid black 5px;
     font-weight: bolder;
     margin-left: 100px;
    margin-right: 100px;
    padding-left: 100px;
    padding-right: 100px;
    background-color: rgba(202, 213, 250, 0.637);
}

h2 {
    border: solid black 5px;
    font-weight: bolder;
    margin-left: 100px;
    margin-right: 100px;
    padding-left: 100px;
    padding-right: 100px;
    background-color: rgba(202, 213, 250, 0.637); 
}

.thisIs {
    font-size: 35px;
    text-align: center;
    font-weight: bolder;
}

h1 {
    text-align: center;
    margin-top: 400px;
    margin-bottom: auto;
}

/* button {
    background-color: rgba(202, 213, 250, 0.637);
} */

light-mode {
    background-color: #5465FF;
    color: black;
}

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

!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Keypad</title>
  <link rel="stylesheet" href="css/style.css">

</head>
<body>


    <nav>
        <label class="logo">Project Keypad <ion-icon name="keypad"></ion-icon></label> 
        <ul>
            <li><a href="homepage.html">Home</a> <ion-icon name="home"></ion-icon></li>
            <li><a href="About.html">About</a> <ion-icon name="cash"></ion-icon></li>
            <li><a href="">Updates</a> <ion-icon name="newspaper"></ion-icon></li>
            <li><a href="">Commission</a> <ion-icon name="list"></ion-icon></li>
            <li><a href="">Contact</a> <ion-icon name="call"></ion-icon></li>
            <!-- <li><a href="login.html"><button>Log In</button></a></li> -->
        </ul>
        <button onclick="myFunction()">☀️</button>


    </nav>


    <div class="intro">
     <h1> Hi, I'm Anthony</h1>
     <div class="thisIs">This is Project Keypad <br><br> <ion-icon name="keypad" id="underneath"></ion-icon></div>
    </div>



 <script src="js/script.js"></script>
 <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

</body>

<footer>


</footer>







</html>

Here is my current code…..

So I’m looking to make the dark mode button for one, turn into another icon such as a moon.
I also want it to work in-between web pages…so if a user toggles it when they go to a different page it doesn’t just disappear.
Lastly I was wondering if I could make it effect multiple elements. Currently it’s only effecting the body
how would I get it to also change

or the nav bar.

Totally understand if you can’t answer it all
I’m very new to javascript and only understand basics so far.

Answers

I have provided the code snippet below, please use it!
If it is not working click here

Note: you can use local storage concept to make it work between pages!

let state = "light";
let element = document.body;
function myFunction() {
  if (state == "light") {
    element.classList.replace("light-mode", "dark-mode");
    document.getElementById('toggle-button').innerText = '☀️'
    state = "dark"
   
  }
  else{
    element.classList.replace("dark-mode", "light-mode");
    document.getElementById('toggle-button').innerText = '🌚'
    state = "light"
    
    
  }
  




}

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@1,700&display=swap'); /*Used for Nav */

@import url('https://fonts.googleapis.com/css2?family=Sono:wght@300&display=swap'); /* used for body */


body {
    background-color: #5465FF;
    font-family: 'Sono', sans-serif;
    color: black;
   }




 img {
    width: 30%;
     height: auto;
    margin-top: 50px;
    border: solid black 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
   
}

nav{
    font-family: 'Roboto Condensed', sans-serif;;
    display: flex;
    justify-content:space-evenly;
    padding-top: 10px;
    padding-left: 3%;
     /* background-color: rgba(135, 151, 252, 0.288);  */
    font-size: 19px;
    
}

nav ul li {
    display:inline-block;
    margin-left: 75px;
    
    }

nav ul li a{text-decoration:none}

nav ul li a:visited {
    color: black;
   
}

nav ul li a:hover {
    
    color: yellow; 
}




.logo {
    font-size: 30px;
    background-color: rgba(73, 86, 126, 0.637);
    border: solid black;
    border-radius: 15px;
    padding: 10px;
    
}

p {
    font-size: 20px;
    border: solid black 5px;
     font-weight: bolder;
     margin-left: 100px;
    margin-right: 100px;
    padding-left: 100px;
    padding-right: 100px;
    background-color: rgba(202, 213, 250, 0.637);
    
}

h2 {
    border: solid black 5px;
     font-weight: bolder;
    margin-left: 100px;
    margin-right: 100px;
    padding-left: 100px;
    padding-right: 100px;
    background-color: rgba(202, 213, 250, 0.637); 
}

.thisIs {
    font-size: 35px;
    text-align: center;
    font-weight: bolder;
}

h1 {
    text-align: center;
    margin-top: 400px;
    margin-bottom: auto;
    
}
light-mode {
    background-color: #5465FF;
    color: black;
}

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body class="light-mode">
  Hello world
  <script src="script.js"></script>

  nav>
  <label class="logo">Project Keypad <ion-icon name="keypad"></ion-icon></label>
  <ul>
    <li><a href="homepage.html">Home</a>
      <ion-icon name="home"></ion-icon>
    </li>
    <li><a href="About.html">About</a>
      <ion-icon name="cash"></ion-icon>
    </li>
    <li><a href="">Updates</a>
      <ion-icon name="newspaper"></ion-icon>
    </li>
    <li><a href="">Commission</a>
      <ion-icon name="list"></ion-icon>
    </li>
    <li><a href="">Contact</a>
      <ion-icon name="call"></ion-icon>
    </li>
    <!-- <li><a href="login.html"><button>Log In</button></a></li> -->
  </ul>
  <button onclick="myFunction()" id="toggle-button">🌚</button>


  </nav>


  <div class="intro">
    <h1> Hi, I'm Anthony</h1>
    <div class="thisIs">This is Project Keypad <br><br>
      <ion-icon name="keypad" id="underneath"></ion-icon>
    </div>
  </div>

  
  <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

</body>

</html>

function myFunction () {
    let element = document.body;
    element.classList.toggle("dark-mode");
}

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@1,700&display=swap'); /*Used for Nav */

@import url('https://fonts.googleapis.com/css2?family=Sono:wght@300&display=swap'); /* used for body */


body {
    background-color: #5465FF;
    font-family: 'Sono', sans-serif;
    color: black;
   }




 img {
    width: 30%;
     height: auto;
    margin-top: 50px;
    border: solid black 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

nav{
    font-family: 'Roboto Condensed', sans-serif;;
    display: flex;
    justify-content:space-evenly;
    padding-top: 10px;
    padding-left: 3%;
     /* background-color: rgba(135, 151, 252, 0.288);  */
    font-size: 19px;

}

nav ul li {
    display:inline-block;
    margin-left: 75px;

    }

nav ul li a{text-decoration:none}

nav ul li a:visited {
    color: black;

}

nav ul li a:hover {

    color: yellow; 
}




.logo {
    font-size: 30px;
    background-color: rgba(73, 86, 126, 0.637);
    border: solid black;
    border-radius: 15px;
    padding: 10px;

}

p {
    font-size: 20px;
    border: solid black 5px;
     font-weight: bolder;
     margin-left: 100px;
    margin-right: 100px;
    padding-left: 100px;
    padding-right: 100px;
    background-color: rgba(202, 213, 250, 0.637);

}

h2 {
    border: solid black 5px;
     font-weight: bolder;
    margin-left: 100px;
    margin-right: 100px;
    padding-left: 100px;
    padding-right: 100px;
    background-color: rgba(202, 213, 250, 0.637); 
}

.thisIs {
    font-size: 35px;
    text-align: center;
    font-weight: bolder;
}

h1 {
    text-align: center;
    margin-top: 400px;
    margin-bottom: auto;

}

/* button {
    background-color: rgba(202, 213, 250, 0.637);

} */

light-mode {
    background-color: #5465FF;
    color: black;
}

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

/* --- ADDED PART --- */
.toggler::before{
  content: "☀️"
}

.dark-mode .toggler::before{
  content: "🌑"
}
/* --- /ADDED PART --- */

!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Keypad</title>
  <link rel="stylesheet" href="css/style.css">

</head>
<body>


    <nav>
        <label class="logo">Project Keypad <ion-icon name="keypad"></ion-icon></label> 
        <ul>
            <li><a href="homepage.html">Home</a> <ion-icon name="home"></ion-icon></li>
            <li><a href="About.html">About</a> <ion-icon name="cash"></ion-icon></li>
            <li><a href="">Updates</a> <ion-icon name="newspaper"></ion-icon></li>
            <li><a href="">Commission</a> <ion-icon name="list"></ion-icon></li>
            <li><a href="">Contact</a> <ion-icon name="call"></ion-icon></li>
            <!-- <li><a href="login.html"><button>Log In</button></a></li> -->
        </ul>
        
        <!-- --- ADDED PART --- -->
        <button class="toggler" onclick="myFunction()"></button>
        <!-- --- /ADDED PART --- -->

    </nav>


    <div class="intro">
     <h1> Hi, I'm Anthony</h1>
     <div class="thisIs">This is Project Keypad <br><br> <ion-icon name="keypad" id="underneath"></ion-icon></div>
    </div>



 <script src="js/script.js"></script>
 <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

</body>

<footer>


</footer>







</html>

You want this. It can be done with JavaScript too. You’d change .innerHTML or .innerText and that’s trivial. Anyways, here you go with the css way. It makes sure that moon will be displayed if and only if it’s in dark mode, so will the sun for the light mode. you may forget to update inner html, but css way, the content is determined by the class.

Please signup or login to give your own answer.

Click here to cancel reply.

How could I make it so that the dark mode switch effects more then just the body, As well as making it change icons to a moon once toggled? – Html

Answers