[material-ui][Menu] Update icons to behave consistently in light & dark mode

[gerdadesign]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: Current icon menu: https://mui.com/material-ui/react-menu/#icon-menu in dark mode

Current behavior 😯

Light mode: Active + unfocused icons are at 54% opacity Active + focused icons do not change

Dark mode: Active + unfocused icons are at 100% opacity Active + focused icons do not change

Expected behavior 🤔

Material Design 2 guidelines for light and dark mode indicated that active + unfocused in dark mode should be at 70% opacity.

Noting that Material Design 3 handles this differently and does not change the icon color upon focus. They opt for outlined vs filled icons in many examples.

Context 🔦

#6619 comment

Your environment 🌎

No response

[ZeeshanTamboli]

@gerdadesign Even in light mode, I could not see lesser opacity getting applied for icons while in inactive or active + unfocused states:

Recording_1672051808115.webm

Or am I checking in a wrong way? I use Windows OS.

[gerdadesign]

@ZeeshanTamboli You're correct. I've updated the description. There is lower opacity in our disabled/inactive state, but we do not change opacity for focused.

Furthermore, our dark primary text is at 100% #FFF while Material (MD2) lists it at 87%. MD3 also uses slightly off white and off black color values.

It seems there are a few options:

1. update the focused state color for both light mode and dark mode (but with Material You's new handling of icons, this may not be worth it)
2. update dark mode icon to be a lower opacity (70%) and it will then follow the same behaviour as light mode currently
3. same as 2. and also update the primary text color in dark mode

Dark mode: #FFFFFF 100%	Dark mode: #FFFFFF Icon 70%, Text 87%

[oliviertassinari]

Chrome v108 main menu in dark mode on Android 13. The icons have an opacity: