Theming

Learn how to customize the look and feel of Pallas UI.

Pallas UI provides a comprehensive theming system that allows you to customize the look and feel of your application. The theming system is built on top of Panda CSS and provides a set of tokens for colors, spacing, typography, and more.

Tokens

Pallas UI uses a token-based approach to theming. Tokens are named values that can be used across your application to ensure consistency. The following token categories are available:

Colors - Color tokens for text, backgrounds, borders, and more
Spacing & Sizing - Tokens for spacing, padding, margins, and component sizes

Using Tokens

You can use tokens in your components with the css function from Panda CSS:

import { css } from '@styled-system/css'
 
function Example() {
  return (
    <div
      className={css({
        color: 'text',
        bg: 'surface.container',
        p: 'padding.block.md',
        borderRadius: 'md',
        border: '1px solid',
        borderColor: 'border',
      })}
    >
      Content with consistent styling
    </div>
  )
}