diff --git a/packages/documentation-framework/components/themeSelector/themeSelector.js b/packages/documentation-framework/components/themeSelector/themeSelector.js index 1d86e86152..32c40e907b 100644 --- a/packages/documentation-framework/components/themeSelector/themeSelector.js +++ b/packages/documentation-framework/components/themeSelector/themeSelector.js @@ -150,9 +150,9 @@ export const ThemeSelector = ({ id }) => { onChange={handleThemeVariantChange} /> diff --git a/packages/documentation-framework/hooks/useTheme.js b/packages/documentation-framework/hooks/useTheme.js index b9551474d3..2473987e3d 100644 --- a/packages/documentation-framework/hooks/useTheme.js +++ b/packages/documentation-framework/hooks/useTheme.js @@ -15,7 +15,7 @@ const CONTRAST_MODES = { const THEME_VARIANT_MODES = { DEFAULT: 'theme-default', - UNIFIED: 'theme-redhat' + FELT: 'theme-felt' }; export const THEME_TYPES = { @@ -46,7 +46,13 @@ class ThemeManager { if (!this.isBrowser) { return; } - const storedValue = localStorage.getItem(this.storageKey); + + let storedValue = localStorage.getItem(this.storageKey); + if (storedValue === 'theme-redhat') { + storedValue = 'theme-felt'; + localStorage.setItem(this.storageKey, storedValue); + } + return storedValue || this.defaultMode; } @@ -190,8 +196,8 @@ const themeVariantManager = new ThemeManager({ storageKey: 'theme-variant-preference', modes: THEME_VARIANT_MODES, defaultMode: THEME_VARIANT_MODES.DEFAULT, - cssClass: 'pf-v6-theme-redhat', - classEnabledMode: THEME_VARIANT_MODES.UNIFIED, + cssClass: 'pf-v6-theme-felt', + classEnabledMode: THEME_VARIANT_MODES.FELT, mediaQueryString: '(prefers-color-scheme: dark)' // Not used for variant, but required });