@pitcher/theme

Pitcher Theme package allows you to dynamically style your app so that it matches the look and feel of the CatalogIQ instance it runs on.

When included, the @pitcher/theme package communicates with the instance to get the theme colors and exposes them as CSS custom properties that you can use to style your application.

Using as a package

To use the JS API, install the @pitcher/js-api NPM package.

npm install @pitcher/theme
# or
yarn add @pitcher/theme
# or
pnpm add @pitcher/theme

Then, you can import the API in your application.

import '@pitcher/theme'

Using from CDN

You can also use the static JS file or CDN to include the Theme package in your application.

<script src="https://cdn.jsdelivr.net/npm/@pitcher/theme"></script>

In this case, you don't have to do anything else. The package will automatically apply the CSS custom properties to your page.

CSS Custom Properties

Every variable the @pitcher/theme package exposes starts with a --p- prefix. Below are a few most important ones.

CSS Custom Property Name	Description
--p-primary	Primary color of the instance. Background color of the primary buttons. Used to highlight active buttons.
--p-primary6	Lighter version of he primary color. Standard button background.

Please note that the same variables are used within the CatalogIQ. This means you can inspect CatalogIQ to see how the colors are used and apply the same variables to your app.