Theme Variables

The core design tokens for the application are defined in src/styles/theme.css. We use CSS variables (custom properties) to manage colors for both Light and Dark modes.

File Location

src/styles/theme.css

Usage

This file defines the root variables. To customize your brand’s primary color, simply modify the hex code in the :root (for light mode) and .dark (for dark mode) blocks.

Code Example

/* src/styles/theme.css */

/* Light Theme */
:root {
  --background: #ffffff;
  --foreground: #000000;
  --muted: #f1f5f9;
  
  /* CHANGE THIS to update your primary brand color in Light Mode */
  --color-primary: #C400EB; 
}

/* Dark Theme */
.dark {
  --background: #000000;
  --foreground: #ffffff;
  
  /* CHANGE THIS to update your primary brand color in Dark Mode */
  --color-primary: #FFB62F; 
}

Adding New Variables

You can add any new global variable here and then use it in your Tailwind classes or custom CSS.

:root {
    --my-new-color: #ff00ff;
}

Then use it in tailwind.config or standard CSS:

.my-element {
    color: var(--my-new-color);
}

Logo Configuration

You can configure the logo strategy in src/site.config.ts. This allows you to control how the logo behaves in Dark Mode.

Configuration Object

// src/site.config.ts
export const siteConfig = {
  // ...
  logo: {
    src: '/logo.svg',       // Path to your default (light mode) logo
    srcDark: '/logo.svg',   // (Optional) Path to dark mode logo (used for 'switch')
    alt: 'Brand Name',      // Alt text
    strategy: 'invert',     // Strategy: 'invert' | 'switch' | 'static'
  },
  // ...
};

Strategies

Strategy	Description	Best For
invert	Applies a CSS invert(1) filter to the logo in Dark Mode.	Simple black/monochrome logos that turn white when inverted.
switch	Renders a different image source (srcDark) in Dark Mode.	Logos that have specific colors for dark mode (not just inversion).
static	Uses the same src for both modes with no changes.	Logos that work well on both light and dark backgrounds.

Examples

1. Invert (Default)

strategy: 'invert'
// Result: Light Mode = Black Logo, Dark Mode = White Logo (via CSS)

2. Switch

logo: {
  src: '/logo-light.png',
  srcDark: '/logo-dark.png',
  strategy: 'switch'
}
// Result: Light Mode = logo-light.png, Dark Mode = logo-dark.png

3. Static

strategy: 'static'
// Result: Light Mode = Logo, Dark Mode = Logo (No change)