.theme-switch {
    display: none;
}

label[for=theme-switch] {
    cursor: pointer;
}

.theme-switch:checked ~ .page {
    --text:                var(--light-text);
    --aside-text:          var(--light-aside-text);
    --p-background:        var(--light-p-bg);
    --s-background:        var(--light-s-bg);
    --link:                var(--light-link);
    --link-visited:        var(--light-link-visited);
    --link-hover:          var(--light-link-hover);
    --border:              var(--light-border);
    --button:              var(--light-button);
    --button-text:         var(--light-button-text);
    --button-hover:        var(--light-button-hover);
    --button-border:       var(--light-button-border);
    --search-text:         var(--light-search-text);
    --switch-icon:         var(--light-switch-icon);
    --switch-shadow-color: var(--light-switch-shadow);
    --switch-p-bg:         var(--light-switch-p-bg);
    --switch-s-bg:         var(--light-switch-s-bg);
    --switch-border:       var(--light-switch-border);
    --switch-transform:    var(--light-switch-transform);
}

.switch-label {
    display: inline-flex;
    width: 35px;
    height: 1rem;
    border-radius: 1rem;
    background-color: var(--switch-p-bg);
    align-items: center;
    align-content: center;
}

.switch-label::before {
    content: var(--switch-icon);
    position: relative;
    transition: text-shadow .2s;
    background: var(--switch-s-bg);
    border: 1px solid var(--switch-border);
    border-radius: 50%;
    transform: var(--switch-transform);
    width: 18px;
    height: 18px;
}

.theme-switch:focus ~ .page .switch-label::before,
.switch-label:hover::before {
    text-shadow: 0 0 15px var(--switch-shadow-color);
    transition: transform 0.25s;
}