Skip to main content

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"><span>Toggle Theme</span></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:

#7c3aed
Live Component Preview
Interactive Card

Theme variables immediately update typography, border radii, and accent rings.

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

Spacing Scale Customization

Customizing the spacing system takes minimal effort across any consumption pattern:

1. Pure CSS / CDN (Runtime)

Override custom properties on :root to re-scale utilities on the fly without build tools:

:root {
  --boodoo-spacer: 1rem;
  --boodoo-spacer-1: 1.25rem;
  --boodoo-spacer-2: 2.25rem;
  --boodoo-spacer-3: 3.25rem;
}
2. Sass / SCSS Source

Define $boodoo-spacer or a custom $boodoo-spacers map before importing:

$boodoo-spacer: 1.125rem;
$boodoo-spacers: (
  0: 0,
  1: 1rem,
  2: 1.5rem,
  3: 2rem
);
@import "boodoo/scss/boodoo";
3. LESS Source

Override @boodoo-spacer in your Less configuration:

@boodoo-spacer: 1.2rem;
@import "boodoo/less/boodoo.less";
4. React Native & Design Tokens

Use createSpacing() or pass custom spacing to <BoodooProvider>:

import { createSpacing } from 'boodoo/tokens';
import { BoodooProvider } from 'boodoo/react-native';

const customSpacing = createSpacing(14);
<BoodooProvider customTheme={{ spacing: customSpacing }}>
  {/* App */}
</BoodooProvider>