styles/material.css
:root {
--mdc-theme-primary: var(--primary);
--mdc-theme-secondary: var(--primary);
--mdc-theme-background: var(--background);
--mdc-theme-surface: var(--background);
--mdc-theme-error: var(--error);
--mdc-theme-on-primary: var(--on-primary);
--mdc-theme-on-secondary: var(--on-primary);
--mdc-theme-on-background: var(--on-background);
--mdc-theme-on-surface: var(--on-background);
--mdc-theme-on-error: var(--on-error);
--mdc-theme-text-primary-on-background: var(--on-background-6);
--mdc-theme-text-secondary-on-background: var(--on-background-4);
--mdc-theme-text-hint-on-background: var(--on-background-3);
--mdc-theme-text-disabled-on-background: var(--on-background-3);
--mdc-theme-text-icon-on-background: var(--on-background-3);
--mdc-theme-text-primary-on-light: var(--on-background-6);
--mdc-theme-text-secondary-on-light: var(--on-background-4);
--mdc-theme-text-hint-on-light: var(--on-background-3);
--mdc-theme-text-disabled-on-light: var(--on-background-3);
--mdc-theme-text-icon-on-light: var(--on-background-3);
--mdc-theme-text-primary-on-dark: var(--on-background-6);
--mdc-theme-text-secondary-on-dark: var(--on-background-4);
--mdc-theme-text-hint-on-dark: var(--on-background-3);
--mdc-theme-text-disabled-on-dark: var(--on-background-3);
--mdc-theme-text-icon-on-dark: var(--on-background-3);
}
.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title,
.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions {
border-color: var(--on-background-2);
}
.mdc-dialog .mdc-dialog__title {
color: var(--on-background-6);
}
.mdc-dialog .mdc-dialog__content {
color: var(--on-background-5);
}
.mdc-radio
.mdc-radio__native-control:enabled:not(:checked)
+ .mdc-radio__background
.mdc-radio__outer-circle {
border-color: var(--on-background-4);
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled)
.mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled)
.mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled)
.mdc-notched-outline__trailing {
border-color: var(--on-background-3);
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover
.mdc-notched-outline
.mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover
.mdc-notched-outline
.mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover
.mdc-notched-outline
.mdc-notched-outline__trailing {
border-color: var(--on-background-6);
}
.mdc-text-field--textarea:not(.mdc-text-field--disabled)
.mdc-notched-outline__leading,
.mdc-text-field--textarea:not(.mdc-text-field--disabled)
.mdc-notched-outline__notch,
.mdc-text-field--textarea:not(.mdc-text-field--disabled)
.mdc-notched-outline__trailing {
border-color: var(--on-background-3);
}
.mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover
.mdc-notched-outline
.mdc-notched-outline__leading,
.mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover
.mdc-notched-outline
.mdc-notched-outline__notch,
.mdc-text-field--textarea:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover
.mdc-notched-outline
.mdc-notched-outline__trailing {
border-color: var(--on-background-6);
}
.mdc-text-field:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid)
.mdc-floating-label {
color: var(--on-background-5);
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
color: var(--on-background-6);
}
.mdc-text-field:not(.mdc-text-field--disabled)
.mdc-text-field__input::placeholder {
color: var(--on-background-4);
}
.mdc-text-field--focused:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid)
.mdc-floating-label {
color: var(--primary-6);
}
.mdc-text-field--disabled .mdc-text-field__input {
color: var(--on-background-3);
}
.mdc-text-field--outlined.mdc-text-field--disabled
.mdc-notched-outline__leading,
.mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline__notch,
.mdc-text-field--outlined.mdc-text-field--disabled
.mdc-notched-outline__trailing {
border-color: var(--on-background-1);
}
.mdc-text-field--disabled .mdc-floating-label {
color: var(--on-background-3);
}
.mdc-text-field:not(.mdc-text-field--disabled)
+ .mdc-text-field-helper-line
.mdc-text-field-helper-text {
color: var(--on-background-5);
}
.mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate)
~ .mdc-checkbox__background {
border-color: var(--on-background-4);
}
.mdc-chip {
color: var(--on-background-6);
background-color: var(--chip-background);
}
.mdc-chip__icon {
color: var(--on-background-4);
}
.mdc-chip__icon:hover {
color: var(--on-background-5);
}
.mdc-chip__icon svg {
width: 100%;
height: 100%;
fill: var(--on-background-4);
}
.mdc-chip__icon svg:hover {
fill: var(--on-background-5);
}
.mdc-chip__checkmark-path {
stroke: var(--on-background);
}
.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__leading,
.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__notch,
.mdc-select--outlined:not(.mdc-select--disabled)
.mdc-notched-outline__trailing {
border-color: var(--on-background-3);
}
.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused)
.mdc-select__selected-text:hover
~ .mdc-notched-outline
.mdc-notched-outline__leading,
.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused)
.mdc-select__selected-text:hover
~ .mdc-notched-outline
.mdc-notched-outline__notch,
.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused)
.mdc-select__selected-text:hover
~ .mdc-notched-outline
.mdc-notched-outline__trailing {
border-color: var(--on-background-6);
}
.mdc-select:not(.mdc-select--disabled):not(.mdc-select--invalid)
.mdc-floating-label {
color: var(--on-background-5);
}
.mdc-select--focused:not(.mdc-select--disabled):not(.mdc-select--invalid)
.mdc-floating-label {
color: var(--primary-6);
}
.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__leading,
.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__notch,
.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__trailing {
border-color: var(--on-background-1);
}
.mdc-select--disabled .mdc-floating-label {
color: var(--on-background-3);
}
.mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text {
color: var(--on-background-6);
}
.mdc-menu .mdc-list {
color: var(--on-background-6);
}
.mdc-list {
color: var(--on-background-6);
}
.mdc-data-table__header-cell {
color: var(--on-background-6);
}
.mdc-data-table__cell {
color: var(--on-background-6);
}
.mdc-data-table__header-row-checkbox
.mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate)
~ .mdc-checkbox__background,
.mdc-data-table__row-checkbox
.mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate)
~ .mdc-checkbox__background {
border-color: var(--on-background-4);
}
.mdc-data-table {
border-color: var(--on-background-2);
}
.mdc-data-table__row {
border-top-color: var(--on-background-2);
}
.mdc-button--outlined:not(:disabled) {
border-color: var(--on-background-2);
}
.mdc-button:disabled {
color: var(--on-background-3);
}
.mdc-button--outlined:disabled {
border-color: var(--on-background-2);
}
.mdc-button--raised:disabled,
.mdc-button--unelevated:disabled {
background-color: var(--on-background-2);
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
background-color: var(--on-background);
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
background-color: var(--background);
border-color: var(--background);
}
.mdc-snackbar {
margin: 24px;
}
.mdc-snackbar__action::before,
.mdc-snackbar__action::after {
background-color: var(--primary);
}
.mdc-snackbar__action:not(:disabled) {
color: var(--primary);
}
.mdc-snackbar__surface {
background-color: var(--snackbar-background);
}
.mdc-snackbar__label {
color: var(--snackbar-on-background);
}