yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Theme changes do not propagate to custom editor components in realtime

Browse Source 
see TODO in #3031
This commit is contained in:
Tom Moor
2022-02-05 15:48:17 -08:00
parent c5a11fe17b
commit 1bb57bf15a
2 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/components/Theme.tsx
View File

@@ -12,13 +12,25 @@ type Props = {
function Theme({ children }: Props) {
const { ui } = useStores();
const theme = ui.resolvedTheme === "dark" ? dark : light;
const mobileTheme = ui.resolvedTheme === "dark" ? darkMobile : lightMobile;
const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.tablet}px)`);
const resolvedTheme = ui.resolvedTheme === "dark" ? dark : light;
const resolvedMobileTheme =
ui.resolvedTheme === "dark" ? darkMobile : lightMobile;
const isMobile = useMediaQuery(
`(max-width: ${resolvedTheme.breakpoints.tablet}px)`
);
const isPrinting = useMediaQuery("print");
const theme = isPrinting
? light
: isMobile
? resolvedMobileTheme
: resolvedTheme;
React.useEffect(() => {
window.dispatchEvent(new Event("theme-changed"));
}, [theme]);
return (
<ThemeProvider theme={isPrinting ? light : isMobile ? mobileTheme : theme}>
<ThemeProvider theme={theme}>
<>
<GlobalStyles />
{children}