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