<link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];400;500;600;700&display=swap" rel="stylesheet">
   <div class="logo">
        <a href="https://codeorum.com/" class="codeorum"><img alt="codeorum" src="https://codeorum.com/images/codeorum-logo-dark.svg"></a>
        <a href="https://zovko.pro/" class="mirko-zovko"><img alt="mirko-zovko" src="https://codeorum.com/images/zovko-logo-dark.svg"></a>
      </div>
    <div class="container">
        <h1>Dark mode in css switcher example</h1>

        <!-- Theme swither with custom design, icons and animation -->
        <label class="theme-switcher" for="themeswitch">
            <div class="background"></div>
            <input type="checkbox" id="themeswitch">
            <div class="switch">
                <img class="sun" src="https://codeorum.com/images/article_images/150/20201011T160248_150.png">
                <img class="moon" src="https://codeorum.com/images/article_images/150/20201011T160425_150.png">
            </div> 
        </label>

        <div class="cards">

            <div class="card">
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, voluptas.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis saepe illum perspiciatis nisi. Iure omnis quidem hic delectus cumque dolor sunt error praesentium ullam laudantium?</p>
            </div>
            <div class="card image">
                <img src="https://codeorum.com/images/article_images/300/20201011T160247_300.png" alt="">
            </div>
            <div class="card image">
                <img src="https://codeorum.com/images/article_images/300/20201011T160247_300.png" alt="">
            </div>
            <div class="card">
                <h2>Lorem ipsum dolor sit.</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur perspiciatis tempore necessitatibus reiciendis accusamus laborum illum ut atque enim quisquam?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae necessitatibus exercitationem sint officiis voluptas?</p>
            </div>


        </div>

    </div>

// root, start css variables (in our case light theme)
:root {
    --bg: #f8f8f8;
    --card-bg: #edeff3;
    --title-color: #262662;
    --subtitle-color: #363636;
    --text-color: #464646;
    --input-back: #ddd;
    --input-color: #c9da8a;
}

// dark theme css variables
[data-theme="dark"] {
    --bg: #232130;
    --card-bg: #3c3650;
    --title-color: #89aeff;
    --subtitle-color: #89aeff;
    --text-color: #68608b;
    --input-back: #161616;
    --input-color: #294797;
}


body{
    margin: 0;
    padding: 0;
    background: var(--bg);
    font-family: 'Quicksand', sans-serif;
    color: #262626;
    transition: all 0.2s ease-in-out;
}
*{
    box-sizing: border-box;
}
.container{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 10px 100px 10px;
    h1{
        text-align: center;
        margin-bottom: 30px;
        font-weight: 500;
        color: var(--title-color);
    }
    h2{
        font-weight: 500;
        color: var(--subtitle-color);
    }
    p{
        font-weight: 300;
        font-size: 16px;
        color: var(--text-color);
    }
}
.cards{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 50px;
    justify-content: space-between;
}
.card{   
    padding: 20px;
    width: 48%;
    margin-bottom: 60px;
    border-radius: 6px;
    min-height: 300px;
    
    &.image{
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        background-color: var(--card-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            width: 50%;
            height: auto;
        }
    }
}

.theme-switcher{
    width: 50px;
    height: 20px;
    position: relative;
    cursor: pointer;
    margin: 0 auto;
    .background{
        width: 50px;
        height: 20px;
        background-color: var(--input-back);
        border-radius: 30px;
    }
    .switch{
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        height: 30px;
        width: 30px;
        background-color: var(--input-color);
        position: absolute;
        top: -5px;
        left: 0px;
        border-radius: 50%;
        transition: all 0.2s ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            width: 60%;
            height: auto;
            position: absolute;
            transition: all 0.2s ease-in-out;
        }
        .sun{
            opacity: 1;
        }
        .moon{
            opacity: 0;
        }
    }
    input{
        display: none;
        &:checked + .switch {
            left: 20px;
            .sun{
                opacity: 0;
            }
            .moon{
                opacity: 1;
            }
        }
    }
}





.logo {
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    left: 10px;
    top: 10px;
    flex-direction: row;
    z-index: 1000;
    
    a {
        display: block;
        height: 30px;
        width: auto;
        cursor: pointer;
        margin-right: 10px;
        img {
            height: 100%;
            width: auto;
        }
    }
  }

// checkbox input value
var themeSwitcher = document.querySelector('.theme-switcher input');
// get current theme from localStorage
var currentTheme = localStorage.getItem('theme');

// check what is current theme right now and activate it
if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
    if (currentTheme === 'dark') {
        themeSwitcher.checked = true;
    }
}

// swithc between themes
function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    }
    else {        
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light');
    }    
}

// event listener on checkbox change
themeSwitcher.addEventListener('change', switchTheme, false);