Themes

35 hand-crafted visual themes spanning light, dark, luxury, and specialty designs.

Total Themes

Luxury Themes

system

Auto mode

Every theme uses flat, solid colors with no gradients — a design philosophy inspired by warm, calm, coworking spaces. The design tokens are built with CSS custom properties, making themes fully composable.

Theme Categories

Themes are organized into categories:

Category	Description	Examples
Standard	Clean, professional themes for daily use	light, dark, amoled
Colorful	Vibrant themes with distinct color palettes	blue, forest, ocean, sunset
Luxury	Premium themes with rich, sophisticated colors	luxury-gold, luxury-emerald, luxury-royal
Specialty	Unique themes for specific moods or environments	cyberpunk, matrix, sakura, coffee
Accessibility	High-contrast themes for better readability	high-contrast
System	Auto-detects OS preference (light/dark)	system

Theme Gallery

light

#c2683f

dark

#cf7a52

amoled

#3ddc97

blue

#2563eb

high-contrast

#ffd166

cyberpunk

#ff00ff

forest

#4a9e4a

pastel

#b38cb3

sunset

#e8744a

sepia

#a67c52

nord

#88c0d0

dracula

#bd93f9

matrix

#00ff41

sakura

#e88ba8

sakura-dark

#e88ba8

coffee

#a67c52

ocean

#3b82f6

luxury

#d4a853

emerald-luxury

#3ddc84

rose-luxury

#e85a7a

velvet-luxury

#8b5cf6

bronze-luxury

#cd7f32

platinum-luxury

#e8e8f0

crimson-luxury

#dc2626

sapphire-luxury

#3b82f6

amethyst-luxury

#a855f7

amber-luxury

#f59e0b

obsidian-gold

#d4a853

pearl-noir

#c0b8a8

jade-silk

#34d399

arctic-glass

#7dd3fc

royal-indigo

#6366f1

copper-olive

#b87333

moonlit-rose

#f472b6

carbon-teal

#14b8a6

Design System

Token architecture

The design system is defined in packages/ui/src/tokens.css with a layered architecture:

1. Primitives — base color ramps (sand, terracotta, green, amber, red)
2. Semantic tokens — purpose-driven colors (--color-bg, --color-text, --color-accent)
3. Component tokens — component-specific overrides (--button-bg, --card-border)

All themes share the same primitive color ramps and override only semantic tokens. This ensures consistency while allowing customization.

🎨 Color Primitives

A warm, clay-based palette with:

Sand neutrals — warm grays for backgrounds and text
Terracotta accent — a single accent color that shifts between light/dark modes
Semantic greens — for success states and confirmations
Amber warnings — for caution states and alerts
Red errors — for error states and destructive actions

The accent shifts between light and dark modes while maintaining the same warm character.

📝 CSS Custom Properties

Themes use CSS custom properties for all colors:

Token	Description	Example (Light)
`--color-bg`	Base page background	#faf9f5
`--color-bg-card`	Card and raised element background	#ffffff
`--color-text`	Primary text color	#5c5544
`--color-text-strong`	Prominent heading text	#28241d
`--color-accent`	Accent color for links and primary buttons	#c2683f
`--color-success`	Success states	#4f7d47
`--color-warning`	Warning states	#a9761f
`--color-danger`	Error states	#b8482f
`--shadow-md`	Medium shadow for cards	0 4px 16px rgba(...)

:root {
  /* Backgrounds */
  --color-bg: #faf9f5;
  --color-bg-weak: #f5f3ec;
  --color-bg-card: #ffffff;
  --color-bg-strong: #1e1b16;

  /* Text */
  --color-text: #5c5544;
  --color-text-weak: #938a76;
  --color-text-strong: #28241d;

  /* Accent */
  --color-accent: #c2683f;
  --color-accent-warm: #cf7a52;
  --color-accent-subtle: rgba(194, 104, 63, 0.11);

  /* Semantic */
  --color-success: #4f7d47;
  --color-warning: #a9761f;
  --color-danger: #b8482f;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(54, 46, 32, 0.06);
  --shadow-md: 0 4px 16px rgba(54, 46, 32, 0.09);
  --shadow-lg: 0 16px 40px rgba(54, 46, 32, 0.13);
}

Override these properties in your custom theme to change the entire look.

☀️🌙 Light and Dark Mode

Every theme in Aura Work has a light and a dark variant (e.g. ocean-light and ocean-dark). Switching between them is instant with no page reload. The special system theme automatically follows your OS preference via the prefers-color-scheme property and switches automatically when your device's settings change (e.g. macOS sunset/sunrise).

🔧 Creating Custom Themes

Create your own theme by following these steps:

1. Copy an existing theme (e.g., light.css)
2. Override the CSS custom properties with your colors
3. Add your theme to packages/ui/src/themes/
4. Register it in the theme list
5. Test in both light and dark modes
6. Submit a PR

See packages/ui/src/themes/ for all theme files.

📱 RTL & Accessibility

The theme system includes:

High-contrast theme — for accessibility (WCAG AA compliant)
Full RTL support — for Arabic and Persian
System preference detection — via prefers-color-scheme
Reduced motion — respects prefers-reduced-motion
Font scaling — supports browser font size adjustments

The system theme automatically matches your OS preference, switching between light and dark mode.

Custom Themes

Creating a Custom Theme Manually

You can create a custom theme by defining a set of CSS variables. Place the theme file in ~/.config/aura/themes/ and it will be loaded automatically.

{
  "name": "my-theme",
  "colors": {
    "bg-primary": "#1a1b26",
    "fg-primary": "#c0caf5",
    "accent": "#7aa2f7"
  }
}

You can export themes and share them with the community. Featured community themes are added to the official gallery.