Documentation

Theme & Styling

Customize the look and feel of the Cinder Frontend.

Cinder Glow Color Palette

The "Cinder Glow" theme combines neutral Slate grays with warm Amber and Orange accents, creating a modern, accessible color scheme.

--primary

Amber 500

--primary-foreground

Amber 100/950

--background

Slate 950/50

--border

Slate 200/800

--primary Main accent
--secondary Alternative action
--muted-foreground Subtle text
--destructive Errors

Dark & Light Modes

Dark Mode (Default)

✓ Primary dark theme with high contrast ✓ Reduced eye strain for extended use ✓ Professional appearance aligned with Firecrawl ✓ Better for accessibility (WCAG AA compliant)

Light Mode

✓ Clean, minimal aesthetic ✓ Bright, readable colors ✓ Perfect for daylight use ✓ User can toggle based on preference

Configuration File

All theme configuration is centralized in src/routes/layout.css. This file defines CSS custom properties, color variables, and utility classes.

@import 'tailwindcss/theme';

@layer theme {
  --color-primary: oklch(55% 0.12 45);
  --color-primary-foreground: white;
  
  --color-background: oklch(98% 0 0);
  --color-foreground: oklch(2% 0 0);
  
  --color-muted: oklch(96% 0 0);
  --color-muted-foreground: oklch(45% 0 0);
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  @layer theme {
    --color-background: oklch(12% 0 0);
    --color-foreground: oklch(98% 0 0);
    --color-muted: oklch(16% 0 0);
    --color-muted-foreground: oklch(64% 0 0);
  }
}

Customization Guide

Changing Colors

1. Open src/routes/layout.css 2. Modify the OKLCH values in the @layer theme section 3. Update both light and dark mode variants 4. Rebuild and test in browser

Preview Changes

Use the dev server with hot reload to instantly see theme changes. No build required.

OKLCH Color Space

OKLCH provides: ✓ Perceptually uniform colors ✓ Better color interpolation ✓ More accessible contrast ratios ✓ Modern browser support

Semantic CSS Classes

Use these semantic Tailwind classes instead of hardcoded colors for consistency:

bg-primary Primary action backgrounds
text-primary Primary text (accents)
bg-background Page/component backgrounds
text-foreground Main body text
bg-muted Secondary backgrounds
text-muted-foreground Secondary text
border-border Border lines

Responsive Design Tokens

sm 640px
md 768px
lg 1024px
xl 1280px

Best Practices

  • ✓ Use Tailwind utility classes for styling
  • ✓ Leverage semantic color variables for theming
  • ✓ Keep hardcoded colors to a minimum
  • ✓ Test color contrast for accessibility (WCAG AA)
  • ✓ Preview changes in both light and dark modes
  • ✓ Use cn() utility for conditional class merging
  • ✓ Prefer motion-safe utilities for animations

Tools & Resources

OKLCH Color Picker

Use online tools to convert RGB/Hex colors to OKLCH format for use in CSS.

Contrast Checker

Verify color combinations meet WCAG AA accessibility standards.

Tailwind Docs

Reference official Tailwind CSS v4 documentation for the latest features.

Browser DevTools

Use browser inspector to debug CSS variables and view computed styles.