Hotodogo | Snippets: Theme Switcher

:root {
    --primary-color: #302AE6;
    --secondary-color: #536390;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
}

[data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: #161625;
    --heading-color: #818cab;
}

body {
    font-family: sans-serif;
    background-color: var(--bg-color);
    color: var(--font-color);
    max-width: 90%;
    margin: 0 auto;
    font-size: 18px;
}

section {
    width: 50%;
    margin: 0 auto;
}

h1 {
    color: var(--heading-color);
    font-size: 2rem;
    margin-bottom: 1vh;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    font-weight: bold;
}

a:hover,
a:focus {
    border-bottom: 3px solid currentColor;
}

nav {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
}

/*slider switch css */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
}

.theme-switch-wrapper em {
    margin-left: 10px;
    font-size: 1rem;
}

.theme-switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}

.switch,
input[type=checkbox] {
    position: relative;
    display: grid;
    height: 26px;
    aspect-ratio: 2 / 1;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    border: 0; 
    appearance: none; -webkit-appearance: none;
}

.switch::before,
.switch::after,
input[type=checkbox]::before,
input[type=checkbox]::after  {
    transition: all 150ms linear;
    grid-area: 1/1;
	pointer-events: none;
    border-radius: 99999999px;
}

.switch::after,
input[type=checkbox]::after {
    content: "";
    background-color: #fff;
    position: absolute;
    bottom: 4px;
    left: 4px;
    height: calc(100% - 8px);
    aspect-ratio: 1 / 1;
}

.switch::before,
input[type=checkbox]::before {
    content: "";
    background-color: #ccc;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
}

.switch::after,
input[type=checkbox]:checked::after {
    left: unset;
    right: 4px;
}

.switch::before,
input[type=checkbox]:checked::before {
    background-color: #66bb6a;
}

CSS Before Head

<script src="https://caveops.com/static/packages/freedom/1.0.0/freedom.js"></script>

HTML Head

CSS After Head

JS Before HTML Body

<div class="container">
    <nav>
        <div class="theme-switch-wrapper">
            <label class="theme-switch" for="checkbox">
                <input type="checkbox" id="checkbox" />
            </label>
            <em>Switch Theme</em>
        </div>
    </nav>
    <section>
        <article class="post">
            <h1 class="title">loCillum amet enim ex ut nostrud mollit nostrud culpa labore adipisicing est.</h1>
            <p class="content">Voluptate culpa id fugiat exercitation aliquip sunt do dolore excepteur ex officia irure ex irure. Enim do non ea incididunt sint. Consequat ex laboris velit enim deserunt nisi exercitation enim aute eiusmod anim. Est velit elit ad labore. Minim aliqua dolor velit in minim velit adipisicing. Lorem quis est exercitation et laborum cupidatat laboris consequat. Deserunt sunt excepteur reprehenderit anim.</p>
        </article>
    </section>
</div>

HTML Body

HTML Foot

$(function () {
    var setTheme = function(theme) {
        $(document.documentElement).attr('data-theme', theme ?? 'light');
        localStorage.setItem('theme', theme ?? 'light');
    }
    setTheme(localStorage.getItem('theme') ?? 'light');
    $('#checkbox').prop('checked', localStorage.getItem('theme') === 'dark');
    $('#checkbox').on('change', function() {
        setTheme($('#checkbox').prop('checked') ? 'dark' : 'light');
    });
});

JS After HTML Body