Skip to main content
react-md

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:

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-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.