Theming
Customize MatrixUI components to match your brand identity with CSS variables and Tailwind utilities.
Color System
MatrixUI uses a semantic color system that adapts to your theme
Primary Color
This is how text appears on this background
Component Examples
CSS Variables Reference
All theme colors are defined using CSS variables in HSL format
:root {
/* Core Colors */
--matrix-background: 0 0% 100%;
--matrix-foreground: 0 0% 9%;
/* Component Colors */
--matrix-card: 0 0% 100%;
--matrix-card-foreground: 0 0% 9%;
--matrix-popover: 0 0% 100%;
--matrix-popover-foreground: 0 0% 9%;
/* Semantic Colors */
--matrix-primary: 0 0% 9%;
--matrix-primary-foreground: 0 0% 100%;
--matrix-secondary: 0 0% 96%;
--matrix-secondary-foreground: 0 0% 9%;
--matrix-muted: 0 0% 96%;
--matrix-muted-foreground: 0 0% 40%;
--matrix-accent: 0 0% 93%;
--matrix-accent-foreground: 0 0% 9%;
--matrix-destructive: 0 72% 51%;
--matrix-destructive-foreground: 0 0% 100%;
/* Form Colors */
--matrix-border: 0 0% 90%;
--matrix-input: 0 0% 90%;
--matrix-ring: 0 0% 40%;
}Creating Custom Themes
Follow these steps to create your own custom theme
Choose Your Colors
Select your brand colors and convert them to HSL format
220 90% 56%210 40% 96%Update Variables
Replace the default CSS variables with your colors
--matrix-primary: 220 90% 56%;Test Components
Verify all components look good with your new theme
Deploy
Your custom theme is ready for production
Theming Best Practices
Use HSL for colors
HSL format makes it easier to adjust lightness and create color variations
Maintain contrast ratios
Ensure WCAG AA compliance (4.5:1 for normal text, 3:1 for large text)
Use semantic naming
Name colors by purpose (primary, muted) not appearance (blue, gray)
Test thoroughly
Test your theme with all components to ensure consistency