CODEWITHSUNDEEP
htmlcss
Mihailo Vasic
Mihailo Vasic

Reputation: 11

I can't figure out why dark/light mode is not changing do not work on the second page

I am learning all HTML/CSS, and I am creating a project, which has 2 pages. Each page has a button in the footer that changes dark/light mode.

On the second page, I have everything the same, but the button that works on page 1st page for dark/light mode shows "your file couldn't be accessed" when on the 2nd page, and the light/dark mode doesn't save between pages, it always reverts back to the first mode(dark mode). Here is the code:

Page 1: 

  <head>
    <title>VASKE</title>
    <link rel="stylesheet" href="css/vas.css" />
  </head>

  <body>
    <header>
      <div class="div1">
        <h1 title="Home"><a href="index.html"> VASKE </a></h1>
      </div>
    </header>

    <footer>
      <button class="button" onclick="darkmode()">Dark/Light mode</button>
      <br>
      <button class="button"><a href="emailpage.html">Contact me</button>
      <script>
        function darkmode() {
          var element = document.body;
          element.classList.toggle("dark-mode");
        }

      </script>
    </footer>
  </body>
</html>

Page 2:

<html>

  <head>
    <title>VASKE</title>
    <link rel="stylesheet" href="css/vas.css" />
  </head>

  <body>
    <header>
      <div class="div1">
        <h1 title="Home"><a href="index.html"> VASKE </a></h1>
      </div>
    </header>
    <br>
    <div class="div2">
      <p><strong>[email protected]<a href="[email protected]"><strong></p>
    </div>
    <footer>
      <button class="button" onclick="darkmode()">Dark/Light mode</button>
      <br>
      <button class="button"><a href="emailpage.html">Contact me</button>
      <script>
        function darkmode() {
          var element = document.body;
          element.classList.toggle("dark-mode");
        }

      </script>
    </footer>
  </body>

</html>

CSS:

body {
    transition: 1s;
    padding: 25px;
    background-color: #121212;
    color: white;
    font-size: 25px;
}
.button {
  background-color: black;
  border: none;
  border-radius: 50px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.dark-mode {
    transition: 1s;
    background-color: #CAF4F4;
    color: black;
}

.div1 {
    width: 70%;
    background-color: gray;
    border: 2px solid gray;
    border-radius: 5px;
    margin: auto;
    left: 50%;
}

.div2 {
    width: 50%;
    background-color: gray;
    border: 2px solid gray;
    border-radius: 5px;
    margin: auto;
    left: 50%;
    
}
a {
    text-decoration: none;
}

footer {
    background-color: #333;
    text-align: center;
    color: #fff;
    padding: 20px;
    bottom: 0;
    width: 100%;
    position: fixed;
    left: 0px;
}

Upvotes: 1

Views: 1282

Answers (1)

Utmost Creator
Utmost Creator

Reputation: 1121

You have some unclosed HTML tags in your files; I have fixed them.

And to be able to change and save the state, you should use localStorage as @shikkediel mentioned.

Also, consider using vs code or something similar (sublime text) as they are free of charge, and you may really like it. These editors will help you to avoid unclosed HTML tags, and will help you in general with all the aspects.

Page 1

<html>

  <head>
    <meta charset="UTF-8">
    <title>VASKE</title>
    <link rel="stylesheet" href="css/vas.css" />
  </head>

  <body>
    <header>
      <div class="div1">
        <h1 title="Home"><a href="index.html"> VASKE </a></h1>
      </div>
    </header>

    <footer>
      <button class="button" onclick="darkmode()">Dark/Light mode</button>
      <br>
      <button class="button"><a href="emailpage.html">Contact me</a></button>
      <script>
        function darkmode() {
          var element = document.body;
          element.classList.toggle("dark-mode");
        }

      </script>
    </footer>
  </body>

</html>

Page 2

<html>

  <head>
    <meta charset="UTF-8">
    <title>VASKE</title>
    <link rel="stylesheet" href="css/vas.css" />
  </head>

  <body>
    <header>
      <div class="div1">
        <h1 title="Home"><a href="index.html"> VASKE </a></h1>
      </div>
    </header>
    <br>
    <div class="div2">
    <p><strong><a href="[email protected]">[email protected]</a></strong></p>
    </div>
    <footer>
      <button class="button" onclick="darkmode()">Dark/Light mode</button>
      <br>
      <button class="button"><a href="emailpage.html">Contact me</a></button>
      <script>
        function darkmode() {
          var element = document.body;
          element.classList.toggle("dark-mode");
        }

      </script>
    </footer>
  </body>

</html>

Here is a simple example how to store and get usingn localStorage:

// to store you data
localStorage.setItem('yourKey', 'yourValue');
// get the value
const value = localStorage.getItem('yourKey');
// clear the storage
localStorage.clear()

// example how you could save the theme:

let btn = document.querySelector('#yourBtn'); // yourBtn is an id on you button element
btn.addEventListener('click', function() {
    // you actions goes here
}, false);


const theme = localStorage.getItem('theme');
if (theme !== null) {
   if (theme === 'dark') {
       // apply your dark theme method
   }
   if (theme === 'light') {
       // apply your light theme method
   }
}

These example will help you to start

Upvotes: 1

Related Questions