0b4f918208
* chore: switch theme to zustand, delete context * chore: switch apps/componenets to consume the hook * chore: update storybook theme usage to use documentElement * chore: dry up theme switcher listener for storybooks * feat: optional theme param to allow toggling * chore: add additional check for matchMedia function * chore: change block explorer test to use light theme as its the default * chore: remove unused headerprops for multisig-signer * chore: remove unused props from theme switcher component * chore: dry up validateTheme func * chore: remove unused props from explorer header test * chore: use new theme switcher in account history container
26 lines
882 B
TypeScript
26 lines
882 B
TypeScript
import { useMutationObserver } from './use-mutation-observer';
|
|
import { useThemeSwitcher } from './use-theme-switcher';
|
|
|
|
/**
|
|
* Listens for theme classname changes on the body tag and applies the
|
|
* same theme to the theme store. This is required as some components
|
|
* (EG AgGrid) rely on the theme as a JS variable rather than purely a className
|
|
*
|
|
* Additionally storybook-addon-themes doesn't seem to provide the current selected
|
|
* theme in context so we listen for changes on the body tag
|
|
*/
|
|
export const useStorybookThemeObserver = () => {
|
|
const { setTheme } = useThemeSwitcher();
|
|
|
|
useMutationObserver(document.body, (mutationList) => {
|
|
if (mutationList.length) {
|
|
const body = mutationList[0].target as HTMLElement;
|
|
if (body && body.classList.contains('dark')) {
|
|
setTheme('dark');
|
|
} else {
|
|
setTheme('light');
|
|
}
|
|
}
|
|
});
|
|
};
|