Sass Theme API
Before reading this page, configure the default Sass variables through the _everything.scss.
Use the Sass Theme API to use ReactMD custom property values or override custom properties for parts of the app. The general setup is to define one variable, one function and two mixins to work with the theme:
${group}-variables
@mixin {group}-use-var($property, $name, $fallback: null)
@mixin {group}-set-var($name, $new-value)
@function {group}-get-var($name, $fallback: null)
It is not required to use these functions and mixins, but they will ensure that
a valid $name
has been provided and throw an error if the name does not
exist. This ensures there aren't any accidental typos during build-time and
provides a list of available custom property names.
See the core.contrast-color function around how to automatically create an accessible text color for a background.
The variables
variable list
The $variables
list can be used to view which items are configurable using
custom properties. It is used internally by the other functions and mixins to
validate and generate the custom property names.
This code example just prints out all the available theme variables.
@use "everything";
:root {
@each $var in everything.$theme-variables {
@include everything.theme-set-var($var, inherit);
}
}
:root {
--rmd-inverse-color: inherit;
--rmd-background-color: inherit;
--rmd-on-background-color: inherit;
--rmd-surface-color: inherit;
--rmd-primary-color: inherit;
--rmd-on-primary-color: inherit;
--rmd-secondary-color: inherit;
--rmd-on-secondary-color: inherit;
--rmd-warning-color: inherit;
--rmd-on-warning-color: inherit;
--rmd-success-color: inherit;
--rmd-on-success-color: inherit;
--rmd-error-color: inherit;
--rmd-on-error-color: inherit;
--rmd-text-primary-color: inherit;
--rmd-text-secondary-color: inherit;
--rmd-text-hint-color: inherit;
--rmd-text-disabled-color: inherit;
--rmd-outline-width: inherit;
--rmd-outline-color: inherit;
--rmd-outline-grey-color: inherit;
--rmd-inverse-color: inherit;
}
The use-var
mixin
The use-var
mixin should be used to apply the variable as a css property
value.
@use "everything";
.example {
@include everything.theme-use-var(background-color);
@include everything.theme-use-var(color, text-primary-color);
@include everything.button-use-var(padding, text-horizontal-padding);
}
.example {
background-color: var(--rmd-background-color);
color: var(--rmd-text-primary-color);
padding: var(--rmd-button-text-horizontal-padding);
}
The set-var
mixin
The set-var
mixin should be used to override the current value for a part of
the app.
@use "everything";
.example {
@include everything.theme-set-var(background-color, surface-color);
@include everything.theme-set-var(primary-color, blue);
@include everything.theme-set-var(
on-primary-color,
everything.contrast-color(blue)
);
@include everything.button-set-var(text-horizontal-padding, 8px);
}
.example {
--rmd-background-color: var(--rmd-surface-color);
--rmd-primary-color: blue;
--rmd-on-primary-color: #fff;
--rmd-button-text-horizontal-padding: 8px;
}
The get-var
function
The get-var
function should generally only be used if requiring the current
property in a
calc() function, a
set-var
value, or in a property shorthand since it just returns
var(--rmd-{name})
or var(--rmd-{name}, $fallback)
.
@use "everything";
.example {
padding: everything.icon-get-var(spacing)
everything.button-get-var(text-horizontal-padding);
}
.example {
padding: var(--rmd-icon-spacing) var(--rmd-button-text-horizontal-padding);
}
Available Sass API
The Sass theme API is documented in the Sass API Docs and all the available functions and mixins are listed below.
- Theme
- Transition
- Typography
- Interaction
- App Bar
- Autocomplete
- Avatar
- Badge
- Border Radius
- Box
- Button
- Card
- Chip
- Dialog
- Divider
- Form
- Icon
- Label
- Layout
- Link
- List
- Menu
- Navigation
- Overlay
- Progress
- Segmented Button
- Sheet
- Slider
- Snackbar
- Spacing
- Switch
- Table
- Tabs
- Text Area
- Text Field
- Tooltip
- Tree
- Window Splitter