Skip to content

CodeEditor - High contrast support #12383

@logonoff

Description

@logonoff

Is this a new component or an extension?

Enhancement to a current feature

Existing Component

CodeEditor

Describe the feature

Currently there is a isDarkTheme prop you can pass to CodeEditor to toggle the dark theme. I propose a isHighContrast prop to complement it, which would change the monaco theme to the builtin hc-light and hc-black depending on the state of isDarkMode

User Story

As a user who prefers-contrast: more, I want my entire UI to have a high contrast theme, including the code editor, so I can read the words better.

Visuals & Mockups

No response

Interaction States & Variations

Dark mode state Contrast state Monaco theme
light theme no high contrast pf-v6-theme-light
light theme high contrast hc-light
dark theme no high contrast pf-v6-theme-dark
dark theme high contrast hc-black

Accessibility (A11y)

No response

Product & Target Release

OCP 4.23

Contribution

  • I am interested in contributing this feature.

  • I have searched for similar existing requests.


Jira Issue: PF-4046

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

Status

Needs triage

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions