How to change color of multiple webpages at once by javascript?

Question

I'm trying to change color of a html webpage and it's working without any problem. But I've several webpages, and I want the colors of all pages to be changed on a press of a button, not just the one. There will a settings page where color options will be there where user can change the color of all webpages by choosing any color.

Code for changing color of single page:

$(document).ready(function() {
  $(".btn").click(function() {
    if ($(".container").hasClass("night")) {
      $(".container").removeClass("night");
      $(".btn").removeClass("btn-night").text("Night Mode Off");
      $(".text").removeClass("text-night");
      $(".p-sm").text("Turn on the night mode to change the background to dark.");
    } else {
      $(".container").addClass("night");
      $(".btn").addClass("btn-night").text("Night Mode On");
      $(".text").addClass("text-night");
      $(".p-sm").text("Night mode is active. Turn off the night mode to change the background to light.");
    }
  });
});

body,
.container {
  height: 100vh;
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  animation-name: daytransition;
  animation-duration: 3s;
}

@keyframes daytransition {
  from {
    background-color: #040018;
  }
  to {
    background-color: #fff;
  }
}

.text {
  position: absolute;
  top: 30%;
  font-size: 20px;
  text-align: center;
}

.p-lg {
  font-size: 28px;
}

.p-sm {
  margin: 30px;
}

.night {
  animation-name: nighttransition;
  animation-duration: 3s;
  background-color: #040018 !important;
}

@keyframes nighttransition {
  from {
    background-color: #fff;
  }
  to {
    background-color: #040018;
  }
}

.text-night {
  color: #c5b2cc;
}

.btn {
  margin: 30px;
  background-color: #6f6f8e !important;
  color: #FBFFC9 !important;
}

.btn-night {
  background-color: #FBFFC9 !important;
  color: #6f6f8e !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>

<body>
  <div class="container">
    <div class="text">
      <p class="p-lg">Demo of Day and Night Themes</p>
      <button class="btn btn-lg">Night Mode Off</button>
      <p class="p-sm">Turn on the night mode to change the background to dark.</p>
    </div>
  </div>
</body>

</html>

[local or session storage may be helpful to you](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) — Alexander Nied, Apr 10 '18 at 14:04
[Communication between tabs and windows](https://stackoverflow.com/questions/28230845/communication-between-tabs-or-windows) might help you. Basically use something called [BroadcastChannel](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel) if you're aiming for modern browsers or local storage for older ones. — Horia Coman, Apr 10 '18 at 14:04
Possible duplicate of [Communication between tabs or windows](https://stackoverflow.com/questions/28230845/communication-between-tabs-or-windows) — Horia Coman, Apr 10 '18 at 14:05

score 0 · Answer 1 · answered Apr 10 '18 at 14:14

0

You want to persist state between different pages. You can do it with a session storage

sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');

answered Apr 10 '18 at 14:14

rozalex

320
1
8

How to change color of multiple webpages at once by javascript?

1 Answers1