Skip to main content

Theming Material

Customise Material with our new built-in Sass variables for global style preferences for easy theming and component changes.

Browser support

Before you start, please be aware that Material supports the latest, stable releases of all major browsers and platforms. On Windows, we support Internet Explorer 10-11 / Microsoft Edge.

Alternative browsers which use the latest version of Blink, Gecko, or WebKit whether directly or via the platform’s web view API, are not explicitly supported. However, Material should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.

Desktop browsers

The latest versions of most desktop browsers are supported.

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Supported Supported N/A N/A Supported Supported
Windows Supported Supported Supported, IE10+ Supported Supported Not supported

For Firefox, in addition to the latest normal stable release, we also support the latest Extended Support Release (ESR) version of Firefox.

Unofficially, Material should behave and look well enough in Chrome for Linux and Chrome, Firefox for Linux, and Internet Explorer 9, though they are not officially supported.

Internet Explorer

Internet Explorer 10+ is supported; IE9 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality. Visit Can I use for details on browser support of CSS3 and HTML5 features.

Mobile devices

Material supports the latest versions of each major platform’s default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini) are not supported.

Android Browser & WebView Chrome Firefox Microsoft Edge Safari
Android Android v5.0+ supported Supported Supported Supported N/A
iOS N/A Supported Supported Supported Supported
Windows 10 Mobile N/A N/A N/A Supported N/A

CSS variables

Material includes CSS custom properties (variables) in its compiled CSS. These provide easy access to some commonly used values like our breakpoints, colors and font stacks.

Available variables

Here are the variables we include:

