html[site-theme="light"] {
    --page-background-lighter: #fff;
    --page-background-darker: #eee;
    --text-color: #111;
}

html[site-theme="dark"] {
    --page-background-lighter: #252525;
    --page-background-darker: #222;
    --text-color: white;
}

/* Theme Classes */
.theme-background-lighter {
    background-color: var(--page-background-lighter);
}

.theme-background-darker {
    background-color: var(--page-background-darker);
}

.theme-section-background:nth-of-type(2n) { background-color: var(--page-background-lighter); }
.theme-section-background:nth-of-type(2n+1) { background-color: var(--page-background-darker); }

.theme-text-color {
    color: var(--text-color);
}

.theme-background-darker,
.theme-background-lighter,
.theme-text-color,
.theme-section-background {
    transition: background-color .3s ease,
                color .3s ease;
}