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.
2028
jhonnn
Abrir en el editor
Publica tu código
Recomendado
14 September 2024
Formulario de inicio de sesión de Glassmorphism
12 April 2025
Un código de Farah
6 August 2025
Plantilla HTML para sitio web de gimnasio
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'); });