Step 3 - Add the Theme & Mode

In order to render the color tokens on your project, we need to set the theme and mode in the app. This is because our tokens depend on the theme and mode to display properly.

If you skip this step, you will not be able to see Pando colors within your project.

In your index.html (or the root component of your project), add:

<html lang="en" data-theme="inkyBlue" data-color-mode="dark" />

If you want to use a theme switcher, then you can utilize the hook.

Let’s use one of Pando’s tokens!

import { css } from '../styled-system/css' // This path may differ depending on your project setup and where your `styled-system` directory generates

function TestToken() {
  return (
    <div className={css({ bg: 'success.surface.initial' })}>
      Success! I am a token!
    </div>
  )
}