Theme Configuration

Customize the Cinder Frontend with Tailwind CSS v4 and our "Cinder Glow" theme.

Tailwind CSS v4

This project uses Tailwind CSS v4 with OKLCH color space and semantic design tokens. Configuration is in src/routes/layout.css

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 Colors (Amber/Orange)

--primary

Amber 500

--primary-foreground

Amber 100/950

Neutral Colors (Slate)

--background

Slate 950/50

--border

Slate 200/800

Semantic Color Variables

--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

Tailwind breakpoints:

sm 640px

md 768px

lg 1024px

xl 1280px

Use prefixes like md:grid-cols-2 for responsive layouts.

Best Practices

Theme Consistency

Always use semantic color tokens instead of hardcoding HSL/Hex values. This ensures consistency across light/dark modes.

✓ 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.

Cinder Docs

Documentation