ZaZaKi, a web developer Between Manchester UK & Rotterdam NL. © 2015-2025.

Dark Light Mode website, jQuery

jQuery code for dark light mode website

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(".darkBTN").click(function(){
      localStorage.setItem('darkModeSet', 'darkModeNow');
      $("body").removeClass("light_Mode");
      $("body").addClass("dark_Mode");
});
 
$(".lightBTN").click(function(){
      localStorage.removeItem("darkModeSet");
      $("body").removeClass("dark_Mode");
      $("body").addClass("light_Mode");
});
 
 
if(localStorage.getItem('darkModeSet') == 'darkModeNow') {
      $("body").removeClass("light_Mode");
      $("body").addClass("dark_Mode");
}

 

 

CSS code for dark light mode website

1
2
3
4
5
6
7
8
9
10
.lightBTN, .darkBTN{ padding:10px; display:none;}
.darkBTN{ background-color:black; color:white;}
.lightBTN{ background-color:white; color:black;}
.light_Mode{ background-color: white;color:black;}
.dark_Mode{ background-color:black; color:white;}
.light_Mode .lightBTN{ display:none;}
.light_Mode .darkBTN{ display:block;}
.dark_Mode .lightBTN{ display:block;}
.dark_Mode .darkBTN{ display:none;}
.alwaysRed{ color:red;}

 

 

Complete code for dark light mode website

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
 
<style>
      .lightBTN,.darkBTN{ padding:10px; display:none;}
      .darkBTN{ background-color:black; color:white;}
      .lightBTN{ background-color:white; color:black;}
      .light_Mode{ background-color: white;color:black;}
      .dark_Mode{ background-color:black; color:white;}
      .light_Mode .lightBTN{ display:none;}
      .light_Mode .darkBTN{ display:block;}
      .dark_Mode .lightBTN{ display:block;}
      .dark_Mode .darkBTN{ display:none;}
      .alwaysRed{ color:red;}
</style>
 
 
<script>
$(document).ready(function(){
      $(".darkBTN").click(function(){
            localStorage.setItem('darkModeSet', 'darkModeNow');
            $("body").removeClass("light_Mode");
            $("body").addClass("dark_Mode");
      });
       
      $(".lightBTN").click(function(){
            localStorage.removeItem("darkModeSet");
            $("body").removeClass("dark_Mode");
            $("body").addClass("light_Mode");
      });
       
      if(localStorage.getItem('darkModeSet') == 'darkModeNow') {
            $("body").removeClass("light_Mode");
            $("body").addClass("dark_Mode");
      }
});
</script>
</head>
<body class="light_Mode">
       
      <p><button class="lightBTN">Light Mode</button><button class="darkBTN">Dark Mode</button></p>
      <h1>Web title</h1>
      <h3 class="alwaysRed">The color of this text will not changing because set by own selector class ( alwaysRed ).   </h3>
      <h3>When the BODY class changes this TEXT will changes as well accorging to the properties of the <b>light_Mode </b> and <b>dark_Mode </b> classes.</h3>
       
</body>
</html>
Categroy:
Front-end , JQuery