Theme System

Centralized design tokens for consistent styling

How It Works

The theme system uses CSS variables defined in src/styles/theme.css and maps them to Tailwind classes through the Tailwind configuration.

This approach allows you to:

  • Define colors in one central location
  • Use convenient Tailwind classes like bg-primary
  • Access the same colors via CSS variables like var(--color-primary)
  • Change the entire theme by updating a single file

Theme Colors

Theme Colors

Main Colors

Primary

--color-primary

Secondary

--color-secondary

Tertiary

--color-tertiary

Quaternary

--color-quaternary

Purple Base

--color-purple-base

Accent Colors

Accent

--color-accent

Accent Hover

--color-accent-hover

Dracula Pink

--color-dracula-pink

Dracula Cyan

--color-dracula-cyan

Dracula Green

--color-dracula-green

Text Colors

Text Primary

--color-text-primary

Text Secondary

--color-text-secondary

Text Muted

--color-text-muted

Gradients

Gradient Dark

--gradient-dark

Gradient Animated

--gradient-animated

Usage Examples

Tailwind Classes

Elements using Tailwind classes with theme variables:

Primary Background (bg-primary)

Tertiary Background (bg-tertiary)

Accent Text (text-accent)

Muted Text (text-muted)

CSS Variables

Direct CSS variable access for custom elements:

Custom element using var(--color-quaternary)

Element with gradient using var(--gradient-dark)

Theme in Code

CSS with Theme Variables

/* Theme-based styling with CSS variables */
.card {
  background-color: var(--color-secondary);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 24px;
  color: var(--color-text-primary);
  border: 1px solid var(--color-tertiary);
}

/* Highlight with accent color on hover */
.card:hover {
  transform: translateY(-5px);
  border-color: var(--color-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Card title using theme colors */
.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--color-accent);
}

Tailwind with Theme Classes

<!-- Component using Tailwind theme classes -->
<div class="bg-secondary rounded-lg p-6 shadow-md border border-tertiary hover:border-accent">
  <h3 class="text-xl font-semibold mb-4 text-accent">Feature Card</h3>
  
  <p class="text-primary mb-6">
    This component uses Tailwind classes that map to our theme variables.
  </p>
  
  <div class="flex space-x-4">
    <button class="bg-accent text-black px-4 py-2 rounded hover:bg-accent-hover">
      Primary Action
    </button>
    
    <button class="bg-tertiary text-primary px-4 py-2 rounded hover:opacity-80">
      Secondary Action
    </button>
  </div>
</div>

Standard JavaScript Example

function createFibonacciSequence(n) {
  const sequence = [0, 1];
  
  if (n <= 2) return sequence.slice(0, n);
  
  for (let i = 2; i < n; i++) {
    const nextNumber = sequence[i-1] + sequence[i-2];
    sequence.push(nextNumber);
  }
  
  return sequence;
}

// Generate first 10 Fibonacci numbers
const fibonacci = createFibonacciSequence(10);
console.log(fibonacci);

CSS Variable Debugging

Current CSS variable values:

--color-primary:

--color-secondary:

--color-tertiary:

--color-accent:

--color-text-primary:

--color-text-muted:

Back to Dev Home