[data-theme-color='dark'] {
    color-scheme: dark;
    --contrast: 0;
    --hue: 233;
    --accent-hue: 240;
    --accent2-hue: 202;
    --special-hue: 233;
    --special2-hue: 218;
    --text-color-white: hsl(0, 0%, 100%);
    --text-color-black: hsl(0, 0%, 5%);
    --text-color-normal: hsl(var(--hue), 7%, 50%);
    --text-color-medium: hsl(var(--hue), 7%, 60%);
    --text-color-light: hsl(var(--hue), 7%, 75%);
    --text-color-lighter: hsl(var(--hue), 7%, 85%);
    --text-color-high-contrast: hsl(var(--contrast), 0%, 95%);
    --text-color-richer: hsl(var(--hue), 50%, 72%);
    --text-color-highlight: hsl(var(--accent-hue), 4%, 95%);
    --text-color-highlight-a: hsl(var(--accent2-hue), 64%, 60%);
    --text-color-navigation: hsl(var(--hue), 7%, 60%);
    --text-color-navigation-highlight: hsl(var(--hue), 7%, 85%);
    --text-search-highlight: yellow;
    --background: hsl(var(--hue), 19%, 17%);
    --background-content: hsl(var(--hue), 23%, 5%);
    --background-content-element : hsl(var(--hue), 23%, 9%);
    --background-filter: hsl(var(--hue), 23%, 14%);
    --background-navigation: hsl(var(--hue), 23%, 9%);
    --background-navigation-top: hsl(var(--hue), 23%, 4%);
    --background-navigation-top-lightblue: hsl(var(--special2-hue), 69%, 44%);
    --background-navigation-top-blue: hsl(var(--special2-hue), 69%, 29%);
    --background-navigation-top-darkblue: hsl(var(--special2-hue), 69%, 24%);
    --background-navigation-sticky: hsl(var(--hue), 23%, 16%);
    --background-menu: hsl(var(--hue), 23%, 11%);
    --background-superlowlight: hsl(var(--hue), 23%, 8%);
    --background-lowlight: hsl(var(--hue), 23%, 9%);
    --background-highlight: hsl(var(--hue), 19%, 17%);
    --background-progress: hsl(var(--special2-hue), 69%, 52%);
    --background-progress-mediumlight: hsla(var(--special2-hue), 69%, 52%, 0.2);
    --background-progress-semilight: hsla(var(--special2-hue), 69%, 80%, 0.1);
    --background-autofill: hsla(var(--special2-hue), 69%, 52%, 0.2);
    --table-selectable: #164187; /* hsla(var(--special2-hue), 69%, 52%, 0.2); */
    --table-selected: hsla(var(--special2-hue), 69%, 12%);
    --background-dark: hsl(var(--hue), 19%, 17%);
    --background-active: limegreen;
    --background-active-section: hsl(var(--special2-hue), 69%, 29%);
    --border-color: hsl(var(--hue), 19%, 21%);
    --border-color-semilight: hsla(var(--hue), 19%, 100%, 0.04);
    --border-color-light: hsla(var(--hue), 19%, 100%, 0.08);
    --border-color-lowlight: hsl(var(--hue), 19%, 17%);
    --border-color-superlowlight: hsl(var(--special2-hue), 8%, 17%);
    --border-color-highlight: hsl(var(--special2-hue), 69%, 52%);
    --scrollbar-thumb: hsl(var(--hue), 5%, 35%);
    --box-shadow-color: hsl(var(--hue), 7%, 0%);
    --separator: hsl(var(--hue), 7%, 55%);
}

[data-theme-color='light'] {
    color-scheme: light;
    --contrast: 0;
    --hue: 180;
    --special-hue: 208;
    --special2-hue: 229;
    --progress-hue: 120;
    --text-color-white: hsl(0, 0%, 100%);
    --text-color-black: hsl(0, 0%, 5%);
    --text-color-normal: hsl(var(--hue), 0%, 10%);
    --text-color-medium: hsl(var(--hue), 0%, 20%);
    --text-color-light: hsl(var(--hue), 7%, 25%);
    --text-color-lighter: hsl(var(--hue), 7%, 5%);
    --text-color-high-contrast: hsl(var(--contrast), 0%, 5%);
    --text-color-navigation: hsl(var(--special2-hue), 7%, 25%);
    --text-color-navigation-highlight:hsl(var(--hue), 7%, 100%);
    --text-color-highlight-a: hsl(var(--special2-hue), 100%, 50%);
    --text-search-highlight: royalblue;
    --background: hsl(var(--hue), 27.3%, 97.1%);
    --background-content: hsl(var(--hue), 0%, 98%);
    --background-content-element : hsl(var(--hue), 0%, 94%);
    --background-filter: hsl(var(--hue), 17%, 18%);
    --background-navigation: hsl(var(--contrast), 0%, 90%);
    --background-navigation-top: hsl( var(--contrast), 0%, 100%);
    --background-navigation-top-lightblue: hsl(var(--special-hue), 69%, 42%);
    --background-navigation-top-blue: hsl(var(--special-hue), 69%, 29%);
    --background-navigation-top-darkblue: hsl(var(--special-hue), 69%, 24%);
    --background-navigation-sticky: hsl(var(--contrast), 0%, 97%);
    --background-menu: hsl(var(--contrast), 0%, 95%);
    --background-superlowlight: hsl(var(--hue), 8%, 40%);
    --background-lowlight: hsl(var(--contrast), 0%, 99%);
    --background-highlight: hsl(var(--special-hue), 84%, 50%);
    --background-dark: hsl(var(--special2-hue), 19%, 17%);
    --background-progress: hsl(var(--special-hue), 69%, 40%);
    --background-progress-mediumlight: hsla(var(--special2-hue), 69%, 40%, 0.6);
    --background-progress-semilight:  hsl(var(--contrast), 0%, 90%);
    --background-active: forestgreen;
    --background-active-section: hsl(var(--special-hue), 69%, 32%);
    --background-autofill: lightyellow;
    --table-selectable: #e4e7e7; /* hsl(var(--hue), 5%, 90%);    /*  */
    --table-selected: #eceeee; /* hsl(var(--hue), 5%, 93%);      /*  */
    --border-color: hsla(var(--special2-hue), 84%, 20%, 0.25);
    --border-color-semilight: hsla(var(--special2-hue), 84%, 20%, 0.08);
    --border-color-light: hsla(var(--special2-hue), 84%, 20%, 0.04);
    --border-color-lowlight: hsl(var(--hue), 19%, 17%);
    --border-color-superlowlight: hsl(var(--special2-hue), 4%, 50%);
    --border-color-highlight: hsl(202, 69%, 52%);
    --scrollbar-thumb: hsl(var(--hue), 13%, 73%);
    --box-shadow-color: hsla(var(--contrast), 0%, 0%, 0.3);
    --separator: hsl(var(--hue), 7%, 65%);
}