Modern Bootstrap theming with CSS variables and color modes
Bootstrap has moved far beyond replacing a few Sass variables. Modern Bootstrap 5 themes can use CSS custom properties, component variables and data-bs-theme to adapt at runtime.
From color overrides to a theme system
Older Bootstrap customization workflows often started by compiling Sass with a new primary color. That still works, but it is no longer the only useful model. Bootstrap 5 exposes many CSS custom properties that can be changed without rebuilding the framework itself.
A practical theme therefore has two layers: semantic color tokens such as primary, body background, text and border colors; and component-level tokens for surfaces, focus states, shadows and radii.
Use --bs-* variables for runtime theming
Bootstrap's CSS variables make browser-side theme generation possible. A theme generator can set the primary color, link colors and component variables directly in a downloaded stylesheet. This removes the need to run a Sass compiler for every visitor.
:root {
--bs-primary: #6f42c1;
--bs-primary-rgb: 111, 66, 193;
--bs-link-color: #6f42c1;
}Light and dark mode with data-bs-theme
Bootstrap 5 supports color modes through the data-bs-theme attribute. A site can switch a page, component subtree or individual component between light and dark styling without maintaining an unrelated second framework.
<html data-bs-theme="dark">
...
</html>BootstrapColors can emit both light and dark theme rules so a project can use the same generated CSS for either mode.
Theme more than buttons
A complete theme should account for the elements users actually interact with: forms and their focus rings, cards, dropdowns, modals, accordions, pagination, navigation, tables, alerts, list groups, progress bars, toasts and offcanvas panels.
The color itself is only one design decision. Radius, border treatment, depth and surface rendering strongly affect whether a Bootstrap interface looks generic or intentionally designed.
Glass, velvet and glow without image assets
Modern CSS can create richer surfaces without external textures. Glass effects use translucency and backdrop blur. Velvet can be suggested with layered radial and linear gradients. Metallic surfaces can combine highlights and darkened edges. Glow can be implemented with borders and box shadows based on the theme color.
Keeping these effects in CSS means a generated theme remains portable: there are no texture files to copy and no additional image requests.
Accessibility is part of theming
A beautiful primary color can still produce an unusable button if the text contrast is too low. BootstrapColors calculates contrast and can automatically select a black or white foreground based on the stronger WCAG contrast ratio.
For more precise testing, use the WCAG contrast checker before shipping a theme.
Portable CSS without a build step
A generated theme can be added after Bootstrap as a normal stylesheet, making it easy to test, share and move between projects. The output uses Bootstrap conventions and CSS variables, so you can keep the framework itself unchanged while customizing the visual layer.
Try it visually
Use the Theme Studio to pick colors, surfaces, borders, shadows and modes, preview Bootstrap components and download the resulting CSS.
Open Theme Studio