String$color-scheme: light !default;Boolean$disable-dark-elevation: $color-scheme == light !default;Boolean$disable-default-system-theme: false !default;Boolean$disable-default-root-theme: false !default;Boolean$disable-surface-color: false !default;Boolean$disable-primary-color: false !default;Boolean$disable-on-primary-color: $disable-primary-color !default;Boolean$disable-secondary-color: false !default;Boolean$disable-on-secondary-color: $disable-secondary-color !default;Boolean$disable-warning-color: false !default;Boolean$disable-on-warning-color: $disable-warning-color !default;Boolean$disable-error-color: false !default;Boolean$disable-on-error-color: $disable-error-color !default;Boolean$disable-success-color: false !default;Boolean$disable-on-success-color: $disable-success-color !default;Boolean$disable-outline-grey-color: false !default;Boolean$disable-text-primary-color: false !default;Boolean$disable-text-secondary-color: false !default;Boolean$disable-text-hint-color: false !default;Boolean$disable-text-disabled-color: false !default;Color $primary-color: colors.$blue-500 !default;Color $on-primary-color: a11y.contrast-color($primary-color) !default;Color $secondary-color: colors.$orange-a-400 !default;Color $on-secondary-color: a11y.contrast-color($secondary-color) !default;Color $warning-color: colors.$deep-orange-a-400 !default;Color $on-warning-color: a11y.contrast-color($warning-color) !default;Color $error-color: colors.$red-500 !default;Color $on-error-color: a11y.contrast-color($error-color) !default;Color $success-color: colors.$green-a-700 !default;Color $on-success-color: a11y.contrast-color($success-color) !default;Number$outline-width: 0.0625em !default;Color$outline-color: currentcolor !default;Color $outline-grey-color: #999 !default;Color $light-theme-inverse-color: colors.$black !default;Color $light-theme-background-color: colors.$grey-50 !default;Color $light-theme-surface-color: colors.$white !default;Color$light-theme-text-primary-color: rgba(
$light-theme-inverse-color,
0.87
) !default;Color$light-theme-text-secondary-color: rgba(
$light-theme-inverse-color,
0.6
) !default;Color$light-theme-text-hint-color: rgba($light-theme-inverse-color, 0.38) !default;Color$light-theme-text-disabled-color: rgba(
$light-theme-inverse-color,
0.38
) !default;Color $dark-theme-inverse-color: colors.$white !default;Color $dark-theme-background-color: #121212 !default;Color $dark-theme-surface-color: if(
$disable-dark-elevation,
colors.$grey-800,
null
) !default;Color$dark-theme-text-primary-color: rgba($dark-theme-inverse-color, 0.87) !default;Color$dark-theme-text-secondary-color: rgba($dark-theme-inverse-color, 0.6) !default;Color$dark-theme-text-hint-color: rgba($dark-theme-inverse-color, 0.38) !default;Color$dark-theme-text-disabled-color: rgba($dark-theme-inverse-color, 0.38) !default;Color $background-color: get-default-color(
$light-theme-background-color,
$dark-theme-background-color
) !default;Color $surface-color: get-default-color(
$light-theme-surface-color,
$dark-theme-surface-color
) !default;Color$text-primary-color: get-default-color(
$light-theme-text-primary-color,
$dark-theme-text-primary-color
) !default;Color$text-secondary-color: get-default-color(
$light-theme-text-secondary-color,
$dark-theme-text-secondary-color
) !default;Color$text-hint-color: get-default-color(
$light-theme-text-hint-color,
$dark-theme-text-hint-color
) !default;Color$text-disabled-color: get-default-color(
$light-theme-text-disabled-color,
$dark-theme-text-disabled-color
) !default;Color $inverse-color: get-default-color(
$light-theme-inverse-color,
$dark-theme-inverse-color
) !default;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,
);Map$custom-dark-elevation-colors: () !default;@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;@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: (
inverse-color,
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
);mixin@mixin set-dark-elevation-color($z-value, $value) { … }mixin@mixin theme-set-var($name, $value-or-theme-name) { … }mixin@mixin theme-use-var($property, $name, $fallback: null) { … }mixin@mixin use-light-theme-elevation-colors { … }mixin@mixin use-dark-theme-elevation-colors { … }mixin@mixin use-light-theme-colors { … }mixin@mixin use-dark-theme-colors { … }mixin@mixin theme-variables { … }mixin@mixin create-surface($z-value, $disable-colors: $disable-dark-elevation) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$z-value | Number | — | |
$disable-colors | Boolean | $disable-dark-elevation |
mixin@mixin default-system-theme { … }function@function get-default-color($light-color, $dark-color) { … }Colorfunction@function is-theme-color-var($value) { … }Booleanfunction@function theme-color-var-fallback($value) { … }anyfunction@function get-dark-elevation-color($z-value) { … }Stringfunction@function theme-get-var($name, $fallback: null) { … }Stringfunction@function get-swatch($color, $swatch, $accent: false, $fallback-color: null, $fallback-name: null) { … }Color|null| Name | Description | Type | Default Value |
|---|---|---|---|
$color | String | — | |
$swatch | Number | — | |
$accent | Boolean | false | |
$fallback-color | Color|null | null | |
$fallback-name | String | null |
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.
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.
Set this to true if you do not want the initial bundle to include the
@media (prefers-color-scheme: dark) styles.
Set this to true if you do not want the initial bundle to include the
:root { ... variables ... } styles.
This should only be used if your application does not use menu, dialog, sheet, card, expansion-panel, select, app-bar (theme="surface")
Set to true if you don't want to create a primary color variable.
Set to true if you don't want to create a on-primary color variable.
Set to true if you don't want to create a secondary color variable.
Set to true if you don't want to create a on-secondary color variable.
Set to true if you don't want to create a warning color variable.
Set to true if you don't want to create a on-warning color variable.
Set to true if you don't want to create a error color variable.
Set to true if you don't want to create a on-error color variable.
Set to true if you don't want to create a success color variable.
Set to true if you don't want to create a on-success color variable.
Set to true if you don't want to create a outline grey color variable.
Set to true if you don't want to create a text-primary color variable.
Set to true if you don't want to create a text-secondary color variable.
Set to true if you don't want to create a text-hint color variable.
Set to true if you don't want to create a text-disabled color variable.
The primary theme color to use throughout the app.
An accessible text color to use when the primary color is a background.
The secondary theme color to use throughout the app.
An accessible text color to use when the secondary color is a background.
The warning color to use throughout the app.
An accessible text color to use when the warning color is a background.
The error color to use throughout the app.
An accessible text color to use when the error color is a background.
The success color to use throughout the app.
An accessible text color to use when the success color is a background.
The default outline-width to apply for focus, borders, etc
The color to use for the outline.
The color to use when the outline should be grey.
The base inverse color to use when using the light theme. This should probably never be changed.
The root background color (html) when using the light theme.
The background color to apply for surfaces/temporary elements when using the light theme. So things like dialogs and menus.
The primary text color when using the light theme.
The secondary text color when using the light theme.
The hint text color when using the light theme.
The disabled text color when using the light theme.
This should probably never be changed.
The background color to apply for surfaces/temporary elements when using the dark theme. So things like dialogs and menus.
The default surface background color to apply for surfaces/temporary elements when using the dark theme.
This value is a bit different than the light theme variant since dark mode supports an "elevation mode" where each surface gains a different background color depending on its elevation.
The primary text color when using the dark theme.
The secondary text color when using the dark theme.
The hint text color when using the dark theme.
The disabled text color when using the dark theme.
The default background color
The default surface color
The default text primary color
The default text secondary color
The default text hint color
The default text disabled color
This should probably never be changed.
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.;
This Map can be used to override the $default-dark-elevation-colors
with new values if you only want to change a few values.
This Map can be used to completely configure the dark elevation colors and remove unused elevations.
Elevations:
The available configurable css variables and mostly used internally for the
get-var, set-var, and use-var utils.
The dark elevation value
The value to set
The supported variable name
The value to set the variable to.
Supports null which will just be a no-op.
The css property to apply the variable to
The supported variable name
An optional fallback value if the variable has not been set
This makes it so that the dark elevation colors are not applied when using the light theme.
This applies all the dark elevation colors for the dark theme.
Creates all the css variables for the light theme respecting feature flags
Creates all the css variables for the dark theme respecting feature flags
Creates all the default theme css variables respecting feature flags
Creates a new theme surface by conditionally updating theme background and text colors for the elevation.
The material design elevation (0 - 24)
Set to true
if the background-color and color should not be updated.
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.
Used to provide the correct color based on the $color-scheme setting.
The correct color depending on the $color-scheme
The light theme color
The dark theme color
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.
true if the provided value is one of the
theme-get-var() results without any fallback provided
The value to check against
See the is-theme-color-var for info.
the $value if it was theme var, otherwise null
The value to maybe return
the dark elevation color var
The dark elevation value
a var() statement
The supported variable name
An optional fallback value
This is used to get another material design color with a different swatch or accent.
The swatch or fallback color
The material design color name
This should be: 100, 200, 300, 400, 500,
600, 700, 800, or 900. When $accent is set to true, it should be: 100, 200, 400, or 700
Set to true to get an accent color instead of a main color.
A color to use if the $color
is not a material design color. Mostly for internal usage.
Used internally to provide a better error message if a $fallback-color was not provided.
Invalid fallback color: