diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx index ac3ac11aec6..b104a215a68 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx +++ b/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, '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 ( {({ 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} /> diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md index d08e97eb061..ce6c8ff4ff1 100644 --- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md +++ b/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 diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx index b31bc694360..348ba9856b9 100644 --- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx +++ b/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" /> + toggleHighContrastTheme(checked)} + aria-label="high contrast theme checkbox" + id="toggle-high-contrast-theme" + name="toggle-high-contrast-theme" + /> { /> { 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={} /> + setIsHighContrastTheme(checked)} + icon={} + /> { customControls={customControl} height="400px" isDarkTheme={isDarkTheme} + isHighContrastTheme={isHighContrastTheme} isLineNumbersVisible={isLineNumbersVisible} isMinimapVisible={isMinimapVisible} onChange={onChange}