Skip to content

Commit

Permalink
[docs] Format Pigment CSS docs
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Sep 18, 2024
1 parent 4663ab4 commit 22c486e
Showing 1 changed file with 9 additions and 10 deletions.
19 changes: 9 additions & 10 deletions docs/data/material/experimental-api/pigment-css/pigment-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,6 @@ Pigment CSS uses the `prefers-color-scheme` media query by default to switch be
```js
const colorScheme = css`
background-color: ${({ theme }) => theme.colorSchemes.dark.colors.background};
color: ${({ theme }) => theme.colorSchemes.dark.colors.foreground};
@media (prefers-color-scheme: light) {
Expand All @@ -299,14 +298,14 @@ const colorScheme = css`

You can also customize the behavior by providing a `getSelector` function:

```js
extendTheme({
colorSchemes: {
light: { ... },
dark: { ... },
},
+ getSelector: (colorScheme) => colorScheme ? `.theme-${colorScheme}` : ':root',
});
```diff
extendTheme({
colorSchemes: {
light: { ... },
dark: { ... },
},
+ getSelector: (colorScheme) => colorScheme ? `.theme-${colorScheme}` : ':root',
});
```

### The sx prop
Expand All @@ -324,7 +323,7 @@ The `sx` prop works with all Material UI components as well as HTML elements an

If you use the `sx` prop on an HTML element, you'll need to augment the `HTMLAttributes` interface:

```js
```ts
type Theme = {
// your theme type
};
Expand Down

0 comments on commit 22c486e

Please sign in to comment.