zyechat
Docs/SDK/Theming

Theming

Learn how the widget adapts to dark and light themes.

Automatic Theme Detection

By default, the widget automatically detects and adapts to your website's theme:

  • Detects system preference via prefers-color-scheme
  • Checks for dark class on html or body
  • Observes theme changes in real-time
tsx
1
2
3
4
<Widget
  apiKey="your-api-key"
  theme="auto" // Automatically adapts
/>

Manual Theme Control

Force a specific theme mode:

Force Dark Theme

tsx
1
2
3
4
<Widget
  apiKey="your-api-key"
  theme="dark"
/>

Force Light Theme

tsx
1
2
3
4
<Widget
  apiKey="your-api-key"
  theme="light"
/>

Dark Mode Colors

The widget automatically adjusts colors in dark mode:

  • Background: Dark gray (#1a1a1a)
  • Text: Light gray (#ededed)
  • Cards: Darker gray (#262626)

Tip

The widget works seamlessly with Tailwind CSS dark mode and next-themes. No additional configuration needed.

Website Integration

The widget integrates seamlessly with common theme systems:

Tailwind Dark Mode

html
1
2
3
4
// Works automatically with Tailwind's dark class
<html class="dark">
  {/* Widget detects and adapts */}
</html>

Next.js Theme Provider

tsx
1
2
3
4
5
6
// Works with next-themes
import { ThemeProvider } from 'next-themes';

<ThemeProvider>
  {/* Widget auto-detects */}
</ThemeProvider>
CustomizationExamples