Theming

Bootstrap Svelte follows Bootstrap's design tokens instead of shipping a separate theme layer.

Bootstrap CSS

Consumers must include Bootstrap CSS once in their application. The components emit Bootstrap-compatible classes and markup.

            
            import 'bootstrap/dist/css/bootstrap.min.css';

SCSS Variables

Override Bootstrap Sass variables before importing Bootstrap if your build pipeline compiles SCSS.

            
            // app.scss
$primary: #563d7c;
$border-radius: .5rem;

@import 'bootstrap/scss/bootstrap';

CSS Variables and Color Modes

Bootstrap 5.3 exposes runtime CSS variables and supports data-bs-theme. Use those primitives for light, dark, or scoped theme regions.

            
            <div data-bs-theme="dark">
    <Button colorVariant="primary">Dark themed action</Button>
</div>

Contrast Responsibilities

Some Bootstrap utility combinations, especially outline warning, outline info, and outline light on white backgrounds, can miss WCAG AA text contrast before hover or active states. Prefer contrast-safe combinations in production, or override the relevant Bootstrap CSS variables for the preview surface.