Overview

boodoo comes with built-in dark mode support, automatic system scheme detection, and the boodoo.theme JS module.

JavaScript Theme API

// Get current theme ('light' or 'dark')
const current = boodoo.theme.get();

// Set explicit theme
boodoo.theme.set('dark');
boodoo.theme.set('light');
boodoo.theme.set('auto');

// Toggle between light and dark
boodoo.theme.toggle();

HTML Trigger Attribute

You can toggle theme via HTML buttons without writing any JavaScript:

<button class="btn btn-secondary" data-boodoo-toggle="theme">Toggle Theme</button>

Interactive Theme Builder

Customize primary colors, border radiuses, and base fonts in real time. Preview live components and export your custom CSS variables snippet:

:root {
  --boodoo-primary: #7c3aed;
  --boodoo-border-radius: 0.5rem;
  --boodoo-font-family-base: Inter, sans-serif;
}