fix(website): update colors correctly when palette is only customized in one color mode (#6448)

This commit is contained in:
Joshua Chen 2022-01-23 14:29:32 +08:00 committed by GitHub
parent ab1dada1aa
commit d0b4aaffed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -13,6 +13,11 @@ import {
darkStorage, darkStorage,
type ColorState, type ColorState,
updateDOMColors, updateDOMColors,
LIGHT_PRIMARY_COLOR,
DARK_PRIMARY_COLOR,
LIGHT_BACKGROUND_COLOR,
DARK_BACKGROUND_COLOR,
COLOR_SHADES,
} from '@site/src/utils/colorUtils'; } from '@site/src/utils/colorUtils';
// The ColorGenerator modifies the DOM styles. The styles are persisted in // The ColorGenerator modifies the DOM styles. The styles are persisted in
@ -27,12 +32,14 @@ export default function Toggle(props: Props): JSX.Element {
props.onChange(e); props.onChange(e);
const isDarkMode = e.target.checked; const isDarkMode = e.target.checked;
const storage = isDarkMode ? darkStorage : lightStorage; const storage = isDarkMode ? darkStorage : lightStorage;
const colorState = JSON.parse( const colorState: ColorState = JSON.parse(storage.get() ?? 'null') ?? {
storage.get() ?? 'null', baseColor: isDarkMode ? DARK_PRIMARY_COLOR : LIGHT_PRIMARY_COLOR,
) as ColorState | null; background: isDarkMode
if (colorState) { ? DARK_BACKGROUND_COLOR
updateDOMColors(colorState); : LIGHT_BACKGROUND_COLOR,
} shades: COLOR_SHADES,
};
updateDOMColors(colorState);
}} }}
/> />
); );