thanks. i kind of figured out a solution without a theme provider. may still add one though.

How does your „no theme provider“ solution look like?

im using MUI theme provider in my main layout component:

    <AppRouterCacheProvider>
      <ThemeProvider theme={theme}>
        <GrubDialog
          open={locationDialogOpen}
          onClose={closeLocationDialog}
          title="Select a Location"
        >
          <LocationForm onSelect={handleUpdateLocation} location={currentLocation} />
        </GrubDialog>
        <>
          <Header onOpenLocations={toggleLocationDialog} properties={properties}/>
          <main className={styles.appContainer}>{children}</main>
          <Footer />
        </>
        <MobileNav onOpenLocations={toggleLocationDialog} />
      </ThemeProvider>
    </AppRouterCacheProvider>

i have this to fetch my tenant store properties and generate a theme object :

  const fetchProperties = async(): Promise<void> => {
    if (currentLocation) {
      setLoading(true)
      const resp = await fetch(`/api/locations/${currentLocation?.id!}/properties`)
      const json = await resp.json()
      setProperties(json.data)
      if (json.data.length > 0) {
        setTheme(generateTheme(json.data))
      }
      setLoading(false)
    }
  }

the fetchProperties is a useEffect on page load and whenever the store location changes

the only other thing i have left to make work is adjusting root CSS variables from within the container layout component

so when the app first loads in the browser, it fetches all of the properties for the selected store location and generates a theme object for MUI to use. it shows a loading text/headline until everything is loaded. seems to be working. its not the fastest solution, but i cant afford to build the customer app everytime he updates his settings. this is too costly with regards to resources and complicates everything

once the app loads, as you flip through router pages, everything is stored inside cache so its still pretty fast. its just the initial loading of the web app is a bit slow sometimes

so technically, i am using a theme provider, but it was the MUI provider.

You might want to take a look at this thread if you want to know how I solved the problem with the help of many other people: https://nextjs-forum.com/post/1246500950345252924#message-1246500950345252924

thanks. im satisfied with the current solution but i will give it a look over

Great to hear that. Does this message solves your issue: https://nextjs-forum.com/post/1260707521207996416#message-1260855115032690690

?

yep thats basically what i did

Happy to help 🙂

Hi, I have almost the same question and want to go into implementation details:

I want to use the app router. The basic MUI theme setup looks like this (based on https://mui.com/material-ui/integrations/nextjs/#app-router):

// layout.jsx
import theme from "@/theme"

export default function RootLayout({ children }) {
  return (
    <ThemeProvider theme={modifiedTheme}>
      ...
    </ThemeProvider>
  )
}

// theme.js
'use client';
import { createTheme } from "@mui/material/styles"

const theme = () => {
  const primaryColor = "#000000",

  return createTheme({
    palette: {
      primary: {
        main: primaryColor,
      },
    ...
  })
}

we're using a client-rendered theme, but put it into the still server-side <ThemeProvider> this way the children of <ThemeProvider> still stay in the server-side context.
Now I want to dynamically change the themes primary color to a value from my database. In my opinion this can and should still be possible server-side. However I didn't understand enough of the app router yet to figure out how to do that.

my approaches were to use a createCustomTheme({primaryColor}) function which returns createTheme() but I can't call it on server-side because it will be on the client. If I have a client component <CustomThemeProvider> it will force all of its children into client-rendering, which I think is not ideal...

well aparrently I'm overthinking this... https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props says it's okay to have server components as children of client components... in this case I will stick to my client side <CustomThemeProvider>