WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Dark light switch button.
1565
jhonnn
Open In Editor
Publish Your Code
Recommended
19 March 2025
Pure CSS3 Star Wars Lightsaber Checkboxes
11 January 2024
Bulb Switch
21 August 2024
Lamp light
HTML
Copy
Light/Dark Mode Toggle
Switch to Dark Mode
CSS
Copy
/* Basic reset */ * { margin: 0; padding: 0; box-sizing: border-box; transition: background-color 0.5s, color 0.5s; } /* Light and Dark colors */ :root { --light-bg: #f3f4f6; --light-text: #1a1a1a; --dark-bg: #1a1a1a; --dark-text: #f3f4f6; } /* Light Mode as default */ body { background-color: var(--light-bg); color: var(--light-text); font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; } /* Container for styling */ .container { text-align: center; } /* Toggle switch */ .toggle-switch { position: relative; width: 60px; height: 30px; margin: 20px auto; } /* Hide the default checkbox */ .toggle-switch input { opacity: 0; width: 0; height: 0; } /* Slider with border */ .slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 30px; cursor: pointer; transition: background-color 0.4s; border: 2px solid #aaa; /* Add border here */ } /* Circle inside slider */ .slider::before { position: absolute; content: ""; height: 24px; width: 24px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: transform 0.4s; border: 1px solid #ddd; /* Border around the inner circle */ } /* Checked state */ input:checked + .slider { background-color: #4f46e5; border-color: #4f46e5; } input:checked + .slider::before { transform: translateX(30px); } body.dark-mode { background-color: var(--dark-bg); color: var(--dark-text); }
JS
Copy
const toggleSwitch = document.getElementById('modeToggle'); toggleSwitch.addEventListener('change', () => { document.body.classList.toggle('dark-mode'); });