Dynamic generated theme from API

[shuyang0129]

I want to change the primary color depend on different clients.

This is the development flow:

1. I would get the query string from the url to know which client is visited
2. I would make API call to request the brand color which would be the primary color in the theme.js
3. I would update the correct theme according to the client

How should I do that?

[lachlanjc]

Your exact implementation will depend a lot on the framework you're using & how you're architecting your app. However, if you wanted to do this in Next.js, here's how I might go about it:

// pages/_app.js
import * as React from 'react'
import { useRouter } from 'next/router'
import defaultTheme from '../lib/DEFAULT-THEME'
import { ThemeProvider } from 'theme-ui'

const App = ({ Component, pageProps }) => {
  const { query } = useRouter()
  const [theme, setTheme] = React.useState(defaultTheme)
  React.useEffect(() => {
    fetch(`/api/client?id=${query.clientId}`)
      .then(res => res.json())
      .then(client => {
        theme.colors.primary = client.color
        setTheme(theme)
      })
  }, [query.clientId])

  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default App

This is using an imaginary API, but I hope will help point you in the right direction? :)

[shuyang0129]

Wow!! Thx for the reply. That is exactly the way I was doing. I thought there would be more Theme-UI way to do it. Seems I was in the right direction, feel more confident now, thx =)

[hasparus]

@shuyang0129 If this can give you more confidence — I saved entire tenant themes in the database. Whole themes edited by users and fetched during SSR.

[shuyang0129]

Hi, I followed how @lachlanjc implemented, and I had another problem. Say I have three clients, each of them has their own primary color. When I switch between different clientIDs by changing the id from the query, it seems sometimes the previous primary color would be cached and would not change to the correct primary color.

[lachlanjc]

Unfortunately I've never implemented something like this myself so I haven't run into this issue specifically. I wonder about playing around with a custom CacheProvider? https://theme-ui.com/guides/custom-cache-provider

[shuyang0129]

Thank you for the reply @lachlanjc I will try it 😄