Theming & Customization
Learn how to customize colors, themes, and component variants in AckPlus UI. Built with runtime CSS tokens for maximum flexibility.
Runtime Theming
AckPlus UI uses CSS custom properties for runtime theming. This means you can switch themes instantly without rebuilding your application.
Color Palette
AckPlus UI includes a comprehensive semantic color system that automatically adapts to light and dark themes.
Semantic Colors
Primary
Main brand colorSecondary
Accent colorSuccess
Success statesWarning
Warning statesError
Error statesInfo
InformationSurface Colors
Surface
BackgroundSurface 2
Secondary bgText
Primary textMuted
Secondary textTheme Configuration
Using ThemeProvider
The ThemeProvider component controls the active theme by setting thedata-themeattribute on the HTML element.
Loading…
Loading…
Manual Theme Control
You can also control themes manually by setting the data attribute directly.
Loading…
Loading…
Customizing Colors
CSS Custom Properties
Override the default color tokens by defining new values for the CSS custom properties.
Loading…
Loading…
Component Color Props
All components accept a color prop to use semantic colors from your theme.
PrimarySecondarySuccessWarningErrorInfo
Loading…
Loading…
Advanced Customization
Custom Color Palette
Create your own color system by extending the default tokens.
Loading…
Loading…
Component Variants
Customize component styles using Tailwind utilities and CSS custom properties.
Loading…
Loading…
Design Tokens Reference
Token | Purpose | Light Value | Dark Value |
|---|---|---|---|
--ack-primary | Primary brand color | oklch(0.64 0.16 252) | oklch(0.72 0.12 255) |
--ack-secondary | Secondary accent color | oklch(0.62 0.18 320) | oklch(0.74 0.12 320) |
--ack-success | Success state color | oklch(0.70 0.16 150) | oklch(0.76 0.13 150) |
--ack-surface | Background surface | oklch(0.98 0 0) | oklch(0.17 0 0) |
--ack-text | Primary text color | oklch(0.21 0 0) | oklch(0.95 0 0) |