material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-09-19 09:37:36 +03:00
Code Issues Projects Releases Wiki Activity

docs: add FAQ on automatic dark mode

Browse Source 
PiperOrigin-RevId: 572601794
This commit is contained in:
Elizabeth Mitchell 2023-10-11 09:41:54 -07:00 committed by Copybara-Service
parent ff250dc983
commit 19a2ea2687
1 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs/support.md
View File

@ -69,6 +69,31 @@ 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?](#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.