Mastering Angular Material Customization

Discover the essentials of customizing Angular Material for unique web designs, focusing on the strategic use of its styling API and CSS variables while emphasizing careful changes to preserve future maintainability.

Autorin: Michelle Weber
Datum: 28. März 2024
Lesedauer: 10 Minuten

Angular Material: a powerful UI component library

Angular Material simplifies the process of building sleek and responsive web applications. However, while its default styling may suit many projects, there are times when customization becomes essential to align with specific design requirements or brand guidelines.

In this comprehensive guide, we delve into the art of customizing Angular Material components. From understanding the styling API to harnessing internal CSS variables, we’ll walk you through the essential steps to tailor these components to your precise needs.

But before you embark on a customization journey, it’s crucial to recognize that modifying Angular Material components should be approached with careful consideration. While it offers flexibility, tweaking the default styles comes with its own set of challenges. Hence, customization should only be pursued when absolutely necessary, ensuring it doesn’t compromise maintainability or hinder future updates.

Let’s dive into the intricacies of Angular Material customization, exploring the key concepts and techniques to wield its full potential while maintaining the integrity of your application’s design and functionality.

Disclaimers

This blog article is based on Angular Material v17. Please be aware that this article serves as a guideline for customizing Angular Material components and does not intend to recite official documentation but rather provides links to important parts of it. While the information provided here is based on best practices and personal experiences, it may not always align perfectly with the latest updates or recommendations from the Angular Material team. Readers are encouraged to refer to the official documentation for comprehensive and up-to-date information on Angular Material customization. This article serves as a supplementary resource, offering insights and pointers on where to look for further information and how to approach customization tasks effectively.

Where to start with Angular Material

When starting a new project with Angular Material and the components should be customized to a specific level you should first and foremost check out if you can customize them via the official Angular Material theming API which is provided via SCSS mixins before you start overriding the component’s internal styles.

Create your own theme

The very first step is to create your own theme which is done in no time. A theme consists of four dimensions: typography, colors, density and base (which doesn’t do anything so far).

Find more information on creating your own theme here.

Colors

Colors can be set by defining palettes for the primary, accent and warn colors. The palettes are often already defined by the designer according to the Material specification. The color palettes are then also internally used by the components. The documentation does unfortunately not give an overview of which colors are used in their individual components. So either tweaking the palette or setting individual color schemes per component (read more on that down below) might be necessary.
There are also some palette generators that help to export the finished palette to be used right away like Material Design Theme Generator.

Typography

Typography levels are also a part of the theme. With these you can define the font-family, font-size and line-height for each level. The library itself uses these typography levels in each of their components. Unfortunately, from the documentation you cannot tell which typography levels are used on which components. So you might need to fiddle around a bit with this. I would also recommend to align the typography levels with the levels used from the designers for easier handling.

Read more on the typography levels here.

Density

With the density you can control how dense your components are — e. g. setting the density to a negative value makes the components generally smaller. While fiddling around with this option it seemed to me that this is not fully supported for every component (e. g. mat-fab buttons stayed as they are) and also only negative values are supported, which make the components denser. This might change in the future. This setting can especially be useful if your application needs to support desktop and mobile views.

Base

There is also a fourth dimension mentioned in the docs but it does not say what exactly you can configure with its mixin API. Digging around in the Angular Material GitHub repository I found that the base mixin just generates base styles for your component but you cannot configure them (e. g. see here — the CSS variables inside get-unthemable-tokens for checkbox are generated when calling the checkbox-base mixin). According to some code comments I found this might change in the future which would offer even more possibility to customize your components without the need to override the internal styles.

»Tokens that can’t be configured through Angular Material’s current theming API, but may be in a future version of the theming API.« GitHub, 2024

I’ve applied my custom theme but the components do not look like the design. What now?

The main problem of these configurations is that it is not quite clear which value of the palette and the typography levels will be used on which part of the components.

If some components are not 100 % identical to the design it makes sense to take a second look at the themed components together with the designer and see if it is possible to tweak the palettes or typography levels in order to fit the design or if it would be OK for the designer to make small changes to their design components.

If tweaking of the theme is too complex or creates problems on other components which already fitted the design you could also consider to set a separate theme for each of your components (or at least for those that do not fit the design with the general application theme applied). This way, you can fine tune the colors and typography specific for a single component. This is also done via SCSS mixins. Each component has its own mixin for color, typography and density.

Read more on individual component themes here.

Individual component customization

If the above configuration is still not working for you and you need to tweak other parts of the Angular Material Components you can create global style sheets and override the styles although this is strongly discouraged by the Angular Team:

»Angular Material supports customizing color, typography, and density as outlined in this document. Angular strongly discourages, and does not directly support, overriding component CSS outside the theming APIs described above. Component DOM structure and CSS classes are considered private implementation details that may change at any time.« GitHub, 2024

This was a huge problem for projects that relied on heavy customization when the Angular v15 update came since Angular Material migrated the entire library to align to the official Material Design Components for Web (MDC). This broke the entire custom styling.

Read more on component customization from the official documentation here.

Fortunately, from Angular v16 on, the Angular Material Team started to rely more on CSS variables which are easier to override and depend less or even not at all on the internal structure and applied classes of the components.

Due to the fact that Angular discourages overriding internal styles and the CSS variables are considered private implementation, they obviously make it hard for developers by not providing an overview of the CSS variables that are used by their components. That is why I’ve created an overview of these variables in the following section.

Be aware that these variables are still subject to change on every update to the library. So there is no guarantee that a) this overview is up-to-date and b) your styles won’t break after an update.

Although the CSS variables make it easier to override internal styles it is still discouraged and should only be used as a last resort if the theming API cannot provide all the customization you need.

If overriding the variables is still not enough and you need to start overriding styles depending on the component’s internal structure and classes you should maybe have a chat with your designer to clarify if these customizations are really necessary.

CSS Variables

I have extracted the variables down below from Material’s predefined theme »Purple-Green«. Most of the values behind these variables are generated from the defined palette and typography levels. So if you tweak your theme correctly you might not need to override these at all. If it is not possible to get the font and color for some component right with just the theme you can override them with the variables. Be aware that if you would like to reassign a SCSS variable to one of Material’s CSS variables, it requires you to use interpolation (read more here).

The variables are often defined on the html tag itself but sometimes also in specific CSS classes. In order for this to have an effect you should override them inside the same tag/class.

The variables defined on html level are most of the time the defaults used for the specific component (sometimes the default is an entire color scheme set of its own or it’s just the primary/accent color scheme). As you might know from the Material documentation there are also accent and warn colors, which override the default color if the mat-accent or mat-warn class is applied (this is done via the color input of the component).

The variables for the individual components are listed down below.

Autocomplete
Badge
Bottom sheet
Button
Button toggle
Card
Checkbox
Chips
Datepicker
Dialog
Divider
Expansion panel
Form field (includes Input and Text Area)
Grid list
Icon
List
Menu
Option
Option group
Paginator
Progress bar
Progress spinner
Radio button
Ripples
Select
Sidenav
Slide toggle
Slider
Snackbar
Sort header
Stepper
Table
Tabs
Toolbar
Tooltip
Tree

In conclusion, mastering the art of Angular Material customization empowers developers to create UIs that not only meet but exceed expectations. By understanding the principles behind the customization API and harnessing the flexibility offered by internal CSS variables, you can achieve seamless integration of Angular Material components into your projects while maintaining a cohesive design language. However, it’s crucial to exercise caution and restraint, only customizing the internal structure when absolutely necessary to avoid unnecessary complexity and potential pitfalls down the road. With a balance of pragmatism and creativity, you can unlock the full potential of Angular Material to craft stunning and intuitive user experiences that leave a lasting impression.

Autocomplete

Autocomplete Component

html {
  --mat-autocomplete-background-color: #424242
}

Badge

Badge component

html {
  /* default/primary color */
  --mat-badge-background-color: #9c27b0;
  --mat-badge-text-color: white;
  --mat-badge-disabled-state-background-color: #6e6e6e;
  --mat-badge-disabled-state-text-color: rgba(255, 255, 255, .5);

  /* typography */
  --mat-badge-text-font: Roboto, sans-serif;
  --mat-badge-text-size: 12px;
  --mat-badge-text-weight: 600;
  --mat-badge-small-size-text-size: 9px;
  --mat-badge-large-size-text-size: 24px
}

.mat-badge-accent {
  /* accent color */
  --mat-badge-background-color: #69f0ae;
  --mat-badge-text-color: rgba(0, 0, 0, .87)
}

.mat-badge-warn {
  /* warn color */
  --mat-badge-background-color: #f44336;
  --mat-badge-text-color: white
}

Bottom sheet

Bottom sheet component

html {
  /* border-radius */
  --mat-bottom-sheet-container-shape: 4px

  /* color */
  --mat-bottom-sheet-container-text-color: white;
  --mat-bottom-sheet-container-background-color: #424242

  /* typography */
  --mat-bottom-sheet-container-text-font: Roboto, sans-serif;
  --mat-bottom-sheet-container-text-line-height: 20px;
  --mat-bottom-sheet-container-text-size: 14px;
  --mat-bottom-sheet-container-text-tracking: .0178571429em;
  --mat-bottom-sheet-container-text-weight: 400
}

Button

Button component

html {
  /* typography */
  --mdc-text-button-label-text-font: Roboto, sans-serif;
  --mdc-text-button-label-text-size: 14px;
  --mdc-text-button-label-text-tracking: .0892857143em;
  --mdc-text-button-label-text-weight: 500;
  --mdc-text-button-label-text-transform: none;
}

.mat-mdc-button {
  /* default color */
  --mdc-text-button-label-text-color: #fff;
  --mdc-text-button-disabled-label-text-color: rgba(255, 255, 255, .5);
  --mat-text-button-state-layer-color: #fff;
  --mat-text-button-ripple-color: rgba(255, 255, 255, .1);

  /* hover/focus/active opacity */
  --mat-text-button-hover-state-layer-opacity: .08;
  --mat-text-button-focus-state-layer-opacity: .24;
  --mat-text-button-pressed-state-layer-opacity: .24

  /* text container */
  --mdc-text-button-container-height: 36px
}

.mat-mdc-button.mat-primary {
  /* primary color */
  --mdc-text-button-label-text-color: #9c27b0;
  --mat-text-button-state-layer-color: #9c27b0;
  --mat-text-button-ripple-color: rgba(156, 39, 176, .1)
}

.mat-mdc-button.mat-accent {
  /* accent color */
  --mdc-text-button-label-text-color: #69f0ae;
  --mat-text-button-state-layer-color: #69f0ae;
  --mat-text-button-ripple-color: rgba(105, 240, 174, .1)
}

.mat-mdc-button.mat-warn {
  /* warn color */
  --mdc-text-button-label-text-color: #f44336;
  --mat-text-button-state-layer-color: #f44336;
  --mat-text-button-ripple-color: rgba(244, 67, 54, .1)
}

Flat

html {
  /* typography */
  --mdc-filled-button-label-text-font: Roboto, sans-serif;
  --mdc-filled-button-label-text-size: 14px;
  --mdc-filled-button-label-text-tracking: .0892857143em;
  --mdc-filled-button-label-text-weight: 500;
  --mdc-filled-button-label-text-transform: none;
}

.mat-mdc-unelevated-button {
  /* default color */
  --mdc-filled-button-container-color: #424242;
  --mdc-filled-button-label-text-color: #fff;
  --mdc-filled-button-disabled-container-color: rgba(255, 255, 255, .12);
  --mdc-filled-button-disabled-label-text-color: rgba(255, 255, 255, .5);
  --mat-filled-button-state-layer-color: #fff;
  --mat-filled-button-ripple-color: rgba(255, 255, 255, .1);

  /* hover/focus/active opacity */
  --mat-filled-button-hover-state-layer-opacity: .08;
  --mat-filled-button-focus-state-layer-opacity: .24;
  --mat-filled-button-pressed-state-layer-opacity: .24

  /* text-container */
  --mdc-filled-button-container-height: 36px
}

.mat-mdc-unelevated-button.mat-primary {
  /* primary color */
  --mdc-filled-button-container-color: #9c27b0;
  --mdc-filled-button-label-text-color: #fff;
  --mat-filled-button-state-layer-color: #fff;
  --mat-filled-button-ripple-color: rgba(255, 255, 255, .1)
}

.mat-mdc-unelevated-button.mat-accent {
  /* accent color */
  --mdc-filled-button-container-color: #69f0ae;
  --mdc-filled-button-label-text-color: #000;
  --mat-filled-button-state-layer-color: #000;
  --mat-filled-button-ripple-color: rgba(0, 0, 0, .1)
}

.mat-mdc-unelevated-button.mat-warn {
  /* warn color */
  --mdc-filled-button-container-color: #f44336;
  --mdc-filled-button-label-text-color: #fff;
  --mat-filled-button-state-layer-color: #fff;
  --mat-filled-button-ripple-color: rgba(255, 255, 255, .1)
}

Raised

html {
  /* typography */
  --mdc-protected-button-label-text-font: Roboto, sans-serif;
  --mdc-protected-button-label-text-size: 14px;
  --mdc-protected-button-label-text-tracking: .0892857143em;
  --mdc-protected-button-label-text-weight: 500;
  --mdc-protected-button-label-text-transform: none
}

.mat-mdc-raised-button {
  /* default color */
  --mdc-protected-button-container-color: #424242;
  --mdc-protected-button-label-text-color: #fff;
  --mdc-protected-button-disabled-container-color: rgba(255, 255, 255, .12);
  --mdc-protected-button-disabled-label-text-color: rgba(255, 255, 255, .5);
  --mat-protected-button-state-layer-color: #fff;
  --mat-protected-button-ripple-color: rgba(255, 255, 255, .1);

  /* hover/focus/active opacity */
  --mat-protected-button-hover-state-layer-opacity: .08;
  --mat-protected-button-focus-state-layer-opacity: .24;
  --mat-protected-button-pressed-state-layer-opacity: .24;

  /* text-container */
  --mdc-protected-button-container-height: 36px
}

.mat-mdc-raised-button.mat-primary {
  /* primary color */
  --mdc-protected-button-container-color: #9c27b0;
  --mdc-protected-button-label-text-color: #fff;
  --mat-protected-button-state-layer-color: #fff;
  --mat-protected-button-ripple-color: rgba(255, 255, 255, .1)
}

.mat-mdc-raised-button.mat-accent {
  /* accent color */
  --mdc-protected-button-container-color: #69f0ae;
  --mdc-protected-button-label-text-color: #000;
  --mat-protected-button-state-layer-color: #000;
  --mat-protected-button-ripple-color: rgba(0, 0, 0, .1)
}

.mat-mdc-raised-button.mat-warn {
  /* warn color */
  --mdc-protected-button-container-color: #f44336;
  --mdc-protected-button-label-text-color: #fff;
  --mat-protected-button-state-layer-color: #fff;
  --mat-protected-button-ripple-color: rgba(255, 255, 255, .1)
}

Outlined

html {
  /* typography */
  --mdc-outlined-button-label-text-font: Roboto, sans-serif;
  --mdc-outlined-button-label-text-size: 14px;
  --mdc-outlined-button-label-text-tracking: .0892857143em;
  --mdc-outlined-button-label-text-weight: 500;
  --mdc-outlined-button-label-text-transform: none;
}

.mat-mdc-outlined-button {
  /* default color */
  --mdc-outlined-button-disabled-outline-color: rgba(255, 255, 255, .12);
  --mdc-outlined-button-disabled-label-text-color: rgba(255, 255, 255, .5);
  --mdc-outlined-button-label-text-color: #fff;
  --mdc-outlined-button-outline-color: rgba(255, 255, 255, .12);
  --mat-outlined-button-state-layer-color: #fff;
  --mat-outlined-button-ripple-color: rgba(255, 255, 255, .1);

  /* hover/focus/active opacity */
  --mat-outlined-button-hover-state-layer-opacity: .08;
  --mat-outlined-button-focus-state-layer-opacity: .24;
  --mat-outlined-button-pressed-state-layer-opacity: .24
  
  /* text container height */
  --mdc-outlined-button-container-height: 36px
}

.mat-mdc-outlined-button.mat-primary {
  /* primary color */
  --mdc-outlined-button-label-text-color: #9c27b0;
  --mdc-outlined-button-outline-color: rgba(255, 255, 255, .12);
  --mat-outlined-button-state-layer-color: #9c27b0;
  --mat-outlined-button-ripple-color: rgba(156, 39, 176, .1)
}

.mat-mdc-outlined-button.mat-accent {
  /* accent color */
  --mdc-outlined-button-label-text-color: #69f0ae;
  --mdc-outlined-button-outline-color: rgba(255, 255, 255, .12);
  --mat-outlined-button-state-layer-color: #69f0ae;
  --mat-outlined-button-ripple-color: rgba(105, 240, 174, .1)
}

.mat-mdc-outlined-button.mat-warn {
  /* warn color */
  --mdc-outlined-button-label-text-color: #f44336;
  --mdc-outlined-button-outline-color: rgba(255, 255, 255, .12);
  --mat-outlined-button-state-layer-color: #f44336;
  --mat-outlined-button-ripple-color: rgba(244, 67, 54, .1)
}

Icon

.mat-mdc-icon-button {
  /* default color */
  --mdc-icon-button-icon-color: inherit;
  --mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, .5);
  --mat-icon-button-state-layer-color: #fff;
  --mat-icon-button-ripple-color: rgba(255, 255, 255, .1);

  /* hover/focus/active opacity */
  --mat-icon-button-hover-state-layer-opacity: .08;
  --mat-icon-button-focus-state-layer-opacity: .24;
  --mat-icon-button-pressed-state-layer-opacity: .24
}

.mat-mdc-icon-button.mat-primary {
  /* primary color */
  --mdc-icon-button-icon-color: #9c27b0;
  --mat-icon-button-state-layer-color: #9c27b0;
  --mat-icon-button-ripple-color: rgba(156, 39, 176, .1)
}

.mat-mdc-icon-button.mat-accent {
  /* accent color */
  --mdc-icon-button-icon-color: #69f0ae;
  --mat-icon-button-state-layer-color: #69f0ae;
  --mat-icon-button-ripple-color: rgba(105, 240, 174, .1)
}

.mat-mdc-icon-button.mat-warn {
  /* warn color */
  --mdc-icon-button-icon-color: #f44336;
  --mat-icon-button-state-layer-color: #f44336;
  --mat-icon-button-ripple-color: rgba(244, 67, 54, .1)
}

.mat-mdc-icon-button.mat-mdc-button-base {
  /* button size */
  --mdc-icon-button-state-layer-size: 48px;
}

Fab/Mini Fab

html {
  /* border radius */
  --mdc-fab-container-shape: 50%;

  /* icon size */
  --mdc-fab-icon-size: 24px
}

html {
  /* default color */
  --mdc-fab-container-color: #424242;
  --mat-fab-foreground-color: white;
  --mat-fab-state-layer-color: #fff;
  --mat-fab-ripple-color: rgba(255, 255, 255, .1);
  --mat-fab-disabled-state-container-color: rgba(255, 255, 255, .12);
  --mat-fab-disabled-state-foreground-color: rgba(255, 255, 255, .5)

  /* hover/focus/active opacity */
  --mat-fab-hover-state-layer-opacity: .08;
  --mat-fab-focus-state-layer-opacity: .24;
  --mat-fab-pressed-state-layer-opacity: .24;
}

html .mat-mdc-fab.mat-primary,html .mat-mdc-mini-fab.mat-primary {
  /* primary color */
  --mdc-fab-container-color: #9c27b0;
  --mat-fab-foreground-color: #fff;
  --mat-fab-state-layer-color: #fff;
  --mat-fab-ripple-color: rgba(255, 255, 255, .1)
}

html .mat-mdc-fab.mat-accent,html .mat-mdc-mini-fab.mat-accent {
  /* accent color */
  --mdc-fab-container-color: #69f0ae;
  --mat-fab-foreground-color: #000;
  --mat-fab-state-layer-color: #000;
  --mat-fab-ripple-color: rgba(0, 0, 0, .1)
}

html .mat-mdc-fab.mat-warn,html .mat-mdc-mini-fab.mat-warn {
  /* warn color */
  --mdc-fab-container-color: #f44336;
  --mat-fab-foreground-color: #fff;
  --mat-fab-state-layer-color: #fff;
  --mat-fab-ripple-color: rgba(255, 255, 255, .1)
}

html {
  --mdc-extended-fab-label-text-font: Roboto, sans-serif;
  --mdc-extended-fab-label-text-size: 14px;
  --mdc-extended-fab-label-text-tracking: .0892857143em;
  --mdc-extended-fab-label-text-weight: 500
}

Button toggle

Button toggle component

