Skip to content

[theme] HighContrast theme#48319

Draft
silviuaavram wants to merge 4 commits intomui:masterfrom
silviuaavram:feat/high-contrast-theme
Draft

[theme] HighContrast theme#48319
silviuaavram wants to merge 4 commits intomui:masterfrom
silviuaavram:feat/high-contrast-theme

Conversation

@silviuaavram
Copy link
Copy Markdown
Member

@silviuaavram silviuaavram commented Apr 17, 2026

Added the changes (excluding the slider borders) to a separate theme object.

To be used like so:

createTheme(..., createHighContrastTheme(), ...)

Fixes #13174

Improves support for Dark High Contrast for our Inputs components. We should continue this effort with:

  • Light High Contrast
  • Focus / Hover improved support in both Dark and Light High Contrast
  • The rest of the components, not just Inputs

For disabled, use GrayText for border, placeholder and text.
For error, use mark for border and text.
For selected, use Highlight for border, HighlightText for text, and none for forcedColorAdjust.
When both error and disabled are true, disabled wins, since there's no point in showing an error control if we can't do anything about it.
Some docs examples needed style changes since they did not support high contrast.

Use Case Before After
Disabled Checkbox Screenshot 2026-04-14 at 15 53 03 Screenshot 2026-04-14 at 15 53 09
Disabled Radio Screenshot 2026-04-14 at 15 53 57 Screenshot 2026-04-14 at 15 53 53
Input Placeholder Screenshot 2026-04-14 at 15 57 49 Screenshot 2026-04-14 at 15 57 54
Disabled Inputs Screenshot 2026-04-15 at 21 02 31 Screenshot 2026-04-15 at 21 02 39
Error Inputs Screenshot 2026-04-15 at 21 03 59 Screenshot 2026-04-15 at 21 04 02
Autocomplete Disabled Options Screenshot 2026-04-14 at 16 01 44 Screenshot 2026-04-14 at 16 01 28
Rating Radio Example Screenshot 2026-04-15 at 20 45 40 Screenshot 2026-04-15 at 20 45 20
Error Radio Example Screenshot 2026-04-15 at 20 50 15 Screenshot 2026-04-15 at 20 50 07
Disabled Select Screenshot 2026-04-15 at 21 11 27 Screenshot 2026-04-15 at 21 10 45
Selected Menu Item (works also with Select and Autocomplete) Screenshot 2026-04-16 at 16 01 07 image
Disabled Slider Screenshot 2026-04-16 at 16 13 46 image
Toggle Button Selected Screenshot 2026-04-16 at 16 45 42 Screenshot 2026-04-16 at 16 45 52
Toggle Button Selected + Hovered Screenshot 2026-04-16 at 16 46 02 Screenshot 2026-04-16 at 16 45 57

@code-infra-dashboard
Copy link
Copy Markdown

code-infra-dashboard bot commented Apr 17, 2026

Bundle size

Bundle Parsed size Gzip size
@mui/material 🔺+2.91KB(+0.57%) 🔺+788B(+0.54%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/private-theming 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Deploy preview

https://deploy-preview-48319--material-ui.netlify.app/


Check out the code infra dashboard for more information about this PR.

@silviuaavram silviuaavram added accessibility a11y customization: theme Higher level theming customizability. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Apr 17, 2026
@silviuaavram silviuaavram self-assigned this Apr 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility a11y customization: theme Higher level theming customizability. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Accessibility] Some of the components are not visible or rendered properly in Windows High Contrast Mode

1 participant