Versa Theme System

Themes

Customize Versa without fighting Bootstrap. Keep vendor, Versa and project layers independent and upgradeable.

Upgrade-safe by design

Three clean layers

Never edit Bootstrap or Versa to brand a project. Keep vendor files replaceable and put site-specific work in the custom layer.

Untouched vendor CSS, JavaScript and icons. Replace these files when upgrading to a compatible Bootstrap release.

Components, tokens, layouts and interactions that enhance Bootstrap without modifying it.

Your brand and project overrides. Preserve this layer when Bootstrap or Versa is updated.

assets/vendor/bootstrap/...
assets/versa/css/versa.css
assets/versa/css/themes/<optional-theme>.css
assets/custom/custom.css

Live preview

Preview common theme tokens here. Put production overrides in assets/custom/custom.css.

Primary

Secondary

Corner radius Shadow

Enable decorative motion

Versa Default

Versa Default uses Bootstrap's familiar semantic palette while upgrading the overall visual experience.

Components inherit tokens rather than hard-coded brand colors.

Focus, contrast and reduced-motion behavior remain part of the system.

Semantic colors stay semantic. Success, warning and danger retain their meanings.

:root {
  --versa-primary: #0d6efd;
  --versa-secondary: #6c757d;
  --versa-radius: 0.625rem;
}

Color themes

Alternate themes override tokens without replacing Versa's component system.

Default

Bootstrap blue and familiar semantic colors form the baseline every component is tested against.

Optional

A current optional skin demonstrating how Versa can adopt a different brand personality.

assets/versa/css/themes/purple.css

Design tokens

New Versa components should consume the same shared tokens so they automatically work with existing themes.

Group	Controls	Example
Brand	Primary, secondary, accent	`--versa-primary`
Surface	Body, cards, alternate sections	`--versa-surface`
Typography	Text, muted text, headings	`--versa-text`
Shape	Component radii	`--versa-radius`
Depth	Component shadows	`--versa-shadow`
Motion	Transitions and reduced motion	`--versa-transition`