Skip to content

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

Closed
dali327519294 wants to merge 4 commits into
patternfly:mainfrom
dali327519294:feat/pf-select-dark-mode
Closed

feat(select): add dark mode support for <pf-select>#2952
dali327519294 wants to merge 4 commits into
patternfly:mainfrom
dali327519294:feat/pf-select-dark-mode

Conversation

@dali327519294

@dali327519294 dali327519294 commented Nov 6, 2025

Copy link
Copy Markdown
Contributor

What I did

Fixed bug RedHat-UX/red-hat-design-system#2681

1.Added dark mode support for <pf-select> to ensure proper contrast and accessibility in both light and dark themes.

Testing Instructions

  1. Open the <pf-select> demo page.
  2. Switch between light and dark color schemes (using the browser or system setting).
  3. Verify that the dropdown, text, and border colors adjust correctly.

Notes to Reviewers

  1. No breaking changes.
  2. Added a changeset for minor version bump.
  3. Verified behavior manually in both modes.

@changeset-bot

changeset-bot Bot commented Nov 6, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 70377f6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@patternfly/elements Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@dali327519294

Copy link
Copy Markdown
Contributor Author

Hi @bennypowers 👋
Requesting a code review for the <pf-select> dark mode support PR.
Thanks in advance for taking a look! 🙏

@netlify

netlify Bot commented Nov 10, 2025

Copy link
Copy Markdown

Deploy Preview for patternfly-elements ready!

Name Link
🔨 Latest commit 70377f6
🔍 Latest deploy log https://app.netlify.com/projects/patternfly-elements/deploys/6910694e182e77000821bb81
😎 Deploy Preview https://deploy-preview-2952--patternfly-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@dali327519294

Copy link
Copy Markdown
Contributor Author

Added basic Dark Mode support using @media (prefers-color-scheme: dark) and PatternFly global variables.

The Goal: To ensure the component is future-proofed and ready to display correctly in dark themes when PatternFly officially implements Dark Mode across the ecosystem.

Fixed bug 2681#

@bennypowers

bennypowers commented Nov 17, 2025

Copy link
Copy Markdown
Member

@zeroedin has an approach in RedHat-UX/red-hat-design-system#2681. if we update PFE there to v4.2.0, we can hack around this in RHDS without having to introduce light/dark to PFE here.

RedHat-UX/red-hat-design-system#2684 (comment)

@bennypowers

Copy link
Copy Markdown
Member

we have <rh-select> now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants