Night Mode Button

index.html

  <div class="container">
    <h1 class="header">Night Mode</h1>
    <div class="paragraph">
      <p>Night Shift might help strain the eyes less if the surrounding area is dark.</p>

      <p>Your Google Drive storage is full. You have exceeded your storage plan: this means that your documents, contacts and device
        data are no longer being backed up to Drive and your photos and videos are not being uploaded securly saved.
        Google Drive and Google-enabled apps are also not being updated across your devices.</p>

      <p> To continue using these  services, you need to upgrade your  storage plan or reduce the amount of storage you are using.</p>

      <button class="nightModeButton">
        <img class="button-image" src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c399.png">Night Mode
      </button>
    </div>

  </div>

night-mode-button.markdown

Night Mode Button

Night mode button in Javascript

A Pen by ulli bodnar on CodePen.

License.

script.js

var nightModeToggleButton = document.querySelector(".nightModeButton");
var container = document.querySelector(".container");
var para = document.querySelector(".paragraph");
var header = document.querySelector(".header");
var body = document.querySelector("body");

nightModeToggleButton.onclick = function () {
  nightModeToggleButton.classList.toggle("night-mode");
  container.classList.toggle("night-mode");
  para.classList.toggle("night-mode");
  header.classList.toggle("night-mode");
  body.classList.toggle("night-mode");
};

style.css

body {
  background: #e2e1e0;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  transition: all 1s cubic-bezier(.25,.8,.25,1);
}

.header {
  text-align: center;
  margin-top: 0;
  color: #333333;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.container {
  max-width: 70%;
  margin: auto;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  background: white;
  padding: 40px;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.paragraph {
  max-width: 90%;
  margin: auto;
  color: #333333;
}

button {
  padding: 15px 15px 10px 15px;
  border: none;
  text-align: center;
  background: #333333;
  font-size: 18px;
  text-decoration: none;
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  outline: 0;
  cursor: pointer;
}
button:hover {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}


.button-image {
  height: 20px;
  margin-right: 5px;
  margin-bottom: 5px;
  vertical-align: middle;
}


button.night-mode {
  color: #333333;
  background-color: white;
}
.container.night-mode {
  background: #181b23;
  color: white;
}
.paragraph.night-mode {
  color: #c8c8c8;
}
.header.night-mode {
  color: #ddc986;
}
body.night-mode {
  background: #232732;
}