Skip to main content

​
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. 
/* 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: 
<!-- 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

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

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