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.
2228
jhonnn
Abrir en el editor
Video
Publica tu código
0
Recomendado
12 July 2025
Contador de clics de la barra espaciadora - JavaScript HTML
27 November 2024
Página de destino - Hotel
11 January 2024
Pantalla de Carga de Puntos
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'); });