Webleb - Extraits de Code - Interrupteur à bascule en mode sombre (Soleil et Lune)

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;
    }
}

Interrupteur à bascule en mode sombre (Soleil et Lune)

Recommandé

Icônes sociales

Horloge numérique pour la maison

Modèle gratuit de page d'accueil

HTML

CSS

JS

Recommandé

Icônes sociales

Horloge numérique pour la maison

Modèle gratuit de page d'accueil

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS