Can't find variable: theme

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>
    </>;
}