Dark Light Mode website, jQuery
jQuery code for dark light mode website
$(".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
.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
<!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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>
23 Related pages
- About jQuery
- AJAX Introduction
- Copy CSS style from an element and pass it to other element, jQuery
- Dark Light Mode website, jQuery
- if the window size is bigger than 1000px do stuff. jQuery
- Include CDN jQuery
- jQuery Checkbox if else
- jQuery input radio button
- jQuery library included locally
- jQuery Limited interval
- jQuery localStorage explained
- jQuery Next and Prev element addclasses
- jQuery Radio button enable input
- jQuery Refresh the page to change the background-colour
- jQuery Screen size of this device in px
- jQuery setInterval, On page load
- jQuery Start / Stop interval
- jQuery Start interval with start button
- jquery Tick box to enable a button
- jQury plugin form validation
- Jump to Section in page, Distance to the top page, Smooth scroll
- setTimeout, jQuery
- Table Search with jQuery Misc