How do you change your top-level theme font family?

[ryanblakeley]

Within your frontend app, if you fetch some data and want to update the top-level theme font family based on that fetched data, how would you update that theme field? useColorMode() seems like it solves that problem for colors.

[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 defaultTheme from '../lib/DEFAULT-THEME'
import { ThemeProvider } from 'theme-ui'

const App = ({ Component, pageProps }) => {
  const [theme, setTheme] = React.useState(defaultTheme)
  React.useEffect(() => {
    fetch('')
      .then(res => res.json())
      .then(data => {
        theme.fonts.body = data.font
        setTheme(theme)
      })
  }, [/* leave blank to run on init, or add hooks/state/data dependencies here */])

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

export default App

(I'm writing this on my phone & it's using an imaginary API of course, so might have issues, but maybe will help point you in the right direction?)

[ryanblakeley]

thanks @lachlanjc