How To Use JavaScript And CSS3 To Switch Web Page Background And Text Color ·

This example will show you how to use JavaScript and CSS3 to switch web page background and text color. There is a toggle button at the top right corner of the web page. When you click it, it will change the web page background color and text color between black and white.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>How To Use JavaScript And CSS3 To Switch Web Element Background Color</title>

<style>
:root {
  --background: white;
  --text: black;
}

body {
  height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;background-color: #fff5db;
}

.browser {
  max-width: 750px;
  width: 95%;
  border-radius: 12px;
  max-height: 650px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 1px 1px black;
}

.browser__header {
  padding: 15px;
  position: relative;
}
.browser__header::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
  content: "";
}

.browser__header i {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  margin-right: 5px;
  border: 1px solid black;
}
.browser__header i:nth-child(1) {
  background: #E85D75;
}
.browser__header i:nth-child(2) {
  background: #EEC643;
}
.browser__header i:nth-child(3) {
  background: #79B791;
}

.browser__content {
  padding: 20px;
  padding-bottom: 5vh;
}

.browser h1,
.browser p {
  color: var(--text);
  -webkit-transition: color 200ms linear 100ms;
  transition: color 200ms linear 100ms;
}

.browser__content p {
  line-height: 1.5;
}

.toggle {
  position: absolute;
  top: 14px;
  right: 15px;
}

.toggle label {
  position: relative;
  display: block;
  width: 50px;
  height: 22px;
  background: #fff;
  border: 1px solid var(--text);
  border-radius: 100px;
  cursor: pointer;
}
.toggle label::before {
  position: absolute;
  width: 900px;
  height: 900px;
  background: var(--background);
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 100%;
  opacity: 1;
  -webkit-transform: translate3d(-47%, 0, 0) scale(0.1);
          transform: translate3d(-47%, 0, 0) scale(0.1);
  -webkit-transition: background 300ms ease-in-out 200ms, opacity 350ms ease-in-out 200ms, -webkit-transform 400ms ease-in-out;
  transition: background 300ms ease-in-out 200ms, opacity 350ms ease-in-out 200ms, -webkit-transform 400ms ease-in-out;
  transition: background 300ms ease-in-out 200ms, opacity 350ms ease-in-out 200ms, transform 400ms ease-in-out;
  transition: background 300ms ease-in-out 200ms, opacity 350ms ease-in-out 200ms, transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
  pointer-events: none;
  content: "";
  opacity: 0;
  z-index: -999;
}
.toggle label::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  margin: auto;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 1px solid black;
  content: "";
  border-radius: 100px;
  -webkit-transition: background 200ms linear, -webkit-transform 200ms ease-in-out 100ms;
  transition: background 200ms linear, -webkit-transform 200ms ease-in-out 100ms;
  transition: background 200ms linear, transform 200ms ease-in-out 100ms;
  transition: background 200ms linear, transform 200ms ease-in-out 100ms, -webkit-transform 200ms ease-in-out 100ms;
}

.toggle input {
  display: none;
}
.toggle input:checked ~ label:after {
  background: #000;
  -webkit-transform: translate3d(27px, 0, 0);
          transform: translate3d(27px, 0, 0);
}
.toggle input:checked ~ label:before {
  -webkit-transform: translate3d(-84%, 23%, 0) scale(1);
          transform: translate3d(-84%, 23%, 0) scale(1);
  -webkit-transition: background 300ms ease-in-out, opacity 30ms ease-in-out, -webkit-transform 400ms ease-in-out;
  transition: background 300ms ease-in-out, opacity 30ms ease-in-out, -webkit-transform 400ms ease-in-out;
  transition: background 300ms ease-in-out, opacity 30ms ease-in-out, transform 400ms ease-in-out;
  transition: background 300ms ease-in-out, opacity 30ms ease-in-out, transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
  opacity: 1;
}
</style>

</head>
<body>

<div class="browser">
  <div class="browser__header">
    <i></i>
    <i></i>
    <i></i>
  </div>

  <div class="browser__content">
    <h1>This example is implemented with JavaScript and CSS3.</h1>
    <p>I love JavaScript and CSS3.</p>
  </div>
  
  <div class="toggle">
    <input type="checkbox" id="toggle">
    <label for="toggle" />
  </div>

</div>

<script>
const toggle = document.querySelector('.toggle');
let root = document.documentElement;

toggle.addEventListener('change', e => {
  if (e.target.checked) {
    root.style.setProperty('--background', 'black');
    root.style.setProperty('--text', 'white');
  } else {
    root.style.setProperty('--background', 'white');
    root.style.setProperty('--text', 'black');
  }
})</script>

</body>
</html>
Below is the demo video for this example.
https://www.youtube.com/watch?v=nzfrxSNQoHQ
Leave a Comment Cancel Reply
