search

hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.33k stars 285 forks source link

Wrong icon button color on dark background #586

Open pboguslawski opened 1 year ago

pboguslawski commented 1 year ago

Describe the bug Icon button

<IconButton disabled={true}>
   <Icon component={Svg} viewBox="0 0 24 24">
      <path d={mdiChevronLeft} />
   </Icon>
</IconButton>

in dark theme mode is painted with

.mdc-icon-button:disabled {
   color:rgba(0, 0, 0, 0.38);
   color:var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));
}

which makes it invisible on dark theme background (#000) or near to invisible (disabled paging button in data table component).

Shouldn't be painted with

.mdc-icon-button:disabled {
   color:rgba(255, 255, 255, 0.5);
   color:var(--mdc-theme-text-disabled-on-dark, rgba(255, 255, 255, 0.5));
}

instead in dark mode?

To Reproduce Create page in dark mode and put icon button as above.

Expected behavior Button should use visible color. probably --mdc-theme-text-disabled-on-dark as above.

Screenshots Invisible disabled icon button on #000 background: image Almost invisible disabled paging controls: image