@@ -31,6 +31,7 @@ import { SettingsModal } from '../SettingsModal';
3131const AppToolbar = ( ) => {
3232 const [ isModalOpen , setModalOpen ] = React . useState ( false ) ;
3333 const [ isDarkTheme , setDarkTheme ] = React . useState ( false ) ;
34+ const [ isHighContrast , setHighContrast ] = React . useState ( false ) ;
3435 const onModalClose = ( ) => setModalOpen ( ! isModalOpen ) ;
3536
3637 const qsContext = React . useContext ( QuickStartContext ) ;
@@ -45,6 +46,15 @@ const AppToolbar = () => {
4546 }
4647 } ;
4748
49+ const handleHighContrastChange = ( isChecked : boolean ) => {
50+ setHighContrast ( isChecked ) ;
51+ if ( isChecked ) {
52+ document . documentElement . classList . add ( 'pf-v6-theme-high-contrast' ) ;
53+ } else {
54+ document . documentElement . classList . remove ( 'pf-v6-theme-high-contrast' ) ;
55+ }
56+ } ;
57+
4858 return (
4959 < Toolbar id = "toolbar" >
5060 < ToolbarContent >
@@ -58,6 +68,15 @@ const AppToolbar = () => {
5868 onChange = { ( _event , isChecked : boolean ) => handleDarkThemeChange ( isChecked ) }
5969 />
6070 </ ToolbarItem >
71+ < ToolbarItem >
72+ < Switch
73+ id = "high-contrast-theme-switch"
74+ aria-label = "Toggle high contrast"
75+ label = "High contrast theme"
76+ isChecked = { isHighContrast }
77+ onChange = { ( _event , isChecked : boolean ) => handleHighContrastChange ( isChecked ) }
78+ />
79+ </ ToolbarItem >
6180 < ToolbarItem >
6281 < Button
6382 aria-label = "Toggle quick start"
0 commit comments