Scale dropdown in system dark mode is visually broken

[TomExt9]

Scale Version
v3.0.0-beta.114

Framework and version
any

Current Behavior
same bug as #1018 but for system dark mode.

in the (#1059) is only fix for data-mode and not @media (prefers-color-scheme: dark)

Code Reproduction
Set dark mode for apps in windows and open example

[felix-ico]

Hello @Fanky9 this is a known issue and is due to the system styles for elements such as dropdowns (different browsers/OS render them differently). There is a new beta component "dropdown select" that aims to fix this issue https://telekom.github.io/scale/?path=/docs/beta-components-dropdown-select--standard. Would you mind giving that a try?

[TomExt9]

You can add this in dropdown styles and it will be fixed.

@media (prefers-color-scheme: dark) {
  .dropdown .input__dropdown {
    background-color: var(--telekom-color-background-canvas);
  }

  .dropdown:not(.dropdown--disabled):not(.dropdown--status-error) .input__dropdown:hover {
    background-color: #1b1b1b;
  }

  .dropdown:not(.dropdown--disabled).dropdown--status-error .input__dropdown:hover {
    background-color: #1b1b1b;
  }

  .dropdown--disabled .input__dropdown {
    background-color: var(--telekom-color-background-canvas);
  }
}

as u fixed it for [data-mode='dark'] (#1059)

And if u don't fix this than probably yes i'll try to use a new one .

[felix-ico]

hi @Fanky9, I'm sorry obviously I had misunderstood the issue. I added your code snippet (thanks for that) to my PR here #1279, should be available in the next release.

[felix-ico]

@Fanky9 I'd still suggest using the new dropdown component if at all possible as that follows the new design guidelines and is more future-proof (we will eventually replace the old dropdown for the new one and deprecate the legacy version).