feat(select): add dark mode support for <pf-select>

.changeset/ten-otters-rule.md

@@ -0,0 +1,6 @@
+---
+"@patternfly/elements": minor
+---
+
+Added dark mode support for <pf-select>, improving color contrast and accessibility.
+

elements/pf-search-input/demo/index.html

@@ -29,9 +29,9 @@
   const searchInput = document.getElementById('search-input');
 
   searchInput.addEventListener('change', (event) => {
-    /* eslint-disable no-console */
+     
     console.log('Selected:', event.target.value);
-    /* eslint-disable no-console */
+     
   });
 </script>
 

elements/pf-search-input/demo/pf-search-input-with-submit.html

@@ -33,17 +33,17 @@
   const searchInput = document.getElementById('search-input');
 
   searchInput.addEventListener('change', (event) => {
-    /* eslint-disable no-console */
+     
     console.log('Selected:', event.target.value);
-    /* eslint-disable no-console */
+     
   });
 
   const form = document.querySelector('form.container');
   form.addEventListener('submit', (event) =>{
     event.preventDefault();
-    /* eslint-disable no-console */
+     
     console.log("Value:", form.elements.search?.value);
-    /* eslint-disable no-console */
+     
   })
 </script>
 

elements/pf-select/pf-select.css

@@ -534,3 +534,39 @@ pf-badge {
   background-color: var(--pf-c-divider--after--BackgroundColor);
   flex: 1 0 100%;
 }
+
+
+@media (prefers-color-scheme: dark) {
+  :host {
+    color: var(--pf-global--Color--light-100, #f0f0f0);
+  }
+
+  #toggle {
+    background-color: var(--pf-global--BackgroundColor--dark-100, #151515) !important;
+    border-color: var(--pf-global--BorderColor--dark-200, #3c3f42);
+  }
+
+  #listbox-container {
+    background-color: var(--pf-global--BackgroundColor--dark-100, #151515) !important;
+    border-color: var(--pf-global--BorderColor--dark-200, #3c3f42);
+  }
+
+  #listbox slot.disabled {
+    background-color: var(--pf-global--BackgroundColor--dark-200, #212427) !important;
+    color: var(--pf-global--Color--light-200, #d2d2d2) !important;
+  }
+
+  #toggle-button,
+  #toggle-input {
+    color: var(--pf-global--Color--light-100, #f0f0f0);
+  }
+
+  #listbox {
+    color: var(--pf-global--Color--light-100, #f0f0f0);
+  }
+
+  #outer.disabled {
+    color: var(--pf-global--disabled-color--200, #6a6e73) !important;
+    background-color: var(--pf-global--BackgroundColor--dark-200, #212427) !important;
+  }
+}