feat(CodeEditor): add isHighContrastTheme

Adds a new prop, `isHighContrastTheme`, which switches the CodeEditor over to the monaco-provided `hc-black` and `hc-light` themes (based on the value of `isDarkTheme`) when enabled.

A custom PatternFly variant of the hc-black and hc-light themes can come in a follow up, depending on the direction design wants to take on this

Author: logonoff

packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactNode, useEffect, useRef, useState } from 'react';
+import { HTMLProps, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor';
 import fileUploadStyles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
@@ -157,6 +157,8 @@ export interface CodeEditorProps extends Omit<HTMLProps<HTMLDivElement>, 'onChan
   isCopyEnabled?: boolean;
   /** Flag indicating the editor is styled using monaco's dark theme. */
   isDarkTheme?: boolean;
+  /** Flag indicating the editor is styled using monaco's high contrast themes. */
+  isHighContrastTheme?: boolean;
   /** Flag that enables component to consume the available height of its container. If `height` prop is set to 100%, this will also become enabled. */
   isFullHeight?: boolean;
   /** Flag indicating the editor has a plain header. */
@@ -286,6 +288,7 @@ export const CodeEditor = ({
   height,
   isCopyEnabled = false,
   isDarkTheme = false,
+  isHighContrastTheme = false,
   isDownloadEnabled = false,
   isFullHeight = false,
   isHeaderPlain = false,
@@ -462,6 +465,13 @@ export const CodeEditor = ({
     headerMainContent ||
     !!shortcutsPopoverProps.bodyContent;
 
+  const theme = useMemo(() => {
+    if (isHighContrastTheme) {
+      return isDarkTheme ? 'hc-black' : 'hc-light';
+    }
+    return isDarkTheme ? 'pf-v6-theme-dark' : 'pf-v6-theme-light';
+  }, [isHighContrastTheme, isDarkTheme]);
+
   return (
     <Dropzone multiple={false} onDropAccepted={onDropAccepted} onDropRejected={onDropRejected}>
       {({ getRootProps, getInputProps, isDragActive, open }) => {
@@ -579,7 +589,7 @@ export const CodeEditor = ({
               onChange={onModelChange}
               onMount={editorDidMount}
               loading={loading}
-              theme={isDarkTheme ? 'pf-v6-theme-dark' : 'pf-v6-theme-light'}
+              theme={theme}
               {...editorProps}
               beforeMount={editorBeforeMount}
             />

packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md

@@ -15,6 +15,7 @@ import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-icon';
 import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import FontIcon from '@patternfly/react-icons/dist/esm/icons/font-icon';
+import AdjustIcon from '@patternfly/react-icons/dist/esm/icons/adjust-icon';
 
 ## Examples
 

packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx

@@ -4,6 +4,7 @@ import { Checkbox } from '@patternfly/react-core';
 
 export const CodeEditorBasic: React.FunctionComponent = () => {
   const [isDarkTheme, setIsDarkTheme] = useState(false);
+  const [isHighContrastTheme, setIsHighContrastTheme] = useState(false);
   const [isLineNumbersVisible, setIsLineNumbersVisible] = useState(true);
   const [isReadOnly, setIsReadOnly] = useState(false);
   const [isMinimapVisible, setIsMinimapVisible] = useState(false);
@@ -12,6 +13,10 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
     setIsDarkTheme(checked);
   };
 
+  const toggleHighContrastTheme = (checked) => {
+    setIsHighContrastTheme(checked);
+  };
+
   const toggleLineNumbers = (checked) => {
     setIsLineNumbersVisible(checked);
   };
@@ -43,6 +48,14 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
         id="toggle-theme"
         name="toggle-theme"
       />
+      <Checkbox
+        label="High contrast theme"
+        isChecked={isHighContrastTheme}
+        onChange={(_event, checked) => toggleHighContrastTheme(checked)}
+        aria-label="high contrast theme checkbox"
+        id="toggle-high-contrast-theme"
+        name="toggle-high-contrast-theme"
+      />
       <Checkbox
         label="Line numbers"
         isChecked={isLineNumbersVisible}
@@ -69,6 +82,7 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
       />
       <CodeEditor
         isDarkTheme={isDarkTheme}
+        isHighContrastTheme={isHighContrastTheme}
         isLineNumbersVisible={isLineNumbersVisible}
         isReadOnly={isReadOnly}
         isMinimapVisible={isMinimapVisible}

packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorConfigurationModal.tsx

@@ -3,6 +3,7 @@ import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-icon';
 import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
 import HashtagIcon from '@patternfly/react-icons/dist/esm/icons/hashtag-icon';
 import FontIcon from '@patternfly/react-icons/dist/esm/icons/font-icon';
+import AdjustIcon from '@patternfly/react-icons/dist/esm/icons/adjust-icon';
 import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
 import {
   Flex,
@@ -156,6 +157,7 @@ export const CodeEditorConfigurationModal: React.FunctionComponent = () => {
 
   const [isMinimapVisible, setIsMinimapVisible] = useState(true);
   const [isDarkTheme, setIsDarkTheme] = useState(false);
+  const [isHighContrastTheme, setIsHighContrastTheme] = useState(false);
   const [isLineNumbersVisible, setIsLineNumbersVisible] = useState(true);
   const [fontSize, setFontSize] = useState(14);
 
@@ -181,6 +183,14 @@ export const CodeEditorConfigurationModal: React.FunctionComponent = () => {
         onChange={(_e, checked) => setIsDarkTheme(checked)}
         icon={<MoonIcon />}
       />
+      <ConfigModalSwitch
+        key="high-contrast-theme-switch"
+        title="High contrast theme"
+        description="Switch the editor to a high contrast color theme"
+        isChecked={isHighContrastTheme}
+        onChange={(_e, checked) => setIsHighContrastTheme(checked)}
+        icon={<AdjustIcon />}
+      />
       <ConfigModalSwitch
         key="line-numbers-switch"
         title="Line numbers"
@@ -221,6 +231,7 @@ export const CodeEditorConfigurationModal: React.FunctionComponent = () => {
       customControls={customControl}
       height="400px"
       isDarkTheme={isDarkTheme}
+      isHighContrastTheme={isHighContrastTheme}
       isLineNumbersVisible={isLineNumbersVisible}
       isMinimapVisible={isMinimapVisible}
       onChange={onChange}