html {
  /* size */ 
  --mat-legacy-button-toggle-height: 36px;
  --mat-standard-button-toggle-height: 48px

  /* border-radius */
  --mat-legacy-button-toggle-shape: 2px;
  --mat-standard-button-toggle-shape: 4px;

  /* opacity */
  --mat-legacy-button-toggle-focus-state-layer-opacity: 1;
  --mat-standard-button-toggle-hover-state-layer-opacity: .04;
  --mat-standard-button-toggle-focus-state-layer-opacity: .12

  /* color */
  --mat-legacy-button-toggle-text-color: rgba(255, 255, 255, .5);
  --mat-legacy-button-toggle-state-layer-color: rgba(255, 255, 255, .12);
  --mat-legacy-button-toggle-selected-state-text-color: rgba(255, 255, 255, .7);
  --mat-legacy-button-toggle-selected-state-background-color: #212121;
  --mat-legacy-button-toggle-disabled-state-text-color: rgba(255, 255, 255, .3);
  --mat-legacy-button-toggle-disabled-state-background-color: black;
  --mat-legacy-button-toggle-disabled-selected-state-background-color: #424242;
  --mat-standard-button-toggle-text-color: white;
  --mat-standard-button-toggle-background-color: #424242;
  --mat-standard-button-toggle-state-layer-color: white;
  --mat-standard-button-toggle-selected-state-background-color: #212121;
  --mat-standard-button-toggle-selected-state-text-color: white;
  --mat-standard-button-toggle-disabled-state-text-color: rgba(255, 255, 255, .3);
  --mat-standard-button-toggle-disabled-state-background-color: #424242;
  --mat-standard-button-toggle-disabled-selected-state-text-color: white;
  --mat-standard-button-toggle-disabled-selected-state-background-color: #424242;
  --mat-standard-button-toggle-divider-color: #595959

  /* typography */
  --mat-legacy-button-toggle-text-font: Roboto, sans-serif;
  --mat-standard-button-toggle-text-font: Roboto, sans-serif
}

Card

Card Component

html {
  /* border-radius */
  --mdc-elevated-card-container-shape: 4px;
  --mdc-outlined-card-container-shape: 4px;

  /* width */
  --mdc-outlined-card-outline-width: 1px

  /* colors */
  --mdc-elevated-card-container-color: #424242;
  --mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
  --mdc-outlined-card-container-color: #424242;
  --mdc-outlined-card-outline-color: rgba(255, 255, 255, .12);
  --mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);
  --mat-card-subtitle-text-color: rgba(255, 255, 255, .7) 

  /* typography */
  --mat-card-title-text-font: Roboto, sans-serif;
  --mat-card-title-text-line-height: 32px;
  --mat-card-title-text-size: 20px;
  --mat-card-title-text-tracking: .0125em;
  --mat-card-title-text-weight: 500;
  --mat-card-subtitle-text-font: Roboto, sans-serif;
  --mat-card-subtitle-text-line-height: 22px;
  --mat-card-subtitle-text-size: 14px;
  --mat-card-subtitle-text-tracking: .0071428571em;
  --mat-card-subtitle-text-weight: 500
}

Checkbox

Checkbox component

html {
  /* size */
  --mdc-checkbox-state-layer-size: 40px

  /* hover/focus/active opacity */
  --mdc-checkbox-selected-focus-state-layer-opacity: .16;
  --mdc-checkbox-selected-hover-state-layer-opacity: .04;
  --mdc-checkbox-selected-pressed-state-layer-opacity: .16;
  --mdc-checkbox-unselected-focus-state-layer-opacity: .16;
  --mdc-checkbox-unselected-hover-state-layer-opacity: .04;
  --mdc-checkbox-unselected-pressed-state-layer-opacity: .16

  /* default/accent color */
  --mdc-checkbox-disabled-selected-checkmark-color: #fff;
  --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, .38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, .38);
  --mdc-checkbox-selected-checkmark-color: #000;
  --mdc-checkbox-selected-focus-icon-color: #69f0ae;
  --mdc-checkbox-selected-hover-icon-color: #69f0ae;
  --mdc-checkbox-selected-icon-color: #69f0ae;
  --mdc-checkbox-selected-pressed-icon-color: #69f0ae;
  --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
  --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
  --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, .54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
  --mdc-checkbox-selected-focus-state-layer-color: #69f0ae;
  --mdc-checkbox-selected-hover-state-layer-color: #69f0ae;
  --mdc-checkbox-selected-pressed-state-layer-color: #69f0ae;
  --mdc-checkbox-unselected-focus-state-layer-color: white;
  --mdc-checkbox-unselected-hover-state-layer-color: white;
  --mdc-checkbox-unselected-pressed-state-layer-color: white;
}

.mat-mdc-checkbox.mat-primary {
  /* primary color */
  --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, .38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, .38);
  --mdc-checkbox-selected-checkmark-color: #fff;
  --mdc-checkbox-selected-focus-icon-color: #9c27b0;
  --mdc-checkbox-selected-hover-icon-color: #9c27b0;
  --mdc-checkbox-selected-icon-color: #9c27b0;
  --mdc-checkbox-selected-pressed-icon-color: #9c27b0;
  --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
  --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
  --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, .54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
  --mdc-checkbox-selected-focus-state-layer-color: #9c27b0;
  --mdc-checkbox-selected-hover-state-layer-color: #9c27b0;
  --mdc-checkbox-selected-pressed-state-layer-color: #9c27b0;
  --mdc-checkbox-unselected-focus-state-layer-color: white;
  --mdc-checkbox-unselected-hover-state-layer-color: white;
  --mdc-checkbox-unselected-pressed-state-layer-color: white
}

.mat-mdc-checkbox.mat-warn {
  /* warn color */
  --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, .38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, .38);
  --mdc-checkbox-selected-checkmark-color: #fff;
  --mdc-checkbox-selected-focus-icon-color: #f44336;
  --mdc-checkbox-selected-hover-icon-color: #f44336;
  --mdc-checkbox-selected-icon-color: #f44336;
  --mdc-checkbox-selected-pressed-icon-color: #f44336;
  --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
  --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
  --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, .54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
  --mdc-checkbox-selected-focus-state-layer-color: #f44336;
  --mdc-checkbox-selected-hover-state-layer-color: #f44336;
  --mdc-checkbox-selected-pressed-state-layer-color: #f44336;
  --mdc-checkbox-unselected-focus-state-layer-color: white;
  --mdc-checkbox-unselected-hover-state-layer-color: white;
  --mdc-checkbox-unselected-pressed-state-layer-color: white
}

Chips

Chips component

.mat-mdc-standard-chip {
  /* shape */
  --mdc-chip-container-shape-family: rounded;
  --mdc-chip-container-shape-radius: 16px 16px 16px 16px;
  --mdc-chip-with-avatar-avatar-shape-family: rounded;
  --mdc-chip-with-avatar-avatar-shape-radius: 14px 14px 14px 14px;
  --mdc-chip-with-avatar-avatar-size: 28px;
  --mdc-chip-with-icon-icon-size: 18px;

  /* color */
  --mdc-chip-disabled-label-text-color: #fafafa;
  --mdc-chip-elevated-container-color: #595959;
  --mdc-chip-elevated-disabled-container-color: #595959;
  --mdc-chip-focus-state-layer-color: white;
  --mdc-chip-focus-state-layer-opacity: .12;
  --mdc-chip-label-text-color: #fafafa;
  --mdc-chip-with-icon-icon-color: #fafafa;
  --mdc-chip-with-icon-disabled-icon-color: #fafafa;
  --mdc-chip-with-icon-selected-icon-color: #fafafa;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #fafafa;
  --mdc-chip-with-trailing-icon-trailing-icon-color: #fafafa
} 

.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  /* primary color */
  --mdc-chip-disabled-label-text-color: white;
  --mdc-chip-elevated-container-color: #9c27b0;
  --mdc-chip-elevated-disabled-container-color: #9c27b0;
  --mdc-chip-focus-state-layer-color: white;
  --mdc-chip-focus-state-layer-opacity: .12;
  --mdc-chip-label-text-color: white;
  --mdc-chip-with-icon-icon-color: white;
  --mdc-chip-with-icon-disabled-icon-color: white;
  --mdc-chip-with-icon-selected-icon-color: white;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mdc-chip-with-trailing-icon-trailing-icon-color: white
}

.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent { 
  /* accent color */
  --mdc-chip-disabled-label-text-color: rgba(0, 0, 0, .87);
  --mdc-chip-elevated-container-color: #69f0ae;
  --mdc-chip-elevated-disabled-container-color: #69f0ae;
  --mdc-chip-focus-state-layer-color: white;
  --mdc-chip-focus-state-layer-opacity: .12;
  --mdc-chip-label-text-color: rgba(0, 0, 0, .87);
  --mdc-chip-with-icon-icon-color: rgba(0, 0, 0, .87);
  --mdc-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, .87);
  --mdc-chip-with-icon-selected-icon-color: rgba(0, 0, 0, .87);
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, .87);
  --mdc-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, .87)
}

.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  /* warn color */
  --mdc-chip-disabled-label-text-color: white;
  --mdc-chip-elevated-container-color: #f44336;
  --mdc-chip-elevated-disabled-container-color: #f44336;
  --mdc-chip-focus-state-layer-color: white;
  --mdc-chip-focus-state-layer-opacity: .12;
  --mdc-chip-label-text-color: white;
  --mdc-chip-with-icon-icon-color: white;
  --mdc-chip-with-icon-disabled-icon-color: white;
  --mdc-chip-with-icon-selected-icon-color: white;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;
  --mdc-chip-with-trailing-icon-trailing-icon-color: white
} 

.mat-mdc-chip.mat-mdc-standard-chip {
  /* size */
  --mdc-chip-container-height: 32px
}

.mat-mdc-standard-chip {
  /* typography */
  --mdc-chip-label-text-font: Roboto, sans-serif;
  --mdc-chip-label-text-line-height: 20px;
  --mdc-chip-label-text-size: 14px;
  --mdc-chip-label-text-tracking: .0178571429em;
  --mdc-chip-label-text-weight: 400
}

Datepicker

Datepicker component

html {
  /* default/primary color */
  --mat-datepicker-calendar-date-selected-state-text-color: white;
  --mat-datepicker-calendar-date-selected-state-background-color: #9c27b0;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(156, 39, 176, .4);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(156, 39, 176, .3);
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(156, 39, 176, .3);
  --mat-datepicker-toggle-active-state-icon-color: #9c27b0;
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(156, 39, 176, .2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
  --mat-datepicker-toggle-icon-color: white;
  --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, .7);
  --mat-datepicker-calendar-period-button-icon-color: white;
  --mat-datepicker-calendar-navigation-button-icon-color: white;
  --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, .12);
  --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, .7);
  --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, .5);
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(255, 255, 255, .3);
  --mat-datepicker-calendar-date-text-color: white;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: rgba(255, 255, 255, .5);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, .24);
  --mat-datepicker-range-input-separator-color: white;
  --mat-datepicker-range-input-disabled-state-separator-color: rgba(255, 255, 255, .5);
  --mat-datepicker-range-input-disabled-state-text-color: rgba(255, 255, 255, .5);
  --mat-datepicker-calendar-container-background-color: #424242;
  --mat-datepicker-calendar-container-text-color: white;

 /* typography */
  --mat-datepicker-calendar-text-font: Roboto, sans-serif;
  --mat-datepicker-calendar-text-size: 13px;
  --mat-datepicker-calendar-body-label-text-size: 14px;
  --mat-datepicker-calendar-body-label-text-weight: 500;
  --mat-datepicker-calendar-period-button-text-size: 14px;
  --mat-datepicker-calendar-period-button-text-weight: 500;
  --mat-datepicker-calendar-header-text-size: 11px;
  --mat-datepicker-calendar-header-text-weight: 400
}

.mat-datepicker-content.mat-accent {
  /* accent color */
  --mat-datepicker-calendar-date-selected-state-text-color: rgba(0, 0, 0, .87);
  --mat-datepicker-calendar-date-selected-state-background-color: #69f0ae;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(105, 240, 174, .4);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: rgba(0, 0, 0, .87);
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(105, 240, 174, .3);
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(105, 240, 174, .3);
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(105, 240, 174, .2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e
}

.mat-datepicker-content.mat-warn {
  /* warn color */
  --mat-datepicker-calendar-date-selected-state-text-color: white;
  --mat-datepicker-calendar-date-selected-state-background-color: #f44336;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(244, 67, 54, .4);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(244, 67, 54, .3);
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(244, 67, 54, .3);
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(244, 67, 54, .2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e
}

.mat-datepicker-toggle-active.mat-accent {
  /* accent color */
  --mat-datepicker-toggle-active-state-icon-color: #69f0ae
}

.mat-datepicker-toggle-active.mat-warn {
  /* warn color */
  --mat-datepicker-toggle-active-state-icon-color: #f44336
}

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  /* icon size */
  --mdc-icon-button-state-layer-size: 40px;
}

Dialog

Dialog component

html {
  /* shadows */
  --mdc-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12);
  --mdc-dialog-container-shadow-color: #000;

  /* border-radius */
  --mdc-dialog-container-shape: 4px;

  /* color */
  --mdc-dialog-container-color: #424242;
  --mdc-dialog-subhead-color: rgba(255, 255, 255, .87);
  --mdc-dialog-supporting-text-color: rgba(255, 255, 255, .6);

  /* typography */
  --mdc-dialog-subhead-font: Roboto, sans-serif;
  --mdc-dialog-subhead-line-height: 32px;
  --mdc-dialog-subhead-size: 20px;
  --mdc-dialog-subhead-weight: 500;
  --mdc-dialog-subhead-tracking: .0125em;
  --mdc-dialog-supporting-text-font: Roboto, sans-serif;
  --mdc-dialog-supporting-text-line-height: 24px;
  --mdc-dialog-supporting-text-size: 16px;
  --mdc-dialog-supporting-text-weight: 400;
  --mdc-dialog-supporting-text-tracking: .03125em
}

Divider

Divider component

html {
  --mat-divider-width: 1px;
  --mat-divider-color: rgba(255, 255, 255, .12);
}

Expansion panel

Expansion panel component

html {
  /* border radius */
  --mat-expansion-container-shape: 4px

  /* color */
  --mat-expansion-container-background-color: #424242;
  --mat-expansion-container-text-color: white;
  --mat-expansion-actions-divider-color: rgba(255, 255, 255, .12);
  --mat-expansion-header-hover-state-layer-color: rgba(255, 255, 255, .04);
  --mat-expansion-header-focus-state-layer-color: rgba(255, 255, 255, .04);
  --mat-expansion-header-disabled-state-text-color: rgba(255, 255, 255, .3);
  --mat-expansion-header-text-color: white;
  --mat-expansion-header-description-color: rgba(255, 255, 255, .7);
  --mat-expansion-header-indicator-color: rgba(255, 255, 255, .7)

  /* height */
  --mat-expansion-header-collapsed-state-height: 48px;
  --mat-expansion-header-expanded-state-height: 64px

  /* typography */
  --mat-expansion-header-text-font: Roboto, sans-serif;
  --mat-expansion-header-text-size: 14px;
  --mat-expansion-header-text-weight: 500;
  --mat-expansion-header-text-line-height: inherit;
  --mat-expansion-header-text-tracking: inherit;
  --mat-expansion-container-text-font: Roboto, sans-serif;
  --mat-expansion-container-text-line-height: 20px;
  --mat-expansion-container-text-size: 14px;
  --mat-expansion-container-text-tracking: .0178571429em;
  --mat-expansion-container-text-weight: 400
}

Form field

Form field Component

Input Component

Filled/Outlined

html {
  /* default/primary color */
  --mat-form-field-focus-select-arrow-color: rgba(156, 39, 176, .87);
  --mat-form-field-disabled-input-text-placeholder-color: rgba(255, 255, 255, .38);
  --mat-form-field-state-layer-color: rgba(255, 255, 255, .87);
  --mat-form-field-error-text-color: #f44336;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, .87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, .38);
  --mat-form-field-enabled-select-arrow-color: rgba(255, 255, 255, .54);
  --mat-form-field-disabled-select-arrow-color: rgba(255, 255, 255, .38);
  --mat-form-field-hover-state-layer-opacity: .08;
  --mat-form-field-focus-state-layer-opacity: .24

  /* size */
  --mat-form-field-container-height: 56px;
  --mat-form-field-filled-label-display: block;
  --mat-form-field-container-vertical-padding: 16px;
  --mat-form-field-filled-with-label-container-padding-top: 24px;
  --mat-form-field-filled-with-label-container-padding-bottom: 8px

  /* typography */
  --mat-form-field-container-text-font: Roboto, sans-serif;
  --mat-form-field-container-text-line-height: 24px;
  --mat-form-field-container-text-size: 16px;
  --mat-form-field-container-text-tracking: .03125em;
  --mat-form-field-container-text-weight: 400;
  --mat-form-field-outlined-label-text-populated-size: 16px;
  --mat-form-field-subscript-text-font: Roboto, sans-serif;
  --mat-form-field-subscript-text-line-height: 20px;
  --mat-form-field-subscript-text-size: 12px;
  --mat-form-field-subscript-text-tracking: .0333333333em;
  --mat-form-field-subscript-text-weight: 400
}

.mat-mdc-form-field.mat-accent {
  /* accent color */
  --mat-form-field-focus-select-arrow-color: rgba(105, 240, 174, .87)
}

.mat-mdc-form-field.mat-warn {
  /* warn color */
  --mat-form-field-focus-select-arrow-color: rgba(244, 67, 54, .87)
}

Filled

html {
  /* size */
  --mdc-filled-text-field-active-indicator-height: 1px;
  --mdc-filled-text-field-focus-active-indicator-height: 2px;
  --mdc-filled-text-field-container-shape: 4px;

  /* primary/default color */
  --mdc-filled-text-field-caret-color: #9c27b0;
  --mdc-filled-text-field-focus-active-indicator-color: #9c27b0;
  --mdc-filled-text-field-focus-label-text-color: rgba(156, 39, 176, .87);
  --mdc-filled-text-field-container-color: #4a4a4a;
  --mdc-filled-text-field-disabled-container-color: #464646;
  --mdc-filled-text-field-label-text-color: rgba(255, 255, 255, .6);
  --mdc-filled-text-field-disabled-label-text-color: rgba(255, 255, 255, .38);
  --mdc-filled-text-field-input-text-color: rgba(255, 255, 255, .87);
  --mdc-filled-text-field-disabled-input-text-color: rgba(255, 255, 255, .38);
  --mdc-filled-text-field-input-text-placeholder-color: rgba(255, 255, 255, .6);
  --mdc-filled-text-field-error-focus-label-text-color: #f44336;
  --mdc-filled-text-field-error-label-text-color: #f44336;
  --mdc-filled-text-field-error-caret-color: #f44336;
  --mdc-filled-text-field-active-indicator-color: rgba(255, 255, 255, .42);
  --mdc-filled-text-field-disabled-active-indicator-color: rgba(255, 255, 255, .06);
  --mdc-filled-text-field-hover-active-indicator-color: rgba(255, 255, 255, .87);
  --mdc-filled-text-field-error-active-indicator-color: #f44336;
  --mdc-filled-text-field-error-focus-active-indicator-color: #f44336;
  --mdc-filled-text-field-error-hover-active-indicator-color: #f44336;

  /* typography */
  --mdc-filled-text-field-label-text-font: Roboto, sans-serif;
  --mdc-filled-text-field-label-text-size: 16px;
  --mdc-filled-text-field-label-text-tracking: .03125em;
  --mdc-filled-text-field-label-text-weight: 400;
}

.mat-mdc-form-field.mat-accent {
  /* accent color */
  --mdc-filled-text-field-caret-color: #69f0ae;
  --mdc-filled-text-field-focus-active-indicator-color: #69f0ae;
  --mdc-filled-text-field-focus-label-text-color: rgba(105, 240, 174, .87);
}

.mat-mdc-form-field.mat-warn {
  /* warn color */
  --mdc-filled-text-field-caret-color: #f44336;
  --mdc-filled-text-field-focus-active-indicator-color: #f44336;
  --mdc-filled-text-field-focus-label-text-color: rgba(244, 67, 54, .87);
}

Outlined

html {
  /* outline size */
  --mdc-outlined-text-field-outline-width: 1px;
  --mdc-outlined-text-field-focus-outline-width: 2px;

  /* border-radius */
  --mdc-outlined-text-field-container-shape: 4px;

  /* primary/default color */
  --mdc-outlined-text-field-caret-color: #9c27b0;
  --mdc-outlined-text-field-focus-outline-color: #9c27b0;
  --mdc-outlined-text-field-focus-label-text-color: rgba(156, 39, 176, .87);
  --mdc-outlined-text-field-label-text-color: rgba(255, 255, 255, .6);
  --mdc-outlined-text-field-disabled-label-text-color: rgba(255, 255, 255, .38);
  --mdc-outlined-text-field-input-text-color: rgba(255, 255, 255, .87);
  --mdc-outlined-text-field-disabled-input-text-color: rgba(255, 255, 255, .38);
  --mdc-outlined-text-field-input-text-placeholder-color: rgba(255, 255, 255, .6);
  --mdc-outlined-text-field-error-caret-color: #f44336;
  --mdc-outlined-text-field-error-focus-label-text-color: #f44336;
  --mdc-outlined-text-field-error-label-text-color: #f44336;
  --mdc-outlined-text-field-outline-color: rgba(255, 255, 255, .38);
  --mdc-outlined-text-field-disabled-outline-color: rgba(255, 255, 255, .06);
  --mdc-outlined-text-field-hover-outline-color: rgba(255, 255, 255, .87);
  --mdc-outlined-text-field-error-focus-outline-color: #f44336;
  --mdc-outlined-text-field-error-hover-outline-color: #f44336;
  --mdc-outlined-text-field-error-outline-color: #f44336;

  /* typography */
  --mdc-outlined-text-field-label-text-font: Roboto, sans-serif;
  --mdc-outlined-text-field-label-text-size: 16px;
  --mdc-outlined-text-field-label-text-tracking: .03125em;
  --mdc-outlined-text-field-label-text-weight: 400;
}

.mat-mdc-form-field.mat-accent {
  /* accent color */
  --mdc-outlined-text-field-caret-color: #69f0ae;
  --mdc-outlined-text-field-focus-outline-color: #69f0ae;
  --mdc-outlined-text-field-focus-label-text-color: rgba(105, 240, 174, .87);
}

.mat-mdc-form-field.mat-warn {
  /* warn color */
  --mdc-outlined-text-field-caret-color: #f44336;
  --mdc-outlined-text-field-focus-outline-color: #f44336;
  --mdc-outlined-text-field-focus-label-text-color: rgba(244, 67, 54, .87);
}

Grid list

Grid list component

html {
  /* font-size */
  --mat-grid-list-tile-header-primary-text-size: 14px;
  --mat-grid-list-tile-header-secondary-text-size: 12px;
  --mat-grid-list-tile-footer-primary-text-size: 14px;
  --mat-grid-list-tile-footer-secondary-text-size: 12px
}

Icon

Icon component

.mat-icon.mat-primary {
  --mat-icon-color: #9c27b0
}

.mat-icon.mat-accent {
  --mat-icon-color: #69f0ae
}

.mat-icon.mat-warn {
  --mat-icon-color: #f44336
}

List

List component

List item

html {
  /* height */
  --mdc-list-list-item-one-line-container-height: 48px;
  --mdc-list-list-item-two-line-container-height: 64px;
  --mdc-list-list-item-three-line-container-height: 88px

  /* shape */
  --mdc-list-list-item-container-shape: 0;
  --mdc-list-list-item-leading-avatar-shape: 50%;

  /* icon size */
  --mdc-list-list-item-leading-icon-size: 24px;
  --mdc-list-list-item-leading-avatar-size: 40px;
  --mdc-list-list-item-trailing-icon-size: 24px;

  /* opacity */
  --mdc-list-list-item-disabled-state-layer-opacity: 0;
  --mdc-list-list-item-disabled-label-text-opacity: .38;
  --mdc-list-list-item-disabled-leading-icon-opacity: .38;
  --mdc-list-list-item-disabled-trailing-icon-opacity: .38
  --mdc-list-list-item-hover-state-layer-opacity: .08;
  --mdc-list-list-item-focus-state-layer-opacity: .24

  /* color */
  --mdc-list-list-item-container-color: transparent;
  --mdc-list-list-item-selected-container-color: transparent;
  --mdc-list-list-item-leading-avatar-color: transparent;
  --mdc-list-list-item-disabled-state-layer-color: transparent;
  --mdc-list-list-item-label-text-color: white;
  --mdc-list-list-item-supporting-text-color: rgba(255, 255, 255, .7);
  --mdc-list-list-item-leading-icon-color: rgba(255, 255, 255, .5);
  --mdc-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, .5);
  --mdc-list-list-item-trailing-icon-color: rgba(255, 255, 255, .5);
  --mdc-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, .5);
  --mdc-list-list-item-disabled-label-text-color: white;
  --mdc-list-list-item-disabled-leading-icon-color: white;
  --mdc-list-list-item-disabled-trailing-icon-color: white;
  --mdc-list-list-item-hover-label-text-color: white;
  --mdc-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, .5);
  --mdc-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, .5);
  --mdc-list-list-item-focus-label-text-color: white;
  --mdc-list-list-item-hover-state-layer-color: white;
  --mdc-list-list-item-focus-state-layer-color: white;

  /* typography */
  --mdc-list-list-item-label-text-font: Roboto, sans-serif;
  --mdc-list-list-item-label-text-line-height: 24px;
  --mdc-list-list-item-label-text-size: 16px;
  --mdc-list-list-item-label-text-tracking: .03125em;
  --mdc-list-list-item-label-text-weight: 400;
  --mdc-list-list-item-supporting-text-font: Roboto, sans-serif;
  --mdc-list-list-item-supporting-text-line-height: 20px;
  --mdc-list-list-item-supporting-text-size: 14px;
  --mdc-list-list-item-supporting-text-tracking: .0178571429em;
  --mdc-list-list-item-supporting-text-weight: 400;
  --mdc-list-list-item-trailing-supporting-text-font: Roboto, sans-serif;
  --mdc-list-list-item-trailing-supporting-text-line-height: 20px;
  --mdc-list-list-item-trailing-supporting-text-size: 12px;
  --mdc-list-list-item-trailing-supporting-text-tracking: .0333333333em;
  --mdc-list-list-item-trailing-supporting-text-weight: 400
}

List item radio button (List with single selection)

.mdc-list-item__start,.mdc-list-item__end {
  /* default/primary color */
  --mdc-radio-disabled-selected-icon-color: #fff;
  --mdc-radio-disabled-unselected-icon-color: #fff;
  --mdc-radio-unselected-hover-icon-color: #eeeeee;
  --mdc-radio-unselected-icon-color: rgba(255, 255, 255, .54);
  --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
  --mdc-radio-selected-focus-icon-color: #9c27b0;
  --mdc-radio-selected-hover-icon-color: #9c27b0;
  --mdc-radio-selected-icon-color: #9c27b0;
  --mdc-radio-selected-pressed-icon-color: #9c27b0
}

.mat-accent .mdc-list-item__start,.mat-accent .mdc-list-item__end {
  /* accent color */
  --mdc-radio-disabled-selected-icon-color: #fff;
  --mdc-radio-disabled-unselected-icon-color: #fff;
  --mdc-radio-unselected-hover-icon-color: #eeeeee;
  --mdc-radio-unselected-icon-color: rgba(255, 255, 255, .54);
  --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
  --mdc-radio-selected-focus-icon-color: #69f0ae;
  --mdc-radio-selected-hover-icon-color: #69f0ae;
  --mdc-radio-selected-icon-color: #69f0ae;
  --mdc-radio-selected-pressed-icon-color: #69f0ae
}

.mat-warn .mdc-list-item__start,.mat-warn .mdc-list-item__end {
  /* warn color */
  --mdc-radio-disabled-selected-icon-color: #fff;
  --mdc-radio-disabled-unselected-icon-color: #fff;
  --mdc-radio-unselected-hover-icon-color: #eeeeee;
  --mdc-radio-unselected-icon-color: rgba(255, 255, 255, .54);
  --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
  --mdc-radio-selected-focus-icon-color: #f44336;
  --mdc-radio-selected-hover-icon-color: #f44336;
  --mdc-radio-selected-icon-color: #f44336;
  --mdc-radio-selected-pressed-icon-color: #f44336
}

List option checkbox (List with selection)

.mat-mdc-list-option {
  /* default/primary color */
  --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, .38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, .38);
  --mdc-checkbox-selected-checkmark-color: #fff;
  --mdc-checkbox-selected-focus-icon-color: #9c27b0;
  --mdc-checkbox-selected-hover-icon-color: #9c27b0;
  --mdc-checkbox-selected-icon-color: #9c27b0;
  --mdc-checkbox-selected-pressed-icon-color: #9c27b0;
  --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
  --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
  --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, .54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
  --mdc-checkbox-selected-focus-state-layer-color: #9c27b0;
  --mdc-checkbox-selected-hover-state-layer-color: #9c27b0;
  --mdc-checkbox-selected-pressed-state-layer-color: #9c27b0;
  --mdc-checkbox-unselected-focus-state-layer-color: white;
  --mdc-checkbox-unselected-hover-state-layer-color: white;
  --mdc-checkbox-unselected-pressed-state-layer-color: white
}

.mat-mdc-list-option.mat-accent {
  /* accent color */
  --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, .38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, .38);
  --mdc-checkbox-selected-checkmark-color: #000;
  --mdc-checkbox-selected-focus-icon-color: #69f0ae;
  --mdc-checkbox-selected-hover-icon-color: #69f0ae;
  --mdc-checkbox-selected-icon-color: #69f0ae;
  --mdc-checkbox-selected-pressed-icon-color: #69f0ae;
  --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
  --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
  --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, .54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
  --mdc-checkbox-selected-focus-state-layer-color: #69f0ae;
  --mdc-checkbox-selected-hover-state-layer-color: #69f0ae;
  --mdc-checkbox-selected-pressed-state-layer-color: #69f0ae;
  --mdc-checkbox-unselected-focus-state-layer-color: white;
  --mdc-checkbox-unselected-hover-state-layer-color: white;
  --mdc-checkbox-unselected-pressed-state-layer-color: white
}

.mat-mdc-list-option.mat-warn {
  /* warn color */
  --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, .38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, .38);
  --mdc-checkbox-selected-checkmark-color: #fff;
  --mdc-checkbox-selected-focus-icon-color: #f44336;
  --mdc-checkbox-selected-hover-icon-color: #f44336;
  --mdc-checkbox-selected-icon-color: #f44336;
  --mdc-checkbox-selected-pressed-icon-color: #f44336;
  --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
  --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
  --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, .54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
  --mdc-checkbox-selected-focus-state-layer-color: #f44336;
  --mdc-checkbox-selected-hover-state-layer-color: #f44336;
  --mdc-checkbox-selected-pressed-state-layer-color: #f44336;
  --mdc-checkbox-unselected-focus-state-layer-color: white;
  --mdc-checkbox-unselected-hover-state-layer-color: white;
  --mdc-checkbox-unselected-pressed-state-layer-color: white
}

html {
  /* border */
  --mat-menu-container-shape: 4px

  /* color */
  --mat-menu-item-label-text-color: white;
  --mat-menu-item-icon-color: white;
  --mat-menu-item-hover-state-layer-color: rgba(255, 255, 255, .08);
  --mat-menu-item-focus-state-layer-color: rgba(255, 255, 255, .08);
  --mat-menu-container-color: #424242

  /* typography */
  --mat-menu-item-label-text-font: Roboto, sans-serif;
  --mat-menu-item-label-text-size: 16px;
  --mat-menu-item-label-text-tracking: .03125em;
  --mat-menu-item-label-text-line-height: 24px;
  --mat-menu-item-label-text-weight: 400
}

Option

Used in Autocomplete and Select components.

Select Component

Autocomplete Component

html {
  /* default/primary color */
  --mat-option-selected-state-label-text-color: #9c27b0;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: rgba(255, 255, 255, .08);
  --mat-option-focus-state-layer-color: rgba(255, 255, 255, .08);
  --mat-option-selected-state-layer-color: rgba(255, 255, 255, .08)

  /* typography */
  --mat-option-label-text-font: Roboto, sans-serif;
  --mat-option-label-text-line-height: 24px;
  --mat-option-label-text-size: 16px;
  --mat-option-label-text-tracking: .03125em;
  --mat-option-label-text-weight: 400
}

.mat-accent {
  /* accent color */
  --mat-option-selected-state-label-text-color: #69f0ae;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: rgba(255, 255, 255, .08);
  --mat-option-focus-state-layer-color: rgba(255, 255, 255, .08);
  --mat-option-selected-state-layer-color: rgba(255, 255, 255, .08)
}

.mat-warn {
  /* warn color */
  --mat-option-selected-state-label-text-color: #f44336;
  --mat-option-label-text-color: white;
  --mat-option-hover-state-layer-color: rgba(255, 255, 255, .08);
  --mat-option-focus-state-layer-color: rgba(255, 255, 255, .08);
  --mat-option-selected-state-layer-color: rgba(255, 255, 255, .08)
}

Option group

Not sure where these variables are used

html {
  /* color */
  --mat-optgroup-label-text-color: white;

  /* typography */
  --mat-optgroup-label-text-font: Roboto, sans-serif;
  --mat-optgroup-label-text-line-height: 24px;
  --mat-optgroup-label-text-size: 16px;
  --mat-optgroup-label-text-tracking: .03125em;
  --mat-optgroup-label-text-weight: 400;
}

Paginator

Paginator component

html {
  /* typography */
  --mdc-list-list-item-label-text-font: Roboto, sans-serif;
  --mdc-list-list-item-label-text-line-height: 24px;
  --mdc-list-list-item-label-text-size: 16px;
  --mdc-list-list-item-label-text-tracking: .03125em;
  --mdc-list-list-item-label-text-weight: 400;
  --mdc-list-list-item-supporting-text-font: Roboto, sans-serif;
  --mdc-list-list-item-supporting-text-line-height: 20px;
  --mdc-list-list-item-supporting-text-size: 14px;
  --mdc-list-list-item-supporting-text-tracking: .0178571429em;
  --mdc-list-list-item-supporting-text-weight: 400;
  --mdc-list-list-item-trailing-supporting-text-font: Roboto, sans-serif;
  --mdc-list-list-item-trailing-supporting-text-line-height: 20px;
  --mdc-list-list-item-trailing-supporting-text-size: 12px;
  --mdc-list-list-item-trailing-supporting-text-tracking: .0333333333em;
  --mdc-list-list-item-trailing-supporting-text-weight: 400;

  /* color */
  --mat-paginator-container-text-color: rgba(255, 255, 255, .87);
  --mat-paginator-container-background-color: #424242;
  --mat-paginator-enabled-icon-color: rgba(255, 255, 255, .54);
  --mat-paginator-disabled-icon-color: rgba(255, 255, 255, .12);

  /* size */
  --mat-paginator-container-size: 56px;

  /* container typography */
  --mat-paginator-container-text-font: Roboto, sans-serif;
  --mat-paginator-container-text-line-height: 20px;
  --mat-paginator-container-text-size: 12px;
  --mat-paginator-container-text-tracking: .0333333333em;
  --mat-paginator-container-text-weight: 400;
  --mat-paginator-select-trigger-text-size: 12px
}

.mat-mdc-paginator {
  /* page selection input */
  --mat-form-field-container-height: 40px;
  --mat-form-field-filled-label-display: none;
  --mat-form-field-container-vertical-padding: 8px;
  --mat-form-field-filled-with-label-container-padding-top: 8px;
  --mat-form-field-filled-with-label-container-padding-bottom: 8px
}

Progress bar

Progress bar Component

html {
  /* size */
  --mdc-linear-progress-active-indicator-height: 4px;
  --mdc-linear-progress-track-height: 4px;

  /* border-radius */
  --mdc-linear-progress-track-shape: 0
}

.mat-mdc-progress-bar {
  /* default/primary color */
  --mdc-linear-progress-active-indicator-color: #9c27b0;
  --mdc-linear-progress-track-color: rgba(156, 39, 176, .25)
}
.mat-mdc-progress-bar.mat-accent {
  /* accent color */
  --mdc-linear-progress-active-indicator-color: #69f0ae;
  --mdc-linear-progress-track-color: rgba(105, 240, 174, .25)
}

.mat-mdc-progress-bar.mat-warn {
  /* warn color */
  --mdc-linear-progress-active-indicator-color: #f44336;
  --mdc-linear-progress-track-color: rgba(244, 67, 54, .25)
}

Progress spinner

Progress spinner component

html {
  --mdc-circular-progress-active-indicator-width: 4px;
  --mdc-circular-progress-size: 48px

  --mdc-circular-progress-active-indicator-color: #9c27b0
}

html .mat-accent {
  --mdc-circular-progress-active-indicator-color: #69f0ae
}

html .mat-warn {
  --mdc-circular-progress-active-indicator-color: #f44336
}

Pseudo Checkbox

mat-pseudo-checkbox is used in the Select component for multi select options

Select Component

.mat-primary {
  --mat-full-pseudo-checkbox-selected-icon-color: #9c27b0;
  --mat-full-pseudo-checkbox-selected-checkmark-color: #303030;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, .7);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: #9c27b0;
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868
}

html,.mat-accent {
  --mat-full-pseudo-checkbox-selected-icon-color: #69f0ae;
  --mat-full-pseudo-checkbox-selected-checkmark-color: #303030;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, .7);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: #69f0ae;
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868
}

.mat-warn {
  --mat-full-pseudo-checkbox-selected-icon-color: #f44336;
  --mat-full-pseudo-checkbox-selected-checkmark-color: #303030;
  --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, .7);
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: #f44336;
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868
}

Radio button

Radio button component

html {
  --mdc-radio-disabled-selected-icon-opacity: .38;
  --mdc-radio-disabled-unselected-icon-opacity: .38;
  --mdc-radio-state-layer-size: 40px
}

.mat-mdc-radio-button.mat-primary {
  --mdc-radio-disabled-selected-icon-color: #fff;
  --mdc-radio-disabled-unselected-icon-color: #fff;
  --mdc-radio-unselected-hover-icon-color: #eeeeee;
  --mdc-radio-unselected-icon-color: rgba(255, 255, 255, .54);
  --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
  --mdc-radio-selected-focus-icon-color: #9c27b0;
  --mdc-radio-selected-hover-icon-color: #9c27b0;
  --mdc-radio-selected-icon-color: #9c27b0;
  --mdc-radio-selected-pressed-icon-color: #9c27b0;
  --mat-radio-ripple-color: #fff;
  --mat-radio-checked-ripple-color: #9c27b0;
  --mat-radio-disabled-label-color: rgba(255, 255, 255, .5)
}

.mat-mdc-radio-button.mat-accent {
  --mdc-radio-disabled-selected-icon-color: #fff;
  --mdc-radio-disabled-unselected-icon-color: #fff;
  --mdc-radio-unselected-hover-icon-color: #eeeeee;
  --mdc-radio-unselected-icon-color: rgba(255, 255, 255, .54);
  --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
  --mdc-radio-selected-focus-icon-color: #69f0ae;
  --mdc-radio-selected-hover-icon-color: #69f0ae;
  --mdc-radio-selected-icon-color: #69f0ae;
  --mdc-radio-selected-pressed-icon-color: #69f0ae;
  --mat-radio-ripple-color: #fff;
  --mat-radio-checked-ripple-color: #69f0ae;
  --mat-radio-disabled-label-color: rgba(255, 255, 255, .5)
}

.mat-mdc-radio-button.mat-warn {
  --mdc-radio-disabled-selected-icon-color: #fff;
  --mdc-radio-disabled-unselected-icon-color: #fff;
  --mdc-radio-unselected-hover-icon-color: #eeeeee;
  --mdc-radio-unselected-icon-color: rgba(255, 255, 255, .54);
  --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
  --mdc-radio-selected-focus-icon-color: #f44336;
  --mdc-radio-selected-hover-icon-color: #f44336;
  --mdc-radio-selected-icon-color: #f44336;
  --mdc-radio-selected-pressed-icon-color: #f44336;
  --mat-radio-ripple-color: #fff;
  --mat-radio-checked-ripple-color: #f44336;
  --mat-radio-disabled-label-color: rgba(255, 255, 255, .5)
}

Ripples

Ripple Component

html {
  --mat-ripple-color: rgba(255, 255, 255, .1);
}

Select

Select component

html {
  /* default/primary color */
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: rgba(255, 255, 255, .87);
  --mat-select-disabled-trigger-text-color: rgba(255, 255, 255, .38);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, .6);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, .54);
  --mat-select-disabled-arrow-color: rgba(255, 255, 255, .38);
  --mat-select-focused-arrow-color: rgba(156, 39, 176, .87);
  --mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)

  /* typography */
  --mat-select-trigger-text-font: Roboto, sans-serif;
  --mat-select-trigger-text-line-height: 24px;
  --mat-select-trigger-text-size: 16px;
  --mat-select-trigger-text-tracking: .03125em;
  --mat-select-trigger-text-weight: 400
}

html .mat-mdc-form-field.mat-accent {
  /* accent color */
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: rgba(255, 255, 255, .87);
  --mat-select-disabled-trigger-text-color: rgba(255, 255, 255, .38);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, .6);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, .54);
  --mat-select-disabled-arrow-color: rgba(255, 255, 255, .38);
  --mat-select-focused-arrow-color: rgba(105, 240, 174, .87);
  --mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)
}

html .mat-mdc-form-field.mat-warn {
  /* warn color */
  --mat-select-panel-background-color: #424242;
  --mat-select-enabled-trigger-text-color: rgba(255, 255, 255, .87);
  --mat-select-disabled-trigger-text-color: rgba(255, 255, 255, .38);
  --mat-select-placeholder-text-color: rgba(255, 255, 255, .6);
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, .54);
  --mat-select-disabled-arrow-color: rgba(255, 255, 255, .38);
  --mat-select-focused-arrow-color: rgba(244, 67, 54, .87);
  --mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)
}

Sidenav

Sidenav component

html {
  --mat-sidenav-container-divider-color: rgba(255, 255, 255, .12);
  --mat-sidenav-container-background-color: #424242;
  --mat-sidenav-container-text-color: white;
  --mat-sidenav-content-background-color: #303030;
  --mat-sidenav-content-text-color: white;
  --mat-sidenav-scrim-color: rgba(189, 189, 189, .6)
}

Slide toggle

Slide toggle component Styles applied to the Button of the slide toggle

.mdc-switch {
  /* disabled opacity */
  --mdc-switch-disabled-handle-opacity: .38;
  --mdc-switch-disabled-selected-icon-opacity: .38;
  --mdc-switch-disabled-track-opacity: .12;
  --mdc-switch-disabled-unselected-icon-opacity: .38;

  /* size */
  --mdc-switch-handle-height: 20px;
  --mdc-switch-handle-shape: 10px;
  --mdc-switch-handle-width: 20px;
  --mdc-switch-selected-icon-size: 18px;
  --mdc-switch-track-height: 14px;
  --mdc-switch-track-shape: 7px;
  --mdc-switch-track-width: 36px;
  --mdc-switch-unselected-icon-size: 18px;
  --mdc-switch-state-layer-size: 40px;

  /* focus/hover/active opacity */
  --mdc-switch-selected-focus-state-layer-opacity: .12;
  --mdc-switch-selected-hover-state-layer-opacity: .04;
  --mdc-switch-selected-pressed-state-layer-opacity: .1;
  --mdc-switch-unselected-focus-state-layer-opacity: .12;
  --mdc-switch-unselected-hover-state-layer-opacity: .04;
  --mdc-switch-unselected-pressed-state-layer-opacity: .1
}

General styles for the component

.mat-mdc-slide-toggle {
  /* default/primary color */
  --mdc-switch-selected-focus-state-layer-color: #ba68c8;
  --mdc-switch-selected-handle-color: #ba68c8;
  --mdc-switch-selected-hover-state-layer-color: #ba68c8;
  --mdc-switch-selected-pressed-state-layer-color: #ba68c8;
  --mdc-switch-selected-focus-handle-color: #ce93d8;
  --mdc-switch-selected-hover-handle-color: #ce93d8;
  --mdc-switch-selected-pressed-handle-color: #ce93d8;
  --mdc-switch-selected-focus-track-color: #8e24aa;
  --mdc-switch-selected-hover-track-color: #8e24aa;
  --mdc-switch-selected-pressed-track-color: #8e24aa;
  --mdc-switch-selected-track-color: #8e24aa;
  --mdc-switch-disabled-selected-handle-color: #000;
  --mdc-switch-disabled-selected-icon-color: #212121;
  --mdc-switch-disabled-selected-track-color: #f5f5f5;
  --mdc-switch-disabled-unselected-handle-color: #000;
  --mdc-switch-disabled-unselected-icon-color: #212121;
  --mdc-switch-disabled-unselected-track-color: #f5f5f5;
  --mdc-switch-handle-surface-color: var(--mdc-theme-surface, #fff);
  --mdc-switch-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
  --mdc-switch-handle-shadow-color: black;
  --mdc-switch-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);
  --mdc-switch-selected-icon-color: #212121;
  --mdc-switch-unselected-focus-handle-color: #fafafa;
  --mdc-switch-unselected-focus-state-layer-color: #f5f5f5;
  --mdc-switch-unselected-focus-track-color: #616161;
  --mdc-switch-unselected-handle-color: #9e9e9e;
  --mdc-switch-unselected-hover-handle-color: #fafafa;
  --mdc-switch-unselected-hover-state-layer-color: #f5f5f5;
  --mdc-switch-unselected-hover-track-color: #616161;
  --mdc-switch-unselected-icon-color: #212121;
  --mdc-switch-unselected-pressed-handle-color: #fafafa;
  --mdc-switch-unselected-pressed-state-layer-color: #f5f5f5;
  --mdc-switch-unselected-pressed-track-color: #616161;
  --mdc-switch-unselected-track-color: #616161;

  /* size */
  --mdc-switch-state-layer-size: 48px;

  /* typography */
  --mat-slide-toggle-label-text-font: Roboto, sans-serif;
  --mat-slide-toggle-label-text-size: 14px;
  --mat-slide-toggle-label-text-tracking: .0178571429em;
  --mat-slide-toggle-label-text-line-height: 20px;
  --mat-slide-toggle-label-text-weight: 400
}

.mat-mdc-slide-toggle.mat-accent {
  /* accent color */
  --mdc-switch-selected-focus-state-layer-color: #81c784;
  --mdc-switch-selected-handle-color: #81c784;
  --mdc-switch-selected-hover-state-layer-color: #81c784;
  --mdc-switch-selected-pressed-state-layer-color: #81c784;
  --mdc-switch-selected-focus-handle-color: #a5d6a7;
  --mdc-switch-selected-hover-handle-color: #a5d6a7;
  --mdc-switch-selected-pressed-handle-color: #a5d6a7;
  --mdc-switch-selected-focus-track-color: #43a047;
  --mdc-switch-selected-hover-track-color: #43a047;
  --mdc-switch-selected-pressed-track-color: #43a047;
  --mdc-switch-selected-track-color: #43a047
}

.mat-mdc-slide-toggle.mat-warn {
  /* warn color */
  --mdc-switch-selected-focus-state-layer-color: #e57373;
  --mdc-switch-selected-handle-color: #e57373;
  --mdc-switch-selected-hover-state-layer-color: #e57373;
  --mdc-switch-selected-pressed-state-layer-color: #e57373;
  --mdc-switch-selected-focus-handle-color: #ef9a9a;
  --mdc-switch-selected-hover-handle-color: #ef9a9a;
  --mdc-switch-selected-pressed-handle-color: #ef9a9a;
  --mdc-switch-selected-focus-track-color: #e53935;
  --mdc-switch-selected-hover-track-color: #e53935;
  --mdc-switch-selected-pressed-track-color: #e53935;
  --mdc-switch-selected-track-color: #e53935
}

Slider

Slider component

html {
  /* size */
  --mat-slider-value-indicator-width: auto;
  --mat-slider-value-indicator-height: 32px;
  --mat-slider-value-indicator-caret-display: block;
  --mat-slider-value-indicator-border-radius: 4px;
  --mat-slider-value-indicator-padding: 0 12px;
  --mat-slider-value-indicator-text-transform: none;
  --mat-slider-value-indicator-container-transform: translateX(-50%);
  --mdc-slider-active-track-height: 6px;
  --mdc-slider-active-track-shape: 9999px;
  --mdc-slider-handle-height: 20px;
  --mdc-slider-handle-shape: 50%;
  --mdc-slider-handle-width: 20px;
  --mdc-slider-inactive-track-height: 4px;
  --mdc-slider-inactive-track-shape: 9999px;
  --mdc-slider-with-overlap-handle-outline-width: 1px;
  --mdc-slider-with-tick-marks-active-container-opacity: .6;
  --mdc-slider-with-tick-marks-container-shape: 50%;
  --mdc-slider-with-tick-marks-container-size: 2px;
  --mdc-slider-with-tick-marks-inactive-container-opacity: .6;

  /* default/primary color */
  --mdc-slider-handle-color: #9c27b0;
  --mdc-slider-focus-handle-color: #9c27b0;
  --mdc-slider-hover-handle-color: #9c27b0;
  --mdc-slider-active-track-color: #9c27b0;
  --mdc-slider-inactive-track-color: #9c27b0;
  --mdc-slider-with-tick-marks-inactive-container-color: #9c27b0;
  --mdc-slider-with-tick-marks-active-container-color: white;
  --mdc-slider-disabled-active-track-color: #fff;
  --mdc-slider-disabled-handle-color: #fff;
  --mdc-slider-disabled-inactive-track-color: #fff;
  --mdc-slider-label-container-color: #fff;
  --mdc-slider-label-label-text-color: #000;
  --mdc-slider-with-overlap-handle-outline-color: #fff;
  --mdc-slider-with-tick-marks-disabled-container-color: #fff;
  --mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
  --mat-mdc-slider-ripple-color: #9c27b0;
  --mat-mdc-slider-hover-ripple-color: rgba(156, 39, 176, .05);
  --mat-mdc-slider-focus-ripple-color: rgba(156, 39, 176, .2);
  --mat-slider-value-indicator-opacity: .9

  /* typography */
  --mdc-slider-label-label-text-font: Roboto, sans-serif;
  --mdc-slider-label-label-text-size: 14px;
  --mdc-slider-label-label-text-line-height: 22px;
  --mdc-slider-label-label-text-tracking: .0071428571em;
  --mdc-slider-label-label-text-weight: 500
}

html .mat-accent {
  /* accent color */
  --mdc-slider-handle-color: #69f0ae;
  --mdc-slider-focus-handle-color: #69f0ae;
  --mdc-slider-hover-handle-color: #69f0ae;
  --mdc-slider-active-track-color: #69f0ae;
  --mdc-slider-inactive-track-color: #69f0ae;
  --mdc-slider-with-tick-marks-inactive-container-color: #69f0ae;
  --mdc-slider-with-tick-marks-active-container-color: rgba(0, 0, 0, .87);
  --mat-mdc-slider-ripple-color: #69f0ae;
  --mat-mdc-slider-hover-ripple-color: rgba(105, 240, 174, .05);
  --mat-mdc-slider-focus-ripple-color: rgba(105, 240, 174, .2)
}

html .mat-warn {
  /* warn color */
  --mdc-slider-handle-color: #f44336;
  --mdc-slider-focus-handle-color: #f44336;
  --mdc-slider-hover-handle-color: #f44336;
  --mdc-slider-active-track-color: #f44336;
  --mdc-slider-inactive-track-color: #f44336;
  --mdc-slider-with-tick-marks-inactive-container-color: #f44336;
  --mdc-slider-with-tick-marks-active-container-color: white;
  --mat-mdc-slider-ripple-color: #f44336;
  --mat-mdc-slider-hover-ripple-color: rgba(244, 67, 54, .05);
  --mat-mdc-slider-focus-ripple-color: rgba(244, 67, 54, .2)
}

Snackbar

Snackbar component

html {
  /* border-radius */
  --mdc-snackbar-container-shape: 4px

  /* color */
  --mdc-snackbar-container-color: #d9d9d9;
  --mdc-snackbar-supporting-text-color: rgba(66, 66, 66, .87);
  --mat-snack-bar-button-color: rgba(0, 0, 0, .87)

  /* typography */
  --mdc-snackbar-supporting-text-font: Roboto, sans-serif;
  --mdc-snackbar-supporting-text-line-height: 20px;
  --mdc-snackbar-supporting-text-size: 14px;
  --mdc-snackbar-supporting-text-weight: 400
}

Sort header

Sort header component

html {
  --mat-sort-arrow-color: #c6c6c6;
}

Stepper

Stepper component

html {
  /* primary/default color */
  --mat-stepper-header-icon-foreground-color: white;
  --mat-stepper-header-selected-state-icon-background-color: #9c27b0;
  --mat-stepper-header-selected-state-icon-foreground-color: white;
  --mat-stepper-header-done-state-icon-background-color: #9c27b0;
  --mat-stepper-header-done-state-icon-foreground-color: white;
  --mat-stepper-header-edit-state-icon-background-color: #9c27b0;
  --mat-stepper-header-edit-state-icon-foreground-color: white;
  --mat-stepper-container-color: #424242;
  --mat-stepper-line-color: rgba(255, 255, 255, .12);
  --mat-stepper-header-hover-state-layer-color: rgba(255, 255, 255, .04);
  --mat-stepper-header-focus-state-layer-color: rgba(255, 255, 255, .04);
  --mat-stepper-header-label-text-color: rgba(255, 255, 255, .7);
  --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, .7);
  --mat-stepper-header-selected-state-label-text-color: white;
  --mat-stepper-header-error-state-label-text-color: #f44336;
  --mat-stepper-header-icon-background-color: rgba(255, 255, 255, .7);
  --mat-stepper-header-error-state-icon-foreground-color: #f44336;
  --mat-stepper-header-error-state-icon-background-color: transparent

  /* size */
  --mat-stepper-header-height: 72px

  /* typography */
  --mat-stepper-container-text-font: Roboto, sans-serif;
  --mat-stepper-header-label-text-font: Roboto, sans-serif;
  --mat-stepper-header-label-text-size: 14px;
  --mat-stepper-header-label-text-weight: 400;
  --mat-stepper-header-error-state-label-text-size: 16px;
  --mat-stepper-header-selected-state-label-text-size: 16px;
  --mat-stepper-header-selected-state-label-text-weight: 400;
}

