Support

Browsers

MWC aims to support the latest two major versions of browsers at the time of each release.

Current browsers and versions supported:

Browser	Version
Chrome	120 +
Edge	120 +
Firefox	119 +
Safari*	16.4 +

* previous versions of Safari may be supported with an ElementInternals polyfill.

FAQ

If you have a question that isn't listed here, consider asking it so we can include it!

How do I change the color of a button?

Many components have multiple tokens for a color, including "hover", "focus", and "pressed" states.

Use --md-sys-color-* tokens to change the key color that the component uses.

/* Buttons use the `primary` key color */
md-filled-button.spooky {
  --md-sys-color-primary: black;
  --md-sys-color-on-primary: yellow;
}

md-filled-button.error {
  --md-sys-color-primary: var(--md-sys-color-error);
  --md-sys-color-on-primary: var(--md-sys-color-on-error);
}

Why does my color change on hover/focus/pressed?

Many colors have multiple tokens, including "hover", "focus", and "pressed" states.

Rather than setting all of them, or use the --md-sys-color-* token that the component maps to (see the previous question).

Why doesn't prefers-color-scheme: dark work?

It's up to the app to decide when and how dark mode is applied. Any selector can be used with --md-sys-color-* dark theme tokens to scope how the changes apply.

For example, using Sass:

@use '@material/web/color/color';

:root {
  @media (prefers-color-scheme: dark) {
    @include color.dark-theme;
  }
}

Why not automatically? Not all apps need dark mode, and the CSS size for automatically supporting it is much higher and not as flexible.

See How do I use --md-sys-* custom properties in my styles? for more info on how to generate a set of dark theme tokens.

How do I use --md-sys-* custom properties in my styles?

• Use Sass APIs.

  @use '@material/web/color/color';
  @use '@material/web/color/typography';
  
  :root {
    @include color.light-theme;
    @include typography.theme;
  
    @media (prefers-color-scheme: dark) {
      @include color.dark-theme;
    }
  }
  

• Use the Material theme builder Figma plugin to generate a color scheme.

• Use the material-color-utilities library to generate color schemes at runtime.

How do I customize an <md-*> element that is inside another component?

Use CSS ::part()s to access sub-components. The part name is the sub-component's tag name without the "md-" prefix.

md-checkbox::part(focus-ring) {
  width: 32px;
  height: 32px;
}