:root {
    --material-bg: #202124;
    --material-border: #444;
    --matter-surface-rgb: 32, 33, 36;
    --matter-onsurface-rgb: 255, 255, 255;
}

.background {
    background-color: var(--material-bg);
}

.matter-switch {
    color: var(--theme-fg) !important;
}

.matter-button-contained:not(.settingsIcon, .symbolButton) {
    background-color: var(--theme-accent) !important;
    /* color: var(--theme-fg); */
}

.matter-button-outlined {
    color: var(--theme-accent) !important;
}

.matter-switch > input + span::before,
.matter-switch > input + span::after {
    background-color: var(--theme-secondary-fg) !important;
}

.matter-switch > input {
    background-color: var(--theme-secondary-bg) !important;
}

.matter-switch > input:checked + span::before,
.matter-switch > input:checked + span::after {
    background-color: var(--theme-accent) !important;
}

.matter-switch > input:checked {
    background-color: color-mix(
        in srgb,
        var(--theme-accent) 75%,
        black 25%
    ) !important;
}

.matter-button-outlined {
    color: var(--theme-accent) !important;
    border-color: var(--theme-border) !important;
}

.matter-button-outlined::before {
    background-color: color-mix(
        in srgb,
        var(--theme-accent) 75%,
        var(--theme-bg) 25%
    ) !important;
}

.matter-button-text {
    color: var(--theme-accent) !important;
}