> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mantle.chat/llms.txt
> Use this file to discover all available pages before exploring further.

# Themes

> Light and dark mode configuration

## Theme Support

Mantle Chat supports both light and dark themes, with automatic system preference detection.

### How It Works

Our theming system uses CSS custom properties (variables) that automatically switch values based on the current theme.

```css theme={null}
/* Dark mode values are default */
:root {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
}

/* Light mode values override */
.light {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
}
```

### Using Theme-Aware Colors

Always use semantic color tokens instead of hard-coded values:

```html theme={null}
<!-- Correct: Uses theme variables -->
<div class="bg-background text-foreground">Content that adapts to theme</div>

<!-- Incorrect: Hard-coded colors -->
<div class="bg-white text-black">Content that won't adapt</div>
```

## Theme Toggle

Users can switch between themes using the theme toggle in the app header.

### Implementation

```typescript theme={null}
// Check current theme (dark is default)
const isLight = document.documentElement.classList.contains('light');

// Toggle theme
document.documentElement.classList.toggle('light');

// Set specific theme
document.documentElement.classList.add('light'); // Light mode
document.documentElement.classList.remove('light'); // Dark mode (default)
```

### Respecting System Preference

```typescript theme={null}
// Check system preference
const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;

// Listen for system changes
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', e => {
  if (e.matches) {
    document.documentElement.classList.add('light');
  } else {
    document.documentElement.classList.remove('light');
  }
});
```

## Coming Soon

* Theme customization options
* Custom color scheme creation
* Brand theming guidelines
* Component theme variants