diff --git a/.changeset/ten-otters-rule.md b/.changeset/ten-otters-rule.md new file mode 100644 index 0000000000..eda11bfaea --- /dev/null +++ b/.changeset/ten-otters-rule.md @@ -0,0 +1,6 @@ +--- +"@patternfly/elements": minor +--- + +Added dark mode support for , improving color contrast and accessibility. + \ No newline at end of file diff --git a/elements/pf-search-input/demo/index.html b/elements/pf-search-input/demo/index.html index 9a48121cba..9d167ed1ee 100644 --- a/elements/pf-search-input/demo/index.html +++ b/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 */ + }); diff --git a/elements/pf-search-input/demo/pf-search-input-with-submit.html b/elements/pf-search-input/demo/pf-search-input-with-submit.html index 4282ef9e0f..2973a0be6b 100644 --- a/elements/pf-search-input/demo/pf-search-input-with-submit.html +++ b/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 */ + }) diff --git a/elements/pf-select/pf-select.css b/elements/pf-select/pf-select.css index 27a383ecbd..741cf61d10 100644 --- a/elements/pf-select/pf-select.css +++ b/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; + } +}