# Theming

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

Source: https://bootstrap-svelte.vercel.app/theming — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## Bootstrap CSS

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

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

## SCSS Variables

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

```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.

```html
<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.