Colors

Customize colors across your Gridland UI components with built-in themes or your own custom theme.

Gridland UI uses semantic color tokens to theme all components. A Theme is a flat object with 11 hex values.

Without a ThemeProvider, all components fall back to the built-in dark theme.

Theming


 ⠋ Loading data...

  name    role       status
 ───────────────────────────
  Alice   Engineer   Active
 ───────────────────────────
  Bob     Designer   Away

 ◆ Select
 │ ▸ ○ TypeScript
 │   ○ JavaScript
 │   ○ Python

Quick Start

app.tsx

import { ThemeProvider, darkTheme } from "@/components/ui/theme"
import { Spinner } from "@/components/ui/spinner"
import { Table } from "@/components/ui/table"

function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <Spinner text="Loading..." />
      <Table data={[{ name: "Alice", role: "Admin" }]} />
    </ThemeProvider>
  )
}

Tokens

Token	Purpose
`primary`	Headers, highlights, active elements
`accent`	Focused/interactive elements
`secondary`	User messages, checkboxes, prompts
`muted`	Disabled states, cursor, secondary text
`placeholder`	Placeholder text in inputs
`border`	Borders and dividers
`foreground`	Default text color
`background`	App background color
`success`	Completed states
`error`	Failed states
`warning`	In-progress states

Built-in Themes

import { darkTheme, lightTheme } from "@/components/ui/theme"

Dark

#FF71CE

primary

#01CDFE

accent

#B967FF

secondary

#A69CBD

muted

#CEC7DE

placeholder

#B967FF

border

#F0E6FF

foreground

#0D0B10

background

#05FFA1

success

#FF6B6B

error

#FFC164

warning

Light

#FF6B2B

primary

#3B82F6

accent

#0369A1

secondary

#64748B

muted

#475569

placeholder

#E2E8F0

border

#1E293B

foreground

#FFFFFF

background

#0B8438

success

#E11D48

error

#B45309

warning

Custom Themes

my-theme.ts

import type { Theme } from "@/components/ui/theme"

export const myTheme: Theme = {
  primary: "#61afef",
  accent: "#c678dd",
  secondary: "#98c379",
  muted: "#5c6370",
  placeholder: "#4b5263",
  border: "#5c6370",
  foreground: "#abb2bf",
  background: "#282c34",
  success: "#98c379",
  error: "#e06c75",
  warning: "#e5c07b",
}

Or extend a built-in theme:

custom-theme.ts

import { darkTheme } from "@/components/ui/theme"

export const customTheme = {
  ...darkTheme,
  primary: "#61afef",
}

useTheme

Access tokens in your own components:

import { useTheme } from "@/components/ui/theme"

function MyComponent() {
  const theme = useTheme()
  return <text style={{ fg: theme.primary }}>Themed text</text>
}

Explicit color props always override theme values:

<Spinner text="Default" />           {/* uses theme.accent */}
<Spinner text="Custom" color="#FF6B6B" />  {/* overrides theme */}