Skip to content

Commit 8f1ea64

Browse files
committed
palette section
1 parent c25f07a commit 8f1ea64

1 file changed

Lines changed: 39 additions & 0 deletions

File tree

  • docs/data/material/customization/palette

docs/data/material/customization/palette/palette.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,6 +313,45 @@ The `contrastThreshold` parameter can produce counterproductive results.\
313313
Please verify that the [APCA](https://contrast.tools/?tab=apca) color contrast is improved (WCAG 3 [will use](https://typefully.com/DanHollick/wcag-3-and-apca-sle13GMW2Brp) this new algorithm).
314314
:::
315315

316+
### Windows High Contrast Mode
317+
318+
To improve component visibility in Windows High Contrast Mode (also known as [Forced Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors)), use the `enhanceHighContrast` theme enhancer.
319+
It follows the same pattern as `responsiveFontSizes`: it accepts a fully-created theme and returns an enhanced version of it with `@media (forced-colors: active)` overrides applied to the affected components.
320+
321+
```js
322+
import { createTheme, enhanceHighContrast } from '@mui/material/styles';
323+
324+
const theme = enhanceHighContrast(createTheme());
325+
```
326+
327+
By default, it uses the [CSS system color keywords](https://www.w3.org/TR/css-color-4/#css-system-colors) (`Highlight`, `HighlightText`, `ButtonBorder`, etc.).
328+
You can override individual tokens to match your brand or design requirements:
329+
330+
```js
331+
import { createTheme, enhanceHighContrast } from '@mui/material/styles';
332+
333+
const theme = enhanceHighContrast(createTheme(), {
334+
// Use ButtonText instead of GrayText for disabled elements.
335+
disabled: 'ButtonText',
336+
// Use a custom active background color.
337+
activeBackground: 'Highlight',
338+
});
339+
```
340+
341+
The following tokens are available:
342+
343+
| Token | Default | Description |
344+
| :--- | :--- | :--- |
345+
| `disabled` | `GrayText` | Color for disabled elements |
346+
| `error` | `mark` | Color for error states |
347+
| `selectedBackground` | `SelectedItem` | Background color for selected items |
348+
| `selectedText` | `SelectedItemText` | Text color on selected items |
349+
| `activeBackground` | `Highlight` | Background color for active or toggled controls |
350+
| `activeText` | `HighlightText` | Text color on active or toggled controls |
351+
| `buttonBorder` | `ButtonBorder` | Border color for interactive controls |
352+
| `buttonText` | `ButtonText` | Text and icon color on buttons |
353+
| `canvas` | `Canvas` | Background color for the page or canvas |
354+
316355
## Picking colors
317356

318357
Need inspiration? The Material Design team has built an [palette configuration tool](/material-ui/customization/color/#picking-colors) to help you.

0 commit comments

Comments
 (0)