diff --git a/packages/dev/src/common/Page.tsx b/packages/dev/src/common/Page.tsx index 4e8a0bb1..646ccfe0 100644 --- a/packages/dev/src/common/Page.tsx +++ b/packages/dev/src/common/Page.tsx @@ -31,6 +31,7 @@ import { SettingsModal } from '../SettingsModal'; const AppToolbar = () => { const [isModalOpen, setModalOpen] = React.useState(false); const [isDarkTheme, setDarkTheme] = React.useState(false); + const [isHighContrast, setHighContrast] = React.useState(false); const onModalClose = () => setModalOpen(!isModalOpen); const qsContext = React.useContext(QuickStartContext); @@ -45,6 +46,15 @@ const AppToolbar = () => { } }; + const handleHighContrastChange = (isChecked: boolean) => { + setHighContrast(isChecked); + if (isChecked) { + document.documentElement.classList.add('pf-v6-theme-high-contrast'); + } else { + document.documentElement.classList.remove('pf-v6-theme-high-contrast'); + } + }; + return ( @@ -58,6 +68,15 @@ const AppToolbar = () => { onChange={(_event, isChecked: boolean) => handleDarkThemeChange(isChecked)} /> + + handleHighContrastChange(isChecked)} + /> +