Skip to content
bejamas/ui
Theme Editor
⌘E
Background
L 0.5
C 0.2
H 250
Foreground
L 0.5
C 0.2
H 250
Primary
L 0.5
C 0.2
H 250
Primary FG
L 0.5
C 0.2
H 250
Secondary
L 0.5
C 0.2
H 250
Secondary FG
L 0.5
C 0.2
H 250
Accent
L 0.5
C 0.2
H 250
Accent FG
L 0.5
C 0.2
H 250
Card
L 0.5
C 0.2
H 250
Card FG
L 0.5
C 0.2
H 250
Popover
L 0.5
C 0.2
H 250
Popover FG
L 0.5
C 0.2
H 250
Muted
L 0.5
C 0.2
H 250
Muted FG
L 0.5
C 0.2
H 250
Border
L 0.5
C 0.2
H 250
Input
L 0.5
C 0.2
H 250
Ring
L 0.5
C 0.2
H 250
Destructive
L 0.5
C 0.2
H 250
Destructive FG
L 0.5
C 0.2
H 250
Chart 1
L 0.5
C 0.2
H 250
Chart 2
L 0.5
C 0.2
H 250
Chart 3
L 0.5
C 0.2
H 250
Chart 4
L 0.5
C 0.2
H 250
Chart 5
L 0.5
C 0.2
H 250

Reset

Theming

How to customize colors, tokens, and brand styles in bejamas/ui.

bejamas/ui uses CSS variables as its theming layer.
All components read from the same token set, so updating the theme updates the entire UI.

This page explains where themes live, how to override them, and how to create multiple brand themes.

Where Themes Live

Section titled “Where Themes Live”

By default, tokens are defined in:

/src/styles/globals.css

This file contains all base variables (colors, radii, spacing, etc.).
Anything you override here becomes the new global theme.

Built at Bejamas. The source code is available on GitHub.