PDFTron Global Chakra Theme

A shared Chakra UI theme to be shared across various PDFTron projects.

Basic usage

First install the package:

yarn add @pdftron/chakra-theme

Now import the theme and pass to the ChakraProvider:

import createTheme from '@pdftron/chakra-theme';
import { ChakraProvider } from "@chakra-ui/react"

const theme = createTheme();

export default function App() {

  return (
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  )
}

Options

Things like fonts and breakpoints can be configured via options.

The createTheme accepts an object with the following properties (all optional):

• primaryFont (string) the name of your primary font. Defaults to proxima-nova
• secondaryFont (string) the name of your secondary font. Defaults to proxima-nova
• backupFont (string) the font to use if the main fonts cannot be loaded. Also used for font swapping. Should be set to a system font. Defaults to arial
• breakpoints (object) Chakra breakpoints to use. Defaults to {sm: '600px', lg: '900px'}

Extending the theme

The theme can be extended using the extendTheme function provided by Chakra.

import { extendTheme } from "@chakra-ui/react";
import createTheme from '@pdftron/chakra-theme';

const baseTheme = createTheme();

const theme = extendTheme({
  {
    // you custom theme here
  },
  baseTheme
})

Local installation / development

To run the project locally, first clone the repo:

git clone [email protected]:XodoDocs/pdftron-chakra-theme.git
cd pdftron-chakra-theme

Install dependencies:

yarn

Run the storybook:

yarn storybook