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.
2
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!
You want this. It can be done with JavaScript too. You’d change
.innerHTMLor.innerTextand 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.