:root[theme='light']{
    --card-bg-color: #e0e0e0;
    --card-img-bg-color: #bdbdbd;
    --primary-color: #2196f3;
    --primary-color-dark: #1565c0;
    --primary-color-raised-hover-solid: #90caf9;
    --primary-color-raised-focus-solid: #64b5f6;
}
:root[theme='dark'] {
    --card-bg-color: #37474f;
    --card-img-bg-color: #263238;

    --background-color: #121212;
    --surface-color: #242424;

    --font-color-main: rgba(255, 255, 255, 0.87);
    --font-color-medium: rgba(255, 255, 255, 0.60);
    --font-color-disabled: rgba(255, 255, 255, 0.38);

    --font-on-primary-color-main: rgba(0, 0, 0, 0.87);
    --font-on-primary-color-dark-main: rgba(255, 255, 255, 0.87);
    --font-on-primary-color-dark-medium: rgba(255, 255, 255, 0.60);
    --font-on-primary-color-medium: rgba(0, 0, 0, 0.56);
    --font-on-primary-color-disabled: rgba(0, 0, 0, 0.38);

    --hover-color: rgba(255, 255, 255, 0.04);
    --focus-color: rgba(255, 255, 255, 0.12);
    --focus-color-solid: #424242;

    --background-color-disabled: rgba(255, 255, 255, 0.12);
    --background-color-level-4dp: rgba(255, 255, 255, 0.09);
    --background-color-level-16dp-solid: #262626;
    --background-color-card: var(--surface-color);
    --background-color-slight-emphasis: rgba(255, 255, 255, 0.05);

    --separator-color: #424242; /* borders between components */

    --error-color: #CF6679;

    --slider-track-color: rgba(255, 255, 255, 0.26);
    --switch-thumb-off-color: #bababa;

    --primary-color: #2196f3;
    --primary-color-dark: #1565c0;
    --primary-color-numeric: 179, 157, 219;
    --primary-color-raised-hover-solid: #90caf9;
    --primary-color-raised-focus-solid: #64b5f6;

    --secondary-color: #CDDC39;
    --secondary-color-hover-solid: #DCEB48;
    --secondary-color-focus-solid: #F5FF61;

    --md_sys_color_on-surface: 230, 225, 229;
}

:root[theme='dark'] input {
    color-scheme: dark;
}