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