Colors

Overview

Pixel UI uses a carefully curated NES 8-bit inspired color palette that provides excellent contrast and maintains the retro aesthetic.

Just pick a variant and go - all colors automatically adapt for dark mode with no configuration needed.

Color Palette

Base Colors

These foundational colors adapt between light and dark modes:

Semantic Colors

Use these colors through the variant prop on components:

Using Colors

Colors in Pixel UI are applied through the variant prop on components. No need to think about CSS classes or color values.

import { Button } from '@joacod/pixel-ui'

// Just set the variant - colors work automatically in light and dark mode
<Button variant="base">Base</Button>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="accent">Accent</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="error">Error</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>

Available Variants

• base - Adapts between black (light mode) and white (dark mode)
• primary - Main brand color (blue)
• secondary - Alternative accent (pink)
• accent - Highlight color (bright green)
• ghost - Subtle transparent variant
• error - For error states (pastel red)
• success - For success states (pastel mint green)
• warning - For warning states (pastel yellow)

Dark Mode

All colors automatically adapt to dark mode based on your system's prefers-color-scheme setting.

What changes:

• Base colors adapt (black ↔ white, backgrounds darken)
• Semantic colors stay consistent for brand recognition
• Border and shadow colors invert for visibility

What you do:

• Nothing! Just use the variant prop and components handle light/dark mode automatically.