├── index.html ├── script.js └── styles.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dark and Light Mode Toggle Button Design 7 | 8 | 9 | 10 | 11 |
12 |

Hello, World!

13 |

This is a sample text.

14 | 15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Check the user's preference from local storage 2 | const currentMode = localStorage.getItem("mode"); 3 | if (currentMode) { 4 | document.body.classList.add(currentMode); 5 | } 6 | 7 | // Toggle button click event 8 | const toggleButton = document.getElementById("mode-toggle"); 9 | toggleButton.addEventListener("click", () => { 10 | document.body.classList.toggle("dark-mode"); 11 | 12 | // Store the mode preference in local storage 13 | if (document.body.classList.contains("dark-mode")) { 14 | localStorage.setItem("mode", "dark-mode"); 15 | } else { 16 | localStorage.setItem("mode", ""); 17 | } 18 | }); 19 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /* Common styles */ 2 | .container { 3 | max-width: 800px; 4 | margin: 0 auto; 5 | padding: 20px; 6 | text-align: center; 7 | } 8 | 9 | h1 { 10 | font-size: 36px; 11 | margin-bottom: 10px; 12 | } 13 | 14 | p { 15 | font-size: 18px; 16 | margin-bottom: 20px; 17 | } 18 | 19 | /* Light mode styles */ 20 | body { 21 | background-color: #f0f0f0; 22 | color: #333333; 23 | transition: background-color 0.3s, color 0.3s; 24 | } 25 | 26 | /* Dark mode styles */ 27 | body.dark-mode { 28 | background-color: #333333; 29 | color: #f0f0f0; 30 | transition: background-color 0.3s, color 0.3s; 31 | } 32 | 33 | /* Toggle button styles */ 34 | #mode-toggle { 35 | background-color: #ffffff; 36 | color: #333333; 37 | border: none; 38 | padding: 10px 20px; 39 | font-size: 16px; 40 | cursor: pointer; 41 | transition: background-color 0.3s, color 0.3s; 42 | } 43 | 44 | #mode-toggle:hover { 45 | background-color: #333333; 46 | color: #ffffff; 47 | } 48 | --------------------------------------------------------------------------------