DEV Community

Cover image for Dynamic Bootstrap 5 Themes Without SASS, Without Hardcoded Dark/Light — and Without the Usual Headaches
Fran Bar Instance
Fran Bar Instance

Posted on

Dynamic Bootstrap 5 Themes Without SASS, Without Hardcoded Dark/Light — and Without the Usual Headaches

#webdev #bootstrap #themes #design

I'll admit it: for more years than I care to count, I've been patching Bootstrap projects with Bootswatch, telling myself "someday I'll build a proper dynamic theming system."

Someday finally arrived — in 2026, when AI is supposedly doing everything. Better late than never. Here it is: bootstrap-dynamic-themes

The core problem with Bootstrap theming

Bootstrap needs to know upfront whether your theme is dark or light. That means hardcoding contrast mode directly into your templates:

<header class="bg-primary" data-bs-theme="dark">
    <a class="nav-link" href="#">Static Link</a>
</header>
Enter fullscreen mode Exit fullscreen mode

data-bs-theme="dark" tells Bootstrap that bg-primary is dark and should render light text on top. Fine — until you dynamically switch to a light palette at runtime. Now that hardcoded attribute causes white text on a light background, and your UI silently breaks.

This is what makes dynamic theming genuinely hard in Bootstrap: it's not just about swapping colors, it's about contrast awareness.

How BTDT solves it

BTDT handles contrast at the CSS variable level. Each theme calculates its own contrast colors (--bs-primary-contrast, etc.), and the engine applies them automatically. Your HTML stays clean and agnostic:

<header class="bg-primary">
    <a class="nav-link" href="#">Automatic Dynamic Link</a>
</header>
Enter fullscreen mode Exit fullscreen mode

Switch from a dark professional theme to a light pastel one at runtime — menus, cards, links, even SVG icons like the navbar toggler adapt automatically. No data-bs-theme juggling, no conditional logic in your templates, zero HTML changes.

More than a theming fix — a full design system

The project ships with a visual editor where you can design your theme in real time: 50+ color palettes, 50+ fonts, 50+ presets, and multiple structural styles. When you're done, you click "Copy CSS Preset" and drop the output into your project.

No SASS, no npm, no Webpack, no build steps at all — just standard CSS custom properties. It even works opened directly from the filesystem (file:///), which makes it ideal for prototyping.

Once you have a theme, integration is a single line:

<!-- Option A: Pure CSS, maximum performance -->
<link rel="stylesheet" href="btdt/themes/preset/studio.css">

<!-- Option B: One-line loader with JS API -->
<script data-preset="studio" src="btdt/js/btdt.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

And at runtime you get a clean JS API:

btdt.load('aurora');   // Switch preset
btdt.toggleMode();     // Toggle dark/light
Enter fullscreen mode Exit fullscreen mode

BTDT vs. Bootswatch

Bootswatch is great for static themes. BTDT is for when you need more:

  • Fully editable — tweak every variable in real time, not just pick from a list
  • Dynamic runtime — switch themes or toggle dark mode without a page reload
  • Modular — combine the palette from one theme with the typography from another
  • No compilation — pure CSS, no toolchain overhead
  • AI-extendable — the project includes agent skills so an AI assistant can add new palettes, fonts, or presets following the established architecture

Try it

Top comments (0)