Skip to content
Pando Docs

Step 2 - Include fonts, theme, and mode

The following steps should be completed in your index.html file, or equivalent - wherever your <html ... /> and <head ... /> tags are located.

Add the PS Font

In order to use the PS TT Commons font, you will need to preload it in your <head ... /> tag:

<link
  rel="preload"
  href="https://fonts.pluralsight.com/ps-tt-commons/v1/ps-tt-commons-variable-roman.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

Add the inky blue theme and color mode

Your application will require the inky blue theme to render the styles within the design system. Make sure that your <html ... /> tag contains the following attributes:

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

Theme Switcher

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

Next.js

If you are using Next.js, you can add the Pando font and themes to your root layout.tsx file.

You will modify the RootLayout() function to include the theme, module, and font:

import type { Metadata } from 'next'


export const metadata: Metadata = {
  title: 'My Next App',
  description: 'An App using Next.js',
}


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" data-theme="inkyBlue" data-color-mode="dark">
      <head>
        <link
          rel="preload"
          href="https://fonts.pluralsight.com/ps-tt-commons/v1/ps-tt-commons-variable-roman.woff2"
          as="font"
          type="font/woff2"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}