Echo

Theme System

Customize your website's appearance with Echo's powerful theme system

Overview

What you can customize

  • Switch between light and dark modes
  • Customize colors, fonts, and sizes
  • Experiment with different presets
  • Export your final theme

Quick Start

Using the Theme Switcher

  1. Click the theme icon in the navbar (top-right)
  2. Try different themes from the dropdown
  3. Click "Advanced Settings" for more customization
  4. Adjust colors, fonts, and spacing in real-time
  5. When satisfied, copy your CSS variables

Applying a Custom Theme

  1. Open app/globals.css
  2. Find the :root selector
  3. Replace CSS variables with your custom values
  4. Save the file - changes apply immediately

Color System

HSL color format for consistency

Echo uses HSL color format. Colors are defined as hue, saturation, lightness:

--primary: 222.2 47.4% 11.2%;
Format: hue saturation lightness

Color Variables

Available color variables:

  • •--primary - Primary brand color
  • •--secondary - Secondary color
  • •--background - Page background
  • •--foreground - Text color

Theme Presets

Built-in theme options

Echo includes several pre-configured theme presets:

  • •Default - Clean, professional theme
  • •Dark - Dark mode optimized
  • •Custom - Your own customizations

Typography

Customize fonts

Configure heading and body fonts:

# Font variables:
--font-heading
--font-body

Border Radius

Control rounded corners

Customize border radius for different components:

# Radius variables:
--radius-sm
--radius-md
--radius-lg

Next Steps

→ Blog System→ Deployment Guide