fix: handle prefers-color-scheme (#1285)

* fix: handle prefers-color-scheme
telekom · Nov 3, 2022 · b889334 · b889334
1 parent c501409
commit b889334
Showing 1 changed file with 20 additions and 0 deletions.
diff --git a/packages/components/src/components/dropdown/dropdown.css b/packages/components/src/components/dropdown/dropdown.css
@@ -241,3 +241,23 @@ to fix bug in Firefox/Windows, see https://github.com/telekom/scale/issues/1018)
 [data-mode='dark'] .dropdown--disabled .input__dropdown {
   background-color: var(--telekom-color-background-canvas);
 }
+
+@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);
+  }
+}