Webleb - fragmentos de código - Interruptor de modo oscuro (Sol y Luna)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Dark Mode Toggle Switch mit Sonne und Mond</title>
    <meta name="keywords" content="Dark Mode, Toggle, Switch, Sonne, Mond, Sun, Moon, CSS, JavaScript, HTML, FlatIcon, Theme, Light Mode, Webdesign, UI, UX, Toggle Button, Darkmode Umschalter">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Toggle Dark Mode</h2>
    <div class="toggle-container">
        <label class="toggle-switch">
            <input type="checkbox" id="toggle-darkmode" aria-label="Toggle dark mode">
            <span class="slider">
                
                <span class="icon sun">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <circle cx="12" cy="12" r="5" fill="#f7c948"/>
                        <g stroke="#f7c948" stroke-width="2">
                            <line x1="12" y1="2" x2="12" y2="5"/>
                            <line x1="12" y1="19" x2="12" y2="22"/>
                            <line x1="2" y1="12" x2="5" y2="12"/>
                            <line x1="19" y1="12" x2="22" y2="12"/>
                            <line x1="4.22" y1="4.22" x2="6.34" y2="6.34"/>
                            <line x1="17.66" y1="17.66" x2="19.78" y2="19.78"/>
                            <line x1="4.22" y1="19.78" x2="6.34" y2="17.66"/>
                            <line x1="17.66" y1="6.34" x2="19.78" y2="4.22"/>
                        </g>
                    </svg>
                </span>
                
                <span class="icon moon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <path d="M21 12.79A9 9 0 0 1 12.79 3c-.55 0-.67.72-.19.96A7 7 0 1 0 20.04 13c.24.48-.41.74-.74.21z" fill="#a3bffa"/>
                    </svg>
                </span>
            </span>
        </label>
        <span id="toggle-label">Light Mode</span>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #f0f0f0;          
    color: #333;
    transition: background-color 0.4s cubic-bezier(.4,0,.2,1), color 0.4s cubic-bezier(.4,0,.2,1);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.dark-mode {
    background-color: #181824;
    color: #f0f0f0;
}
.toggle-container {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.toggle-switch {
    position: relative;
    width: 60px;
    height: 32px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #bfc9d1;
    border-radius: 32px;
    transition: background 0.4s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 4px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(.4,0,.2,1), background 0.4s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.toggle-switch input:checked + .slider {
    background: #222b45;
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(28px);
    background: #222b45;
}
/* Sun & Moon icons inside the toggle */
.slider .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 24px;
}
.slider .icon.sun {
    left: 4px;
    color: #f7c948;
}
.slider .icon.moon {
    right: 4px;
    color: #a3bffa;
}
.toggle-switch input:checked + .slider .icon.sun {
    opacity: 0.3;
}
.toggle-switch input:checked + .slider .icon.moon {
    opacity: 1;
}
.toggle-switch input:not(:checked) + .slider .icon.sun {
    opacity: 1;
}
.toggle-switch input:not(:checked) + .slider .icon.moon {
    opacity: 0.3;
}
/* Responsive */
@media (max-width: 600px) {
    .toggle-container {
        flex-direction: column;
        gap: 0.5rem;
    }
}

Interruptor de modo oscuro (Sol y Luna)

Recomendado

Juego de Memoria

Un código de ashimadison8

Plantilla HTML para sitio web de portafolio holográfico

HTML

CSS

JS

Recomendado

Juego de Memoria

Un código de ashimadison8

Plantilla HTML para sitio web de portafolio holográfico

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS