Best strategy for Bootstrap 5 theming: overrides or modular replacement?

I have been working on Bootstrap 5 theming from two different angles.

My first project, bootstrap-dynamic-themes, is a theme creator/editor for Bootstrap 5. The current approach is intentionally conservative: keep the original Bootstrap CSS untouched, then generate additional CSS that overrides Bootstrap variables and component styles where needed.

That works, and it has real advantages:

• It is simple to adopt because projects can keep using standard Bootstrap.
• It is safer in the sense that Bootstrap itself remains untouched.
• It is easier to reason about for users who already understand Bootstrap overrides.
• It can be added or removed without changing the underlying Bootstrap CSS.

But it also has a clear downside: as themes become more complete, the generated CSS starts duplicating a lot of Bootstrap behavior. You end up shipping Bootstrap plus a growing override layer.

So I started a second project: BootstrapDyn.

The idea is different: instead of treating Bootstrap as a fixed CSS file that must be overridden, BootstrapDyn transforms the compiled Bootstrap CSS into a modular CSS-variable architecture.

It takes the original Bootstrap 5.3 CSS and generates:

• bootstrap-dyn.css: the Bootstrap-compatible component layer
• default-color.css
• default-typography.css
• default-spacing.css
• default-borders.css
• default-shadows.css
• other concern-specific modules
• an optional contrast-dyn.css module for automatic contrast behavior

The important part is that the default generated modules are meant to render visually the same as original Bootstrap. So the starting point is still Bootstrap, but the design values are moved into replaceable modules.

Instead of creating a theme by writing a large override file, the new approach is:

<link rel="stylesheet" href="theme/my-color.css">
<link rel="stylesheet" href="theme/my-typography.css">
<link rel="stylesheet" href="theme/my-spacing.css">
<link rel="stylesheet" href="dist/bootstrap-dyn.css">

Theme files are substitutes for the default modules, not extra overrides layered on top.

This replacement strategy also has tradeoffs:

• It should produce smaller and cleaner theme output.
• It avoids duplicating large parts of Bootstrap component CSS.
• It gives a more explicit design-token/module structure.
• But it also requires trusting the generated bootstrap-dyn.css layer.
• It may be harder to adopt than plain override CSS because it changes the CSS distribution strategy.
• It needs strong visual parity checks to make sure it still behaves exactly like Bootstrap by default.

My goal is to use BootstrapDyn as the CSS foundation for future versions of bootstrap-dynamic-themes, so the theme editor can export smaller, cleaner, more modular themes without duplicating so much Bootstrap CSS.

In short:

• Old strategy: Bootstrap CSS + generated override CSS
• New strategy: Bootstrap-compatible component CSS + replaceable theme modules

This should make generated themes easier to reason about, easier to bundle, and more efficient to ship. But I do not want to assume this is automatically the better strategy in every case.

I am still validating visual parity and edge cases across Bootstrap components, but the direction feels much cleaner than the override-heavy model.

What I am trying to decide is which strategy makes more sense long-term:

1. Keep the original Bootstrap CSS and generate override CSS.
2. Transform Bootstrap into a Bootstrap-compatible modular CSS-variable distribution and replace theme modules.

I would be interested in feedback from anyone who has worked on Bootstrap theming, design-token systems, CSS-variable based frameworks, or maintaining design systems at scale.

Which approach would you prefer in a real project, and why?

Are the simplicity and safety of the override approach worth the duplicated CSS?

Or is the module replacement approach a better foundation if visual parity can be maintained reliably?

For context, this is the current editor built with the override-based approach:

Bootstrap Dynamic Themes editor

That is the kind of tool I want to keep improving, but with a better CSS generation strategy if the modular replacement approach proves to be the right direction.

Comments

[Fran Bar Instance]

I clarify that the goal is to be able to create dynamic themes. Bootstrap 5 already allows theme creation via Sass, but static ones. If you need 10 themes, you need 10 static CSS files. With dynamic creation, you could have one theme and dozens or hundreds of variations. It would also allow setting preferences for the end user, such as the font type.