I have a theme switch toggle on the top AppBar which is a client component.

The main layout is SSR and uses the nextjs App router. It has theme settings <ThemeProvider theme={lightOrDarkTheme}>. Prior to App router/SSR I was able to use the cookie I set in the TopAppBar component to affect the theme change in layout file. With SSR, the cookie which is set and I can see in the browser is not accessible by server. Cookie is on the client side, the layout.jsx file cannot read the cookie and hence the theme toggle does not work.

I would appreciate tips on how to achieve this.

• I do not want to ‘use client’ at a top level such as layout.jsx as it defeats the purpose of SSR.
• I also do not want to change TopAppBar to use server as it has way too much client code such as useEffect, mui styles …

Here is layout.jsx

import {lightTheme, darkTheme} from '@/components/theme';
import TopAppBar from '@/components/ui/topAppBar';

export default function RootLayout({
    children,
  }) {
    
    const cookieDark = cookieStore.get('darkTheme').value;
    const theme = cookieDark=="true"? darkTheme: lightTheme;
    ....
   <ThemeProvider theme={theme}>

And here is TopAppBar code:

'use client'
...
export default function TopAppBar() {
...
  const handleThemeChange = () => {
    setCookie('darkTheme',cookies.darkTheme == "true"? false: true, { path: '/' });
    setDarkState(cookies.darkTheme == "true"? false: true);
  };