How to theme Chakra code components?

Developer Support
1

Is there anything special that needs to be done when Theming registered Chakra code components, like a register a theme?
In the docs I see: “Applying global themes / contexts to code components” with code :

<ThemeContext.Provider>
  <PlasmicCanvasHost />
</ThemeContext.Provider>

Am I on the right track?
If so, where does this go in my code, that normally looks like this:

<ChakraProvider resetCSS theme={theme}>
  <Component {...pageProps} />
</ChakraProvider>

And do I also need to create a Global Variant?

Any help appreciated.

2

Hi @political_magpie, you should be able to add that to your plasmic-host.tsx page, which is where the PlasmicCanvasHost element lives—you’ll need it there and in your pages where you’re rendering PlasmicComponent.

(Often, for wrappers like this, you could hoist this into some app-wide global layout, such as _app.tsx in Next.js, so you don’t need to remember to add this to every page in your app)

3

Great. Will give this a go!

4

Still a little confused.
I currently have this is _app.js in Next.js (as part of Plasmic install):

import { ChakraProvider } from '@chakra-ui/react'
import theme from '../styles/theme/index'

function MyApp({ Component, pageProps }) {
    return (
      <ChakraProvider resetCSS theme={theme}>
          <Component {...pageProps} />
      </ChakraProvider>
  )
  }
  
  export default MyApp

So pages should be fine.

Just not clear what I need to add too plasmic-host.tsx

<ThemeContext.Provider>
  <PlasmicCanvasHost />
</ThemeContext.Provider>

?

5

I tried this…

import * as React from 'react';
import Script from 'next/script';
import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
import { PLASMIC } from '../plasmic-init';
import { registerAll} from "plasmic-chakra-ui-cc";
import ThemeContext from "../styles/theme";

registerAll();

export default function PlasmicHost() {
  return (
    PLASMIC && 
    <ThemeContext.Provider>
        <PlasmicCanvasHost />
    </ThemeContext.Provider>
    );
}

but in Plasmic I get the error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of PlasmicHost.

6

This is what I’m importing as ThemeContext is this coorect?:

// theme/index.js
import { extendTheme } from '@chakra-ui/react'

// Global style overrides
import styles from './styles'

// Foundational style overrides
// import borders from './foundations/borders'

// Component style overrides
import Button from './components/button'
import Avatar from './components/avatar'
import Checkbox from './components/checkbox'
import Tag from './components/tag'
import Switch from './components/switch'
import IconButton from './components/iconbutton'
import Heading from './components/heading'
import Text from './components/text'
import getChakraSemanticTokens from '../getChakraSemanticTokens'
import figmaTokensJson from '../figmaTokens.json'
const semanticTokens = getChakraSemanticTokens(figmaTokensJson)

const overrides = {
  styles,
  semanticTokens,
  // Other foundational style overrides go here
  components: {
    Button,
    ...
    // Other components go here
  }
}

export default extendTheme(overrides)
7

instead of this file, I replaced it for now with ThemeContext.js:

import React from "react";

const ThemeContext = React.createContext("light");
export default ThemeContext;

Assumed this is the 1st step, but get same error .

8

It looks like your theme code file has an export default of this theme object, which is then imported as import ThemeContext from "../styles/theme";

You can try instead import * as ThemeContext from ...

9

OK getting there - now I see this error:

image.png
image.png1039×254 37.8 KB