डार्क मोड टॉगल स्विच (सूर्य और चंद्रमा)

747 TheDoc

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

17 May 2024

एनिमेटेड होम और पंजीकरण लॉगिन फ़ॉर्म

28 August 2025

सौर पैनल स्थापना | सेवाएँ और कीमतें

2 September 2025

CSS एनिमेशन कंटेनर: अपवोट और पुरस्कार

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

अनुशंसित

एनिमेटेड होम और पंजीकरण लॉगिन फ़ॉर्म

सौर पैनल स्थापना | सेवाएँ और कीमतें

CSS एनिमेशन कंटेनर: अपवोट और पुरस्कार

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS