Hey i’ve been struggling for hours for something that seams simple as first glance. Idea is simple i have Theme with dark and light pallete and i want to switch between them using the useColorScheme hook.
my client Provider:
'use client';
import { CssBaseline, ThemeProvider, useColorScheme } from '@mui/material';
import theme from '@/styles/theme';
import { ReactNode, useEffect } from 'react';
interface Props {
children: ReactNode;
}
export default function ClientThemeProvider({ children }: Props) {
const { mode, setMode } = useColorScheme(); // useColorScheme to manage theme
// Set the theme mode based on the stored value or default to dark
useEffect(() => {
const storedMode = localStorage.getItem('mui-mode');
if (!storedMode) {
setMode('dark'); // Set dark mode as default
} else {
setMode(storedMode as 'light' | 'dark'); // Set stored mode (light or dark)
}
}, [setMode]);
// Save the mode in localStorage every time it changes
useEffect(() => {
if (mode) {
localStorage.setItem('mui-mode', mode);
}
}, [mode]);
// Dynamically apply the theme based on the current mode
const appliedTheme = { ...theme, palette: { mode } };
return (
<ThemeProvider theme={appliedTheme}>
<CssBaseline />
{children}
</ThemeProvider>
);
}
my theme:
'use client';
import { extendTheme } from '@mui/material/styles';
import { Roboto } from 'next/font/google';
// Load Roboto font from Google Fonts
const roboto = Roboto({
weight: ['300', '400', '500', '700'],
subsets: ['latin'],
display: 'swap',
});
// Create the extended theme with color schemes (light and dark)
const theme = extendTheme({
cssVarPrefix: 'mui', // Enable CSS variables
typography: {
fontFamily: roboto.style.fontFamily,
},
colorSchemes: {
light: {
palette: {
mode: 'light',
background: {
default: '#f5f5f5', // Light mode background color
paper: '#ffffff',
},
text: {
primary: '#000000',
},
},
},
dark: {
palette: {
mode: 'dark',
background: {
default: '#121212', // Dark mode background color
paper: '#1e1e1e',
},
text: {
primary: '#ffffff',
},
},
},
},
});
export default theme;
my root layout:
<body>
<ClientThemeProvider>
<AppRouterCacheProvider>
<UserProvider token={tokens?.decodedToken}>
<Box
sx={{
display: 'flex',
width: '100%',
height: '98%',
marginTop: '10px',
alignItems: 'center',
}}
>
{/* {tokens?.decodedToken && <Navigation />} */}
<Box style={{ width: tokens?.decodedToken ? '70%' : '100%' }}>{children}</Box>
</Box>
</UserProvider>
</AppRouterCacheProvider>
</ThemeProvider>
</body>
and then i have in some client component something like this:
setMode(mode === 'light' ? 'dark' : 'light'); // Toggle between light and dark
nothing is changing i always start on darkmode for whatever reason and it never changes