Color usage

All of the below colors are used in the same way. Both SCSS variables and CSS classes and color codes are named.

You can easily change the colors you use. In the settings you can remove all colors you don't use NOTE* that you need to recompile with SCSS. In SCSS the variables for each color will remain accessible. Therefore it's recommended to remove each color when using SCSS unless you need to use a class in HTML.

Theme

With Material and SCSS you're also able to choose between a light and dark theme. You can define the theme by overwriting the $theme variable. The variable can either be light or dark. Switch theme

    
$theme: light;
$theme: dark;
    

There is also the possibility to use a light and dark media query and classes. The media queries will respond to what the user has defined as their preferred color scheme. Do note that not all browsers support these media queries. The media queries are used the same way that grid media queries are used. Or you can use a mixin that will add additional classes to make it even easier. However for now the mixins only work with a class.

    
@media #{$dark} {
    // Styling for dark goes here
}

@media #{$light} {
    // Styling for dark goes here
}

@include dark-theme(text-field) {
    // Styling for dark .text-field
}

@include light-theme(text-field) {
    // Styling for light .text-field
}
    

Since these media queries and mixins are used by default in the styling of components it's possible to turn them off as well. This will safe a lot of additional classes and media queries and thus loading time. To turn off the classes or media queries that you don't need simply comment them out.

    
$media-themes: (dark, light); // Removes media queries
$class-themes: (dark, light); // Removes classes
    

The additional classes that are added can be used like this.

    
<div class="card card--dark">
    <!-- Elements inside are not affected -->
</div>

<div class="card dark">
    <!-- Elements inside are affected and will also be dark -->
</div>