Skip to content

Commit

Permalink
Update Colors.md
Browse files Browse the repository at this point in the history
  • Loading branch information
mfranzke authored Dec 5, 2023
1 parent 08bd129 commit 10233b9
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions packages/foundations/docs/Colors.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,14 @@ There are several variants: `base`, `brand`, `neutral`, `critical`, `information
### Dark- & Light-Mode

We provide tokens for both dark- and light-mode. If you include the `db-ui-42` style you get a media query `@media (prefers-color-scheme: dark)` with the relevant tokens. You can [emulate](https://developer.chrome.com/docs/devtools/rendering/emulate-css/) the modes inside the devtools.
We recommend using the default media query based on the user preference, but if you want to force a mode for you page or a container you can do it with `data-color-scheme="dark/light"`:
We recommend using the default media query based on the user preference, but if you want to force a mode for your page or a container you can do it with adding the attributes `data-color-scheme="dark"` or `data-color-scheme="light"`:

#### HTML

```html
<div data-color-scheme="dark">...</div>
```

We're providing an example [here](./color-schemes).
We're providing an example in our [color schemes documentation](./color-schemes).

We need to set the `base` background to the element with `[data-color-scheme]` so if you want to change the background to another color, make sure to use a wrapping tag like `div` with the `[data-color-scheme]` to avoid issues.

0 comments on commit 10233b9

Please sign in to comment.