:root {
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --amber: #ffc107;
  --blue: #2196f3;
  --blue-grey: #607d8b;
  --brown: #795548;
  --cyan: #00bcd4;
  --deep-orange: #ff5722;
  --deep-purple: #673ab7;
  --green: #4caf50;
  --grey: #9e9e9e;
  --indigo: #3f51b5;
  --light-blue: #03a9f4;
  --light-green: #8bc34a;
  --lime: #cddc39;
  --orange: #ff9800;
  --pink: #e91e63;
  --purple: #9c27b0;
  --red: #f44336;
  --teal: #009688;
  --yellow: #ffeb3b;
  --primary: #6200ee;
  --primary-dark: #3700b3;
  --primary-light: #bb86fc;
  --secondary: #03dac6;
  --secondary-dark: #018786;
  --secondary-light: #66fff8;
  --danger: #b00020;
  --danger-dark: #d32f2f;
  --danger-light: #c51162;
  --info: #714cfe;
  --info-dark: #021aee;
  --info-light: #d2c2fd;
  --success: #61d800;
  --success-dark: #41c300;
  --success-light: #c6f68d;
  --warning: #ff8d00;
  --warning-dark: #ee6002;
  --warning-light: #ffc77d;
  --dark: #424242;
  --dark-dark: #212121;
  --dark-light: #757575;
  --light: #f5f5f5;
  --light-dark: #e0e0e0;
  --light-light: #fafafa;
  --font-family-monospace: "Roboto Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
  --font-family-sans-serif: "Roboto", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Examples

CSS variables offer similar flexibility to Sass variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our link styles with CSS variables.

a {
  color: var(--blue);
  font-family: var(--font-family-monospace)
}

While we include breakpoints in our CSS variables, they unfortunately cannot be used in media queries. These remain in the compiled CSS for backward compatibility given they can be utilised by JavaScript. Learn more in the spec.

Sass

Utilize our source Sass files to take advantage of mixins, variables and more.

Whenever possible, avoid modifying Material’s core files. For Sass, that means creating your own stylesheet that imports Material so you can modify and extend it.

For example, you can create a custom.scss and import either all of Material’s source Sass files or only selected parts you need. We encourage the latter, though be aware there are some dependencies and requirements across our components. You will also need to include some JavaScript for certain plugins.

// Custom.scss
// Option A: Include all of Material

@import "node_modules/daemonite-material/assets/scss/material";
// Custom.scss
// Option B: Include parts of Material

// Required
@import "node_modules/daemonite-material/assets/scss/colors";
@import "node_modules/daemonite-material/assets/scss/functions";
@import "node_modules/daemonite-material/assets/scss/mixins";
@import "node_modules/daemonite-material/assets/scss/variables";

// Optional
@import "node_modules/daemonite-material/assets/scss/base/base";
@import "node_modules/daemonite-material/assets/scss/base/grid";
@import "node_modules/daemonite-material/assets/scss/base/typography";
@import "node_modules/daemonite-material/assets/scss/material/button";
@import "node_modules/daemonite-material/assets/scss/material/card";
@import "node_modules/daemonite-material/assets/scss/material/text-field";

With that setup in place, you can begin to modify any of the Sass maps and variables in your custom.scss. You can also start to add parts of Material under the // Optional section as needed. We suggest using the full import stack from our material.scss file as your starting point.

Default variables

Every Sass variable in Material includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying Material’s source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Material.

Here’s an example that changes the background-color for the <body>:

// Your variable overrides
$body-bg: #212121;

// Material
@import "node_modules/daemonite-material/assets/scss/material";

Repeat as necessary for any variable in Material.

Maps

Material includes a handful of Sass maps that make it easier to generate families of related CSS. We use Sass maps for our breakpoints, colors, and more. Just like Sass variables, all Sass maps include the !default flag and can be overridden and extended.

Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making removing items from a map slightly more difficult.

Add to map

To add a new item to $sizes, add the new key and value to your custom Sass file:

$sizes: (
  15: 15%
);

This will generate a new pair of .h-15 and .w-15 classes which will set height and width to be 15% respectively.

Modify map

To modify an existing item in our $spacers map, add the following to your custom Sass file:

$spacers: (
  5: 5rem
);

Classes such as mb-5 will then set margin-bottom to be 5rem instead of the default 3rem.

Remove from map

To remove an item from a map, use map-remove. Be aware you must insert it between our requirements and options:

// Required
@import "node_modules/daemonite-material/assets/scss/colors";
@import "node_modules/daemonite-material/assets/scss/functions";
@import "node_modules/daemonite-material/assets/scss/mixins";
@import "node_modules/daemonite-material/assets/scss/variables";

$theme-colors: map-remove($theme-colors, "info");

// Optional
@import "node_modules/daemonite-material/assets/scss/base/base";
@import "node_modules/daemonite-material/assets/scss/base/grid";
@import "node_modules/daemonite-material/assets/scss/base/typography";
@import "node_modules/daemonite-material/assets/scss/material/button";
@import "node_modules/daemonite-material/assets/scss/material/card";
@import "node_modules/daemonite-material/assets/scss/material/text-field";

However, please be aware that Material assumes the presence of some specific keys within Sass maps. As you customise the included maps, you may encounter errors where a specific Sass map’s key is being used.

For example, we use the danger, success and warning keys from $theme-colors for styling different states of some components. Removing the values of these keys may cause Sass compilation issues. In these instances, you’ll need to modify the Sass code that makes use of those values.

Theme colors

Many of Material’s various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets.

All colors

All colors available in Material, are available as Sass variables in our assets/scss/_colors.scss file.

50 #fff8e1
100 #ffecb3
200 #ffe082
300 #ffd54f
400 #ffca28

Amber

500 #ffc107
500 #ffc107
600 #ffb300
700 #ffa000
800 #ff8f00
900 #ff6f00
A100 #ffe57f
A200 #ffd740
A400 #ffc400
A700 #ffab00
50 #e3f2fd
100 #bbdefb
200 #90caf9
300 #64b5f6
400 #42a5f5

Blue

500 #2196f3
500 #2196f3
600 #1e88e5
700 #1976d2
800 #1565c0
900 #0d47a1
A100 #82b1ff
A200 #448aff
A400 #2979ff
A700 #2962ff
50 #eceff1
100 #cfd8dc
200 #b0bec5
300 #90a4ae
400 #78909c

Blue grey

500 #607d8b
500 #607d8b
600 #546e7a
700 #455a64
800 #37474f
900 #263238
50 #efebe9
100 #d7ccc8
200 #bcaaa4
300 #a1887f
400 #8d6e63

Brown

500 #795548
500 #795548
600 #6d4c41
700 #5d4037
800 #4e342e
900 #3e2723
50 #e0f7fa
100 #b2ebf2
200 #80deea
300 #4dd0e1
400 #26c6da

Cyan

500 #00bcd4
500 #00bcd4
600 #00acc1
700 #0097a7
800 #00838f
900 #006064
A100 #84ffff
A200 #18ffff
A400 #00e5ff
A700 #00b8d4
50 #fbe9e7
100 #ffccbc
200 #ffab91
300 #ff8a65
400 #ff7043

Deep orange

500 #ff5722
500 #ff5722
600 #f4511e
700 #e64a19
800 #d84315
900 #bf360c
A100 #ff9e80
A200 #ff6e40
A400 #ff3d00
A700 #dd2c00
50 #ede7f6
100 #d1c4e9
200 #b39ddb
300 #9575cd
400 #7e57c2

Deep purple

500 #673ab7
500 #673ab7
600 #5e35b1
700 #512da8
800 #4527a0
900 #311b92
A100 #b388ff
A200 #7c4dff
A400 #651fff
A700 #6200ea
50 #e8f5e9
100 #c8e6c9
200 #a5d6a7
300 #81c784
400 #66bb6a

Green

500 #4caf50
500 #4caf50
600 #43a047
700 #388e3c
800 #2e7d32
900 #1b5e20
A100 #b9f6ca
A200 #69f0ae
A400 #00e676
A700 #00c853
50 #fafafa
100 #f5f5f5
200 #eeeeee
300 #e0e0e0
400 #bdbdbd

Grey

500 #9e9e9e
500 #9e9e9e
600 #757575
700 #616161
800 #424242
900 #212121
50 #e8eaf6
100 #c5cae9
200 #9fa8da
300 #7986cb
400 #5c6bc0

Indigo

500 #3f51b5
500 #3f51b5
600 #3949ab
700 #303f9f
800 #283593
900 #1a237e
A100 #8c9eff
A200 #536dfe
A400 #3d5afe
A700 #304ffe
50 #e1f5fe
100 #b3e5fc
200 #81d4fa
300 #4fc3f7
400 #29b6f6

Light blue

500 #03a9f4
500 #03a9f4
600 #039be5
700 #0288d1
800 #0277bd
900 #01579b
A100 #80d8ff
A200 #40c4ff
A400 #00b0ff
A700 #0091ea
50 #f1f8e9
100 #dcedc8
200 #c5e1a5
300 #aed581
400 #9ccc65

Light green

500 #8bc34a
500 #8bc34a
600 #7cb342
700 #689f38
800 #558b2f
900 #33691e
A100 #ccff90
A200 #b2ff59
A400 #76ff03
A700 #64dd17
50 #f9fbe7
100 #f0f4c3
200 #e6ee9c
300 #dce775
400 #d4e157

Lime

500 #cddc39
500 #cddc39
600 #c0ca33
700 #afb42b
800 #9e9d24
900 #827717
A100 #f4ff81
A200 #eeff41
A400 #c6ff00
A700 #aeea00
50 #fff3e0
100 #ffe0b2
200 #ffcc80
300 #ffb74d
400 #ffa726

Orange

500 #ff9800
500 #ff9800
600 #fb8c00
700 #f57c00
800 #ef6c00
900 #e65100
A100 #ffd180
A200 #ffab40
A400 #ff9100
A700 #ff6d00
50 #fce4ec
100 #f8bbd0
200 #f48fb1
300 #f06292
400 #ec407a

Pink

500 #e91e63
500 #e91e63
600 #d81b60
700 #c2185b
800 #ad1457
900 #880e4f
A100 #ff80ab
A200 #ff4081
A400 #f50057
A700 #c51162
50 #f3e5f5
100 #e1bee7
200 #ce93d8
300 #ba68c8
400 #ab47bc

Purple

500 #9c27b0
500 #9c27b0
600 #8e24aa
700 #7b1fa2
800 #6a1b9a
900 #4a148c
A100 #ea80fc
A200 #e040fb
A400 #d500f9
A700 #aa00ff
50 #ffebee
100 #ffcdd2
200 #ef9a9a
300 #e57373
400 #ef5350

Red

500 #f44336
500 #f44336
600 #e53935
700 #d32f2f
800 #c62828
900 #b71c1c
A100 #ff8a80
A200 #ff5252
A400 #ff1744
A700 #d50000
50 #e0f2f1
100 #b2dfdb
200 #80cbc4
300 #4db6ac
400 #26a69a

Teal

500 #009688
500 #009688
600 #00897b
700 #00796b
800 #00695c
900 #004d40
A100 #a7ffeb
A200 #64ffda
A400 #1de9b6
A700 #00bfa5
50 #fffde7
100 #fff9c4
200 #fff59d
300 #fff176
400 #ffee58

Yellow

500 #ffeb3b
500 #ffeb3b
600 #fdd835
700 #fbc02d
800 #f9a825
900 #f57f17
A100 #ffff8d
A200 #ffff00
A400 #ffea00
A700 #ffd600

Here’s how you can use these in your Sass:

.class1 {
  color: $material-color-purple-500;
}

.class2 {
  color: map-get($purples, 500);
}

// With our `color()` function which return the 500 colors
.class3 {
  color: color(purple);
}

Theme colors

We use a subset of all colors to create a smaller colour palette for generating colour schemes, available in our assets/scss/variables/_palette.scss file.

Primary

Base #6200ee
Dark #3700b3
Light #bb86fc

Secondary

Base #03dac6
Dark #018786
Light #66fff8

Danger

Base #b00020
Dark #d32f2f
Light #c51162

Info

Base #714cfe
Dark #021aee
Light #d2c2fd

Success

Base #61d800
Dark #41c300
Light #c6f68d

Warning

Base #ff8d00
Dark #ee6002
Light #ffc77d

Dark

Base #424242
Dark #212121
Light #757575

Light

Base #f5f5f5
Dark #e0e0e0
Light #fafafa

Here’s how you can use these in your Sass:

.class1 {
  color: theme-color(primary);
}

.class2 {
  color: theme-color-dark(primary);
}

.class3 {
  color: theme-color-light(primary);
}

Add a theme colour

To add a new colour to $theme-colors, add the new key and value to your custom Sass file. Please be aware that each new colour should also include darker and lighter shades of the primary colour to accent some parts of our components.

// Your variable overrides
$custom-color: (
  color: #ffc107,
  dark: #c79100,
  light: #fff350
);

$theme-colors: (
  'custom-color': $custom-color
);

// Material
@import "node_modules/daemonite-material/assets/scss/material";

Or

// Import Material colors
@import "node_modules/daemonite-material/assets/scss/colors";

// Your variable overrides
$custom-color: (
  color: $material-color-amber-500,
  dark: $material-color-amber-900,
  light: $material-color-amber-100
);

$theme-colors: (
  'custom-color': $custom-color
);

// Import the rest of Material
@import "node_modules/daemonite-material/assets/scss/functions";
@import "node_modules/daemonite-material/assets/scss/mixins";
@import "node_modules/daemonite-material/assets/scss/variables";
...

Modify a theme colour

To modify an existing colour in our $theme-colors map, add the following to your custom Sass file. As aforementioned, each colour in our $theme-colors map contains not only the colour itself, but also darker and lighter shades of it, so please make sure to modify all three values.

$primary: (
  color: #ffc107,
  dark:  darken(#ffc107, 10%),
  light: lighten(#ffc107, 10%)
);