String$color-scheme: light !default;This defines the total color scheme for your app and can be either:
lightdarksystemSetting this value to system will default to a light theme unless the user has set their preferred color scheme to dark on their OS.
Boolean$disable-dark-elevation: $color-scheme == light !default;The dark elevation feature is generally recommended to keep enabled since it helps with visibility when your app is using the dark color scheme either through $color-scheme: dark or using the use-dark-theme mixin. When this feature is enabled, the background-color for surfaces will gradually become lighter the higher their z-value is with the material design box shadows.
If this is set to false, all surfaces will mimic the light theme and have a single surface color.
Boolean$disable-default-system-theme: false !default;Set this to true if you do not want the initial bundle to include the
@media (prefers-color-scheme: dark) styles.
Boolean$disable-default-root-theme: false !default;Set this to true if you do not want the initial bundle to include the
:root { ... variables ... } styles.
Boolean$disable-surface-color: false !default;This should only be used if your application does not use menu, dialog, sheet, card, expansion-panel, select, app-bar (theme="surface")
Boolean$disable-primary-color: false !default;Set to true if you don't want to create a primary color variable.
Boolean$disable-on-primary-color: $disable-primary-color !default;Set to true if you don't want to create a on-primary color variable.
Boolean$disable-secondary-color: false !default;Set to true if you don't want to create a secondary color variable.
Boolean$disable-on-secondary-color: $disable-secondary-color !default;Set to true if you don't want to create a on-secondary color variable.
Boolean$disable-warning-color: false !default;Set to true if you don't want to create a warning color variable.
Boolean$disable-on-warning-color: $disable-warning-color !default;Set to true if you don't want to create a on-warning color variable.
Boolean$disable-error-color: false !default;Set to true if you don't want to create a error color variable.
Boolean$disable-on-error-color: $disable-error-color !default;Set to true if you don't want to create a on-error color variable.
Boolean$disable-success-color: false !default;Set to true if you don't want to create a success color variable.
Boolean$disable-on-success-color: $disable-success-color !default;Set to true if you don't want to create a on-success color variable.
Boolean$disable-outline-grey-color: false !default;Set to true if you don't want to create a outline grey color variable.
Boolean$disable-text-primary-color: false !default;Set to true if you don't want to create a text-primary color variable.
Boolean$disable-text-secondary-color: false !default;Set to true if you don't want to create a text-secondary color variable.
Boolean$disable-text-hint-color: false !default;Set to true if you don't want to create a text-hint color variable.
Boolean$disable-text-disabled-color: false !default;Set to true if you don't want to create a text-disabled color variable.
Color $primary-color: colors.$blue-500 !default;The primary theme color to use throughout the app.
Color $on-primary-color: a11y.contrast-color($primary-color) !default;An accessible text color to use when the primary color is a background.
Color $secondary-color: colors.$orange-a-400 !default;The secondary theme color to use throughout the app.
Color $on-secondary-color: a11y.contrast-color($secondary-color) !default;An accessible text color to use when the secondary color is a background.
Color $warning-color: colors.$deep-orange-a-400 !default;The warning color to use throughout the app.
Color $on-warning-color: a11y.contrast-color($warning-color) !default;An accessible text color to use when the warning color is a background.
Color $error-color: colors.$red-500 !default;The error color to use throughout the app.
Color $on-error-color: a11y.contrast-color($error-color) !default;An accessible text color to use when the error color is a background.
Color $success-color: colors.$green-a-700 !default;The success color to use throughout the app.
Color $on-success-color: a11y.contrast-color($success-color) !default;An accessible text color to use when the success color is a background.
Number$outline-width: 0.0625em !default;The default outline-width to apply for focus, borders, etc
Color$outline-color: currentcolor !default;The color to use for the outline.
Color $outline-grey-color: #999 !default;The color to use when the outline should be grey.
Color $light-theme-inverse-color: colors.$black !default;The base inverse color to use when using the light theme. This should probably never be changed.
Color $light-theme-background-color: colors.$grey-50 !default;The root background color (html) when using the light theme.
Color $light-theme-surface-color: colors.$white !default;The background color to apply for surfaces/temporary elements when using the light theme. So things like dialogs and menus.
Color$light-theme-text-primary-color: rgba(
$light-theme-inverse-color,
0.87
) !default;The primary text color when using the light theme.
Color$light-theme-text-secondary-color: rgba(
$light-theme-inverse-color,
0.6
) !default;The secondary text color when using the light theme.
Color$light-theme-text-hint-color: rgba($light-theme-inverse-color, 0.38) !default;The hint text color when using the light theme.
Color$light-theme-text-disabled-color: rgba(
$light-theme-inverse-color,
0.38
) !default;The disabled text color when using the light theme.
Color $dark-theme-inverse-color: colors.$white !default;This should probably never be changed.
Color $dark-theme-background-color: #121212 !default;The background color to apply for surfaces/temporary elements when using the dark theme. So things like dialogs and menus.
Color$dark-theme-text-primary-color: rgba($dark-theme-inverse-color, 0.87) !default;The primary text color when using the dark theme.
Color$dark-theme-text-secondary-color: rgba($dark-theme-inverse-color, 0.6) !default;The secondary text color when using the dark theme.
Color$dark-theme-text-hint-color: rgba($dark-theme-inverse-color, 0.38) !default;The hint text color when using the dark theme.
Color$dark-theme-text-disabled-color: rgba($dark-theme-inverse-color, 0.38) !default;The disabled text color when using the dark theme.
Color $background-color: get-default-color(
$light-theme-background-color,
$dark-theme-background-color
) !default;The default background color
Color $surface-color: get-default-color(
$light-theme-surface-color,
$dark-theme-surface-color
) !default;The default surface color
Color$text-primary-color: get-default-color(
$light-theme-text-primary-color,
$dark-theme-text-primary-color
) !default;The default text primary color
Color$text-secondary-color: get-default-color(
$light-theme-text-secondary-color,
$dark-theme-text-secondary-color
) !default;The default text secondary color
Color$text-hint-color: get-default-color(
$light-theme-text-hint-color,
$dark-theme-text-hint-color
) !default;The default text hint color
Color$text-disabled-color: get-default-color(
$light-theme-text-disabled-color,
$dark-theme-text-disabled-color
) !default;The default text disabled color
Color $inverse-color: get-default-color(
$light-theme-inverse-color,
$dark-theme-inverse-color
) !default;This should probably never be changed.
Map$default-dark-elevation-colors: (
0: $dark-theme-background-color,
1: #1f1f1f,
2: #242424,
3: #262626,
4: #282828,
5: #282828,
6: #2c2c2c,
7: #2c2c2c,
8: #2f2f2f,
9: #2f2f2f,
10: #2f2f2f,
11: #2f2f2f,
12: #333,
13: #333,
14: #333,
15: #333,
16: #353535,
17: #353535,
18: #353535,
19: #353535,
20: #353535,
21: #353535,
22: #353535,
23: #353535,
24: #383838,
);This is a Map for all the supported material design elevations (0 - 24) and the background color to use for that elevation. Check out
$dark-elevation-colors and $custom-dark-elevation-colors for how to change these values.;
Map$custom-dark-elevation-colors: () !default;This Map can be used to override the $default-dark-elevation-colors
with new values if you only want to change a few values.
@use "@react-md/core" with (
$custom-dark-elevation-colors: (
1: #000,
2: #1f1f1f,
)
);Map$dark-elevation-colors: map.merge(
$default-dark-elevation-colors,
$custom-dark-elevation-colors
) !default;This Map can be used to completely configure the dark elevation colors and remove unused elevations.
Elevations:
@use "@react-md/core" with (
$dark-elevation-colors: (
0: #121212,
1: #1f1f1f,
2: #242424,
4: #282828,
8: #2f2f2f,
12: #333,
16: #353535,
)
);List$theme-variables: (
background-color,
on-background-color,
surface-color,
primary-color,
on-primary-color,
secondary-color,
on-secondary-color,
warning-color,
on-warning-color,
success-color,
on-success-color,
error-color,
on-error-color,
text-primary-color,
text-secondary-color,
text-hint-color,
text-disabled-color,
outline-width,
outline-color,
outline-grey-color,
inverse-color
);The available configurable css variables and mostly used internally for the
get-var, set-var, and use-var utils.
mixin@mixin set-dark-elevation-color($z-value, $value) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$z-value | The dark elevation value | Number | — |
$value | The value to set | String | — |
mixin@mixin theme-set-var($name, $value-or-theme-name) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$value-or-theme-name | The value to set the variable to.
Supports | any | — |
mixin@mixin theme-use-var($property, $name, $fallback: null) { … }mixin@mixin use-light-theme-elevation-colors { … }This makes it so that the dark elevation colors are not applied when using the light theme.
mixin@mixin use-dark-theme-elevation-colors { … }This applies all the dark elevation colors for the dark theme.
mixin@mixin use-light-theme-colors { … }Creates all the css variables for the light theme respecting feature flags
mixin@mixin use-dark-theme-colors { … }Creates all the css variables for the dark theme respecting feature flags
mixin@mixin theme-variables { … }Creates all the default theme css variables respecting feature flags
mixin@mixin create-surface($z-value, $disable-colors: $disable-dark-elevation) { … }Creates a new theme surface by conditionally updating theme background and text colors for the elevation.
mixin@mixin default-system-theme { … }Generates the default @media (prefers-color-scheme: dark) styles if the
$disable-default-system-theme and $disable-default-root-theme are both
false and the $color-scheme has been set to system.
function@function get-default-color($light-color, $dark-color) { … }Used to provide the correct color based on the $color-scheme setting.
ColorThe correct color depending on the $color-scheme
| Name | Description | Type | Default Value |
|---|---|---|---|
$light-color | The light theme color | Color | — |
$dark-color | The dark theme color | Color | — |
function@function is-theme-color-var($value) { … }This is mostly used internally to prevent applying default theme variables to other elements so they don't need to be overwritten as well when changing the theme for a part of the app.
So this is used when a variable is set in the generic @mixin variables
call and then later used in a get-var/set-var call with the
theme-color-var-fallback function.
Booleantrue if the provided value is one of the
theme-get-var() results without any fallback provided
function@function theme-color-var-fallback($value) { … }See the is-theme-color-var for info.
anythe $value if it was theme var, otherwise null
function@function get-dark-elevation-color($z-value) { … }Stringthe dark elevation color var
function@function theme-get-var($name, $fallback: null) { … }Stringa var() statement
| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$fallback | An optional fallback value | any | null |
function@function get-swatch($color, $swatch, $accent: false, $fallback-color: null, $fallback-name: null) { … }This is used to get another material design color with a different swatch or accent.
Color|nullThe swatch or fallback color
Invalid fallback color: