Appearance
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.
css
/* 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:
scss
@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.
scss@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.
css
md-checkbox::part(focus-ring) {
width: 32px;
height: 32px;
}