:root,
html[data-theme="vesper"] {
    --theme-name: "vesper";
    --color-level-1: #ede6dc;
    --color-level-2: #8a9aaa;
    --color-level-3: #c8a96e;
    --color-level-4: #8c7b6b;
    --color-level-5: #2a2118;
}

html[data-theme="somei"] {
    --theme-name: "somei";
    --color-level-1: #e4ede6;
    --color-level-2: #8aa89a;
    --color-level-3: #7fa68a;
    --color-level-4: #5c7a68;
    --color-level-5: #1a2420;
}

html[data-theme="eventide"] {
    --theme-name: "eventide";
    --color-level-1: #d8dce8;
    --color-level-2: #7a8ba8;
    --color-level-3: #8a7a9b;
    --color-level-4: #3a4560;
    --color-level-5: #0e1220;
}

html[data-theme="firn"] {
    --theme-name: "firn";
    --color-level-1: #e8f0f5;
    --color-level-2: #a8c0d0;
    --color-level-3: #7aafc4;
    --color-level-4: #6a8fa8;
    --color-level-5: #162028;
}

body {
    color: var(--color-level-1);
}

html[data-theme="vesper"] .theme-switcher [data-theme="vesper"],
html[data-theme="somei"] .theme-switcher [data-theme="somei"],
html[data-theme="eventide"] .theme-switcher [data-theme="eventide"],
html[data-theme="firn"] .theme-switcher [data-theme="firn"] {
    border-color: rgba(138, 154, 170, 0.7);
    opacity: 1;
}