15308555518/ docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-12-25 17:22:50 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(theme): fix `useColorMode()` visual glitches due to provider unmounts/remounts (#11405)

This commit is contained in:
Sébastien Lorber 2025-09-12 19:37:30 +02:00 committed by GitHub
parent 1c484e1d59
commit 24d01bb839
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/docusaurus-theme-common/src/contexts/colorMode.tsx
View File

@ -13,6 +13,7 @@ import React, {
useMemo,
type ReactNode,
} from 'react';
import useIsBrowser from '@docusaurus/useIsBrowser';
import {ReactContextError} from '../utils/reactUtils';
import {createStorageSlot} from '../utils/storageUtils';
import {useThemeConfig} from '../utils/useThemeConfig';
@ -124,10 +125,17 @@ function useColorModeState() {
const {
colorMode: {defaultMode},
} = useThemeConfig();
const isBrowser = useIsBrowser();
const [colorMode, setColorModeState] = useState<ColorMode>(defaultMode);
const [colorModeChoice, setColorModeChoiceState] =
useState<ColorModeChoice>(null);
// Since the provider may unmount/remount on client navigation, we need to
// reinitialize the state with the correct values to avoid visual glitches.
// See also https://github.com/facebook/docusaurus/issues/11399#issuecomment-3279181314
const [colorMode, setColorModeState] = useState<ColorMode>(
isBrowser ? ColorModeAttribute.get() : defaultMode,
);
const [colorModeChoice, setColorModeChoiceState] = useState<ColorModeChoice>(
isBrowser ? ColorModeChoiceAttribute.get() : null,
);
useEffect(() => {
setColorModeState(ColorModeAttribute.get());