Skip to content

feat(theme): add high contrast theme poc #11911

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

mcoker
Copy link
Contributor

@mcoker mcoker commented Jul 3, 2025

High contrast POC. You can find it under "Patterns" -> "High Contrast", or click this handy-dandy link

https://patternfly-react-pr-11911.surge.sh/patterns/high-contrast/react-demos/high-contrast/

To enable theme, turn on high contrast on your OS or you can use forced-colors mode in dev tools (below)

Screenshot 2025-07-03 at 6 33 27 PM

Core styles are in this branch - https://github.com/mcoker/patternfly/tree/hc-theme-poc-styles. To hook up to this POC, I make the changes in core, then compile and copy/paste them into the react docs dir as additional stylesheets using the command below.

yarn build-patternfly && for i in dist/base/patternfly-variables.css dist/components/Button/button.css dist/components/Drawer/drawer.css dist/components/Nav/nav.css dist/components/Page/page.css dist/components/Tabs/tabs.css; do cp $i ../patternfly-react/packages/react-docs/patternfly-docs/; done

@mcoker mcoker requested a review from lboehling July 3, 2025 23:34
@patternfly-build
Copy link
Contributor

patternfly-build commented Jul 3, 2025

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