Skip to content

feat(code-editor): add high contrast theme support#12430

Open
wise-king-sullyman wants to merge 1 commit into
patternfly:mainfrom
wise-king-sullyman:code-editor-high-contrast
Open

feat(code-editor): add high contrast theme support#12430
wise-king-sullyman wants to merge 1 commit into
patternfly:mainfrom
wise-king-sullyman:code-editor-high-contrast

Conversation

@wise-king-sullyman
Copy link
Copy Markdown
Collaborator

@wise-king-sullyman wise-king-sullyman commented May 20, 2026 •
edited by coderabbitai Bot
Loading

What: Closes #12383

Additional issues:

Summary by CodeRabbit

  • New Features

    • Introduced high-contrast mode toggle for improved accessibility in the code editor.
    • CodeEditor now supports four distinct themes: light, dark, high-contrast light, and high-contrast dark modes.
    • High-contrast control integrated into editor examples and demo applications.

  • Tests

    • Added tests to verify correct theme behavior across all mode combinations.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 20, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f80d37f7-bd4d-490f-8b9f-0cdc9c7e5441

📥 Commits

Reviewing files that changed from the base of the PR and between 3a52167 and 21581b3.

⛔ Files ignored due to path filters (1)
  • packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (4)
  • packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
  • packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx
  • packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/CodeEditorDemo/CodeEditorDemo.tsx

Walkthrough

CodeEditor component adds support for high-contrast mode via a new isHighContrast prop that selects between four Monaco themes: light, dark, high-contrast light, and high-contrast dark. Tests verify correct theme selection, and example components demonstrate the feature with a checkbox toggle.

Changes

High-contrast CodeEditor theme selection

Layer / File(s) Summary
CodeEditor theme computation and tests
packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx, packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx		 CodeEditor accepts the new isHighContrast prop and computes the Monaco theme via memoized logic, selecting 'hc-black' when both dark and high-contrast are enabled, 'hc-light' for high-contrast alone, 'pf-v6-theme-dark' for dark theme, and 'pf-v6-theme-light' by default. The mock is updated to expose the theme prop via data-theme, and tests verify each combination.
Example implementations with high-contrast toggle
packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx, packages/react-integration/demo-app-ts/src/components/demos/CodeEditorDemo/CodeEditorDemo.tsx		 CodeEditorBasic and CodeEditorDemo both add isHighContrast state, a toggle handler, and a "High contrast" checkbox. Both pass the state to CodeEditor via the new prop.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

Suggested reviewers

  • lboehling
  • kmcfaul
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main change: adding high contrast theme support to the CodeEditor component.
Linked Issues check ✅ Passed All coding requirements from issue #12383 are met: isHighContrast prop added, correct theme mapping implemented for all four combinations, and both examples updated.
Out of Scope Changes check ✅ Passed All changes are directly related to implementing high contrast theme support; no unrelated modifications detected.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented May 20, 2026 •
edited
Loading

Preview: https://pf-react-pr-12430.surge.sh

A11y report: https://pf-react-pr-12430-a11y.surge.sh

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

CodeEditor - High contrast support

2 participants

@wise-king-sullyman @patternfly-build