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> |
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