Webleb - Snippets de Código - Interruptor de alternância do modo escuro (sol e lua)

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 alternância do modo escuro (sol e lua)

Recomendado

Carrossel de Portfólio com Deslizadores Sincronizados

Cursor pegajoso

Login do cartão

HTML

CSS

JS

Recomendado

Carrossel de Portfólio com Deslizadores Sincronizados

Cursor pegajoso

Login do cartão

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS