WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Bouton interrupteur de lumière sombre.
1718
jhonnn
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
26 June 2024
Bouton lumineux Discord
5 June 2025
Un code par yuhhxn
26 May 2025
Un code par mironovbogdan341
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'); });