function App() {
const [themeColour, setThemeColour] = createSignal(
getSavedColourScheme() // 'light' or 'dark'; this is known to work
);
createEffect(() => {
window.localStorage.theme = themeColour();
});
const palette = createMemo(() => createPalette({
mode: themeColour(),
primary: {
main: themeColour() == 'dark' ? '#bb86fc' : '#6200ee',
},
secondary: {
main: '#03dac6',
},
}));
const theme = createTheme({palette});
console.log(themeColour(), palette(), theme); // this prints a valid theme object
return <>
<ThemeProvider theme={theme}> {/* for some reason, this errors */}
<CssBaseline />
<AppBar position="static">
<Toolbar>
<Typography variant="h6" component="h1">{theme}</Typography> {/* This shows '[object Object]' */}
</Toolbar>
</AppBar>
</ThemeProvider>
</>;
}
function App() {
const [themeColour, setThemeColour] = createSignal(
getSavedColourScheme() // 'light' or 'dark'; this is known to work
);
createEffect(() => {
window.localStorage.theme = themeColour();
});
const palette = createMemo(() => createPalette({
mode: themeColour(),
primary: {
main: themeColour() == 'dark' ? '#bb86fc' : '#6200ee',
},
secondary: {
main: '#03dac6',
},
}));
const theme = createTheme({palette});
console.log(themeColour(), palette(), theme); // this prints a valid theme object
return <>
<ThemeProvider theme={theme}> {/* for some reason, this errors */}
<CssBaseline />
<AppBar position="static">
<Toolbar>
<Typography variant="h6" component="h1">{theme}</Typography> {/* This shows '[object Object]' */}
</Toolbar>
</AppBar>
</ThemeProvider>
</>;
}