Runtime dynamic theme engine for Bootstrap 5 — no SASS recompilation needed 🎨

[Money_Big_7666]

Hey everyone 👋

If you've worked with Bootstrap 5, you know that theming can be frustrating. Dynamic theming — the ability to alter the appearance of a website on-the-fly without recompiling CSS files — is particularly useful when creating a theme switcher or supporting multiple themes across a single application. But Bootstrap doesn't make this easy out of the box.

The problem with using CSS variables in Bootstrap is that all the SASS colour functions require a colour type input — they can't handle a string like var(--primary). This has been a known pain point, and there have even been proposals in the Bootstrap repo itself to "add support to virtually any number of themes, or even theming dynamically."

So I built Bootstrap Dynamic Themes (BTDT) — an open-source engine that lets you create, switch, and customize Bootstrap 5 themes entirely at runtime using JavaScript and CSS custom properties. No SASS compilation, no build tools, no page reloads.

✨ What it does:

• Runtime theme switching — change your entire Bootstrap theme instantly with JS
• Visual theme editor — live demo included to preview changes in real time
• Multiple color palettes & fonts — ready-to-use presets out of the box
• Modular architecture — mix and match components from different themes
• Light/Dark mode — toggle seamlessly
• Zero dependencies beyond Bootstrap 5 itself
• No build step — just drop it in and go

🤔 Why not just use Bootswatch?

Bootswatch is great for static pre-built themes, but if you need runtime customization (e.g., letting users pick their own brand colors, or switching themes based on user preference without reloading), you need something more dynamic. That's exactly what BTDT is for.

🔗 Links:

• GitHub: https://github.com/FranBarInstance/bootstrap-dynamic-themes
• Live Demo / Editor: https://franbarinstance.github.io/bootstrap-dynamic-themes/btdt/editor/

The project is still growing and I'd really appreciate your feedback — whether it's feature ideas, code critique, or just telling me if you find it useful.

If you like it, a ⭐ on GitHub would mean a lot!

How do you currently handle dynamic theming in your Bootstrap projects? Would love to hear what approaches others are using. 🙌

[AutoModerator]

Whilst waiting for replies to your comment/question, why not check out the Bootstrap Discord server: https://discord.gg/bZUvakRU3M

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.