Skip to main content

One post tagged with "material ui"

View All Tags

Forced Colors support in Material UI

· 10 min read
Silviu Alexandru Avram
Silviu Alexandru Avram
Blog Author

miami downtown canals view A view of the Miami Downtown Canals

This post explains how Windows High Contrast mode is exposed through CSS forced colors, the gaps we found in Material UI’s component support, the implementation approaches we evaluated, and why we ultimately chose an opt-in theme enhancer.

The problem​

Before Material UI v9.1.0, components generally behaved well with forced colors, but our audit identified several missing states.

The fixes fall into a few groups:

  • Form states: FilledInput, Input, OutlinedInput, FormLabel, FormHelperText, FormControlLabel, placeholders, and disabled native select icons.
  • Selection and navigation states: Autocomplete, MenuItem, ListItemButton, and ListItemIcon.
  • Disabled controls: Checkbox, Radio, Slider, and Switch.
  • Feedback, focus, and overlays: LinearProgress, ButtonBase, Tooltip, AccordionSummary, and ToggleButton.

If these cases are not visible in forced colors mode, users can lose access to state information: disabled, selected, focused, invalid, or in progress. The tricky part was not finding a way to style them.

Material UI has many styling entry points. The real challenge was choosing the right level of the system. The options we considered are documented in this post, as well as the solution we chose to fix the issues with minimal adoption effort and upgrade risk.

The following demo shows these affected states side by side.

Open the Material UI forced-colors demo in CodeSandbox.