Skip to main content

Customizing Themes

Our semantic token system allows for easily customizing the themes depending on your use case.


This page assumes you are using the initial setup. If you would like to have access to the Pando themes without using the setup, see the Using design-tokens section.

Customizing with CSS

In CSS, we set the default theme in the :root selector via our initial setup, so all you need to do is overwrite the tokens you want to customize in the :root CSS selector of your project.

For example, in your root CSS file, add this:

Updating the default/text token in your project.
:root {
--ps-text: #fff;

To customize a specific theme in Pando (i.e. light, dark, etc.), you need to target the corresponding selectors.

For example, to modify the "light" theme, add this to your CSS:

Updating the default/text token for only the light theme in your project.
.pando-light {
--ps-text: #000;

Class level customizing

In rare cases, you may only need to update a token value for a specific component. For this scenario, update the token within the specific class scope you need.

In this example, we are updating the default/text token for a component using the .card class:

Updating the default/text token only for a component using the this class.
.card {
--ps-text: #fff;
color: var(--ps-text);

Customizing with Javascript

If you are using a CSS-in-JS styling solution, you can easily extend our themes depending on your technology choice.

Style Objects

If you are using a technology that utilizes Javascript Objects for styles and only need the styles from Pando components, you can use our Style Objects.

Naming convention used for Style Objects
import { <component>Styles } from '@pluralsight/headless-styles/styles'

Here is an example where we are using Style Objects to extend a Chakra Button.

import { extendTheme } from '@chakra-ui/react'
import type { StyleFunctionProps } from '@chakra-ui/styled-system'
import { buttonStyles } from '@pluralsight/headless-styles/styles'

const theme = extendTheme({
components: {
Button: {
baseStyle: buttonStyles.pando_actionButton,
defaultProps: {

export default theme
Style Objects use nested properties

All of our component Style Objects use the nested property syntax supported by emotion and styled-components. If your tech uses any other syntax (like Chakra), you will need to add the additional styles to your theme with Object Spreading from the Style Object properties.

String Value Tokens

You can use a string value of the CSS token and it will automagically work! This is because browsers will map the token value from the Style Object to the CSS variable.

In this example, we use Emotion to update a Link to use the Pando Link token:

Example of using a Emotion with Pando.
import styled from '@emotion/styled'

const TextLink = styled.a({
color: 'var(--ps-action-navigation)',

Using Design-tokens

If you would like access to all of our design tokens without using our CSS Reset, you can install the Design-tokens package, which will deliver Javascript variables for all of the tokens:

npm install @pluralsight/design-tokens

The design-tokens package is the single source of truth for themes in the Pando ecosystem.


We ship CSS custom properties, SCSS variables, JS es6/commonJS modules, and meta-data for web projects. This way, you can choose whichever solution works best for your project.

CSS Usage

There are two ways to use the tokens via CSS

  1. With the initial setup (recommended)
  2. Manually importing
With the initial setup

We ship all the tokens and themes in our initial setup - so there is no additional work for you to do. After you have completed the setup you will be able to reference the tokens in your CSS files.

CSS usage example
button {
background-color: var(--ps-action-background);
color: var(--ps-action-text);

button:hover {
background-color: var(--ps-action-background-hover);
Manually importing

If you would prefer to opt-out of our initial setup, you can import the tokens in your root CSS file.

CSS manual import example (opt-out of initial setup)
@import url('@pluralsight/design-tokens/npm/css/variables.css');
@import url('@pluralsight/design-tokens/npm/themes/light.css');


If you use SCSS in your project, you can import our SCSS variables.

Importing tokens into your SCSS
@use '@pluralsight/design-tokens/npm/scss/_dark-variables.scss';
@use '@pluralsight/design-tokens/npm/scss/_light-variables.scss';

Then, use them as normal.

SCSS usage example
button {
background-color: $ps-action-background;
color: $ps-action-text;

Javascript Tokens

There are a few ways you can utilize the Javascript tokens:

  1. Using the tokens meta-data combined with the initial setup (recommended)
  2. Using the tokens without the initial setup
  3. Using the tokens with inline styles

See CSS Properties section.

2. Using the tokens without the initial setup

If you choose to opt-out of using the initial setup, you will only have static tokens available for use.

Example use without the initial setup
// theme.js
import { psBackground } from '@pluralsight/design-tokens'
import { psBackgroundLight } from '@pluralsight/design-tokens/light'

const darkTheme = {
background: psBackground

const lightTheme = {
background: psBackgroundLight

// Some component
const styles = css((theme) => {
backgroundColor: theme.background,
3. Using tokens with inline styles

You can also use the static JS tokens inline as well.

Example using inline styles
backgroundColor: psActionBackground,

Web Meta

Sometimes you need something more than just a token. We provide two meta-data files for these use cases.

CSS Properties

If you are looking for a seamless JS integration with the Normalize setup or single-source-of-truth, we provide a module that exports JS tokens that have the CSS token names for the values.

When you combine this with CSS definitions, it "just works".

Example of what CSSProperties exports
export const psBackground = 'var(--ps-background)'

This is much more performant if you are using a solution that creates CSS files from your JS defintions (i.e. styled-components).

Usage example
import styled from 'styled-components'
import { psBackground } from '@pluralsight/design-tokens/meta/cssProperties'

const Button = styled(Button)`
background-color: ${psBackground};

If you combine this with the initial setup, theming will be instantly avialable in your CSS-in-JS styles!

Normalized data

If you need some raw normalized data, we also have you covered in our normalize.json file.

Example of normalized data
"groupItems": ["default", "action", "danger", "info", "success", "warning"],
"groups": {
"action": {
"psActionBackground": {
"id": "psActionBackground",
"cssName": "--ps-action-background",
"sassName": "$ps-action-background",
"jsName": "psActionBackground",
"value": "#4A33D1"

To use, import it into your project via a bundler that supports JSON:

import tokenData from '@pluralsight/design-tokens/meta/normalize.json'


We offer both android and iOS solutions for mobile platforms. All mobile tokens can be found in our Github repo mobile tokens location.


For Android, we ship the tokens as Compose colors.

iOS / Swift

We support iOS platforms via an Asset Catalog.