WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botón interruptor de luz oscura.
2432
jhonnn
Abrir en el editor
Video
Publica tu código
0
Recomendado
5 July 2025
Panel de inicio de sesión moderno con borde animado y restablecimiento de contraseña de TheDoc
15 September 2024
Formulario de inicio de sesión animado
30 January 2026
Cargador de juegos Flash con reproductor Ruffle
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'); });