html .mat-step-header.mat-accent {
  /* accent color */
  --mat-stepper-header-icon-foreground-color: rgba(0, 0, 0, .87);
  --mat-stepper-header-selected-state-icon-background-color: #69f0ae;
  --mat-stepper-header-selected-state-icon-foreground-color: rgba(0, 0, 0, .87);
  --mat-stepper-header-done-state-icon-background-color: #69f0ae;
  --mat-stepper-header-done-state-icon-foreground-color: rgba(0, 0, 0, .87);
  --mat-stepper-header-edit-state-icon-background-color: #69f0ae;
  --mat-stepper-header-edit-state-icon-foreground-color: rgba(0, 0, 0, .87)
}

html .mat-step-header.mat-warn {
  /* warn color */
  --mat-stepper-header-icon-foreground-color: white;
  --mat-stepper-header-selected-state-icon-background-color: #f44336;
  --mat-stepper-header-selected-state-icon-foreground-color: white;
  --mat-stepper-header-done-state-icon-background-color: #f44336;
  --mat-stepper-header-done-state-icon-foreground-color: white;
  --mat-stepper-header-edit-state-icon-background-color: #f44336;
  --mat-stepper-header-edit-state-icon-foreground-color: white
}

Table

Table component

html {
  /* color */
  --mat-table-background-color: #424242;
  --mat-table-header-headline-color: white;
  --mat-table-row-item-label-text-color: white;
  --mat-table-row-item-outline-color: rgba(255, 255, 255, .12)

  /* size */
  --mat-table-row-item-outline-width: 1px
  --mat-table-header-container-height: 56px;
  --mat-table-footer-container-height: 52px;
  --mat-table-row-item-container-height: 52px

  /* typography */
  --mat-table-header-headline-font: Roboto, sans-serif;
  --mat-table-header-headline-line-height: 22px;
  --mat-table-header-headline-size: 14px;
  --mat-table-header-headline-weight: 500;
  --mat-table-header-headline-tracking: .0071428571em;
  --mat-table-row-item-label-text-font: Roboto, sans-serif;
  --mat-table-row-item-label-text-line-height: 20px;
  --mat-table-row-item-label-text-size: 14px;
  --mat-table-row-item-label-text-weight: 400;
  --mat-table-row-item-label-text-tracking: .0178571429em;
  --mat-table-footer-supporting-text-font: Roboto, sans-serif;
  --mat-table-footer-supporting-text-line-height: 20px;
  --mat-table-footer-supporting-text-size: 14px;
  --mat-table-footer-supporting-text-weight: 400;
  --mat-table-footer-supporting-text-tracking: .0178571429em
}

Tabs

Tabs component

html {
  /* size */
  --mdc-tab-indicator-active-indicator-height: 2px;
  --mdc-secondary-navigation-tab-container-height: 48px;

  /* border-radius */
  --mdc-tab-indicator-active-indicator-shape: 0;

  /* divider */
  --mat-tab-header-divider-color: transparent;
  --mat-tab-header-divider-height: 0
}

.mat-mdc-tab-group,.mat-mdc-tab-nav-bar {
  /* default/primary color */
  --mdc-tab-indicator-active-indicator-color: #9c27b0;
  --mat-tab-header-disabled-ripple-color: rgba(255, 255, 255, .5);
  --mat-tab-header-pagination-icon-color: #fff;
  --mat-tab-header-inactive-label-text-color: rgba(255, 255, 255, .6);
  --mat-tab-header-active-label-text-color: #9c27b0;
  --mat-tab-header-active-ripple-color: #9c27b0;
  --mat-tab-header-inactive-ripple-color: #9c27b0;
  --mat-tab-header-inactive-focus-label-text-color: rgba(255, 255, 255, .6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(255, 255, 255, .6);
  --mat-tab-header-active-focus-label-text-color: #9c27b0;
  --mat-tab-header-active-hover-label-text-color: #9c27b0;
  --mat-tab-header-active-focus-indicator-color: #9c27b0;
  --mat-tab-header-active-hover-indicator-color: #9c27b0
}

.mat-mdc-tab-group.mat-accent,.mat-mdc-tab-nav-bar.mat-accent {
  /* accent color */
  --mdc-tab-indicator-active-indicator-color: #69f0ae;
  --mat-tab-header-disabled-ripple-color: rgba(255, 255, 255, .5);
  --mat-tab-header-pagination-icon-color: #fff;
  --mat-tab-header-inactive-label-text-color: rgba(255, 255, 255, .6);
  --mat-tab-header-active-label-text-color: #69f0ae;
  --mat-tab-header-active-ripple-color: #69f0ae;
  --mat-tab-header-inactive-ripple-color: #69f0ae;
  --mat-tab-header-inactive-focus-label-text-color: rgba(255, 255, 255, .6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(255, 255, 255, .6);
  --mat-tab-header-active-focus-label-text-color: #69f0ae;
  --mat-tab-header-active-hover-label-text-color: #69f0ae;
  --mat-tab-header-active-focus-indicator-color: #69f0ae;
  --mat-tab-header-active-hover-indicator-color: #69f0ae
}

.mat-mdc-tab-group.mat-warn,.mat-mdc-tab-nav-bar.mat-warn {
  /* warn color */
  --mdc-tab-indicator-active-indicator-color: #f44336;
  --mat-tab-header-disabled-ripple-color: rgba(255, 255, 255, .5);
  --mat-tab-header-pagination-icon-color: #fff;
  --mat-tab-header-inactive-label-text-color: rgba(255, 255, 255, .6);
  --mat-tab-header-active-label-text-color: #f44336;
  --mat-tab-header-active-ripple-color: #f44336;
  --mat-tab-header-inactive-ripple-color: #f44336;
  --mat-tab-header-inactive-focus-label-text-color: rgba(255, 255, 255, .6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(255, 255, 255, .6);
  --mat-tab-header-active-focus-label-text-color: #f44336;
  --mat-tab-header-active-hover-label-text-color: #f44336;
  --mat-tab-header-active-focus-indicator-color: #f44336;
  --mat-tab-header-active-hover-indicator-color: #f44336
}

.mat-mdc-tab-group.mat-background-primary,.mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-header-with-background-background-color: #9c27b0;
  --mat-tab-header-with-background-foreground-color: white
}

.mat-mdc-tab-group.mat-background-accent,.mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-header-with-background-background-color: #69f0ae;
  --mat-tab-header-with-background-foreground-color: rgba(0, 0, 0, .87)
}

.mat-mdc-tab-group.mat-background-warn,.mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-header-with-background-background-color: #f44336;
  --mat-tab-header-with-background-foreground-color: white
}

.mat-mdc-tab-header {
  /* size */
  --mdc-secondary-navigation-tab-container-height: 48px

  /* typography */
  --mat-tab-header-label-text-font: Roboto, sans-serif;
  --mat-tab-header-label-text-size: 14px;
  --mat-tab-header-label-text-tracking: .0892857143em;
  --mat-tab-header-label-text-line-height: 36px;
  --mat-tab-header-label-text-weight: 500
}

Toolbar

Toolbar component

html {
  /* default color */
  --mat-toolbar-container-background-color: #212121;
  --mat-toolbar-container-text-color: white

  /* size */
  --mat-toolbar-standard-height: 64px;
  --mat-toolbar-mobile-height: 56px

  /* typography */
  --mat-toolbar-title-text-font: Roboto, sans-serif;
  --mat-toolbar-title-text-line-height: 32px;
  --mat-toolbar-title-text-size: 20px;
  --mat-toolbar-title-text-tracking: .0125em;
  --mat-toolbar-title-text-weight: 500;
}

.mat-toolbar.mat-primary {
  /* primary color */
  --mat-toolbar-container-background-color: #9c27b0;
  --mat-toolbar-container-text-color: white
}

.mat-toolbar.mat-accent {
  /* accent color */
  --mat-toolbar-container-background-color: #69f0ae;
  --mat-toolbar-container-text-color: rgba(0, 0, 0, .87)
}

.mat-toolbar.mat-warn {
  /* warn color */
  --mat-toolbar-container-background-color: #f44336;
  --mat-toolbar-container-text-color: white
}

Tooltip

Tooltip component

html {
  /* border-radius */
  --mdc-plain-tooltip-container-shape: 4px;

  /* color */
  --mdc-plain-tooltip-container-color: #616161;
  --mdc-plain-tooltip-supporting-text-color: #fff

  /* typography */ 
  --mdc-plain-tooltip-supporting-text-line-height: 16px
  --mdc-plain-tooltip-supporting-text-font: Roboto, sans-serif;
  --mdc-plain-tooltip-supporting-text-size: 12px;
  --mdc-plain-tooltip-supporting-text-weight: 400;
  --mdc-plain-tooltip-supporting-text-tracking: .0333333333em
}

Tree

Tree component

html {
  /* color */
  --mat-tree-container-background-color: #424242;
  --mat-tree-node-text-color: white;

  /* size */
  --mat-tree-node-min-height: 48px;
  
  /* typography */
  --mat-tree-node-text-font: Roboto, sans-serif;
  --mat-tree-node-text-size: 14px;
  --mat-tree-node-text-weight: 400;
}

Dev Diary

Mit OpenAI Assistants in wenigen Stunden zum unternehmensinternen KI-⁠Bot

8. Mai 2024 | 5 Min.

Dev Diary

Application Observability mit Grafana und OpenTelemetry

20. März 2024 | 7 Min.

Mastering Angular Material Customization: A Guide to Tailoring Components to Your Needs

Angular Material: a powerful UI component library

Where to start with Angular Material

Create your own theme

Colors

Typography

Density

Base

I’ve applied my custom theme but the components do not look like the design. What now?

Individual component customization

CSS Variables

Autocomplete

Badge

Bottom sheet

Button

Flat

Raised

Outlined

Icon

Fab/Mini Fab

Button toggle

Card

Checkbox

Chips

Datepicker

Dialog

Divider

Expansion panel

Form field

Filled/Outlined

Filled

Outlined

Grid list

Icon

List

List item

List item radio button (List with single selection)

List option checkbox (List with selection)

Menu

Option

Option group

Paginator

Progress bar

Progress spinner

Pseudo Checkbox

Radio button

Ripples

Select

Sidenav

Slide toggle

Slider

Snackbar

Sort header

Stepper

Table

Tabs

Toolbar

Tooltip

Tree

Mehr davon?

Kontaktformular