3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-10 23:02:56 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(theme-common): do not persist color mode for OS-triggered changes (#7200)

Browse source 
* fix(theme-common): do not persist color mode if switch is disabled

* New setColorMode(null) API

* reset to default without RPCS
This commit is contained in:
Joshua Chen 2022-04-21 23:29:08 +08:00 • committed by GitHub
parent 71ba449a28
commit 1412441987
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

53
packages/docusaurus-theme-common/src/contexts/colorMode.tsx
View file

@ -65,10 +65,39 @@ function useContextValue(): ContextValue {
getInitialColorMode(defaultMode),
);
const setColorMode = useCallback((newColorMode: ColorMode) => {
setColorModeState(newColorMode);
storeColorMode(newColorMode);
}, []);
useEffect(() => {
// A site is deployed without disableSwitch
// => User visits the site and has a persisted value
// => Site later enabled disableSwitch
// => Clear the previously stored value to apply the site's setting
if (disableSwitch) {
ColorModeStorage.del();
}
}, [disableSwitch]);
const setColorMode = useCallback(
(newColorMode: ColorMode | null, options: {persist?: boolean} = {}) => {
const {persist = true} = options;
if (newColorMode) {
setColorModeState(newColorMode);
if (persist) {
storeColorMode(newColorMode);
}
} else {
if (respectPrefersColorScheme) {
setColorModeState(
window.matchMedia('(prefers-color-scheme: dark)').matches
? ColorModes.dark
: ColorModes.light,
);
} else {
setColorModeState(defaultMode);
}
ColorModeStorage.del();
}
},
[respectPrefersColorScheme, defaultMode],
);
useEffect(() => {
document.documentElement.setAttribute(
@ -85,13 +114,9 @@ function useContextValue(): ContextValue {
if (e.key !== ColorModeStorageKey) {
return;
}
try {
const storedColorMode = ColorModeStorage.get();
if (storedColorMode !== null) {
setColorMode(coerceToColorMode(storedColorMode));
}
} catch (err) {
console.error(err);
const storedColorMode = ColorModeStorage.get();
if (storedColorMode !== null) {
setColorMode(coerceToColorMode(storedColorMode));
}
};
window.addEventListener('storage', onChange);
@ -109,12 +134,12 @@ function useContextValue(): ContextValue {
return undefined;
}
const mql = window.matchMedia('(prefers-color-scheme: dark)');
const onChange = ({matches}: MediaQueryListEvent) => {
const onChange = () => {
if (window.matchMedia('print').matches || previousMediaIsPrint.current) {
previousMediaIsPrint.current = window.matchMedia('print').matches;
return;
}
setColorMode(matches ? ColorModes.dark : ColorModes.light);
setColorMode(null);
};
mql.addListener(onChange);
return () => mql.removeListener(onChange);
@ -139,7 +164,6 @@ function useContextValue(): ContextValue {
);
}
setColorMode(ColorModes.light);
storeColorMode(ColorModes.light);
},
setDarkTheme() {
if (process.env.NODE_ENV === 'development') {
@ -148,7 +172,6 @@ function useContextValue(): ContextValue {
);
}
setColorMode(ColorModes.dark);
storeColorMode(ColorModes.dark);
},
}),
[colorMode, setColorMode],