Theming

Bootstrap settings

Edit src/scss/_theme.scss to customize the primary color, sans-serif font stack and border radius. The stylesheet entry configures Bootstrap before compilation:

@use 'theme' as *;
@use 'bootstrap/scss/bootstrap' with (
  $primary: $primary,
  $font-family-sans-serif: $font-family-sans-serif,
  $border-radius: $border-radius
);

To change additional Bootstrap variables, define them in the theme partial and pass them into the with (...) block. Variables declared after Bootstrap is loaded do not reconfigure it.

Shell variables

The top of src/css/dashboard.css defines sidebar width/background, header height, body background, border color, shadows, transition speed and border radius. Some demo pages have page-local colors and styles; update those when applying a full brand treatment.

The dashboard body uses Bootstrap’s font variable. Bootstrap Icons is locally bundled. The shared header uses initials by default; set user.avatar in src/config/site.js to provide an image.

Motion and responsive behavior

The shell, charts and counters respect prefers-reduced-motion. Desktop sidebar collapse is stored locally, while mobile sidebar state is not persisted. Keep the shell IDs and Bootstrap component markup when changing layouts.

The dashboard template does not ship the landing page’s light/dark toggle. The landing site is a separate Astro/Tailwind project; its theme controls do not imply dark mode in the dashboard itself.

Validate changes

npm run lint:css
npm run check

CSS rules check correctness; Bootstrap overrides may use !important, custom properties can be defined in another stylesheet, and vendor fallbacks are allowed. SCSS is syntax/format checked and entry points are compiled. Preview responsive pages after substantial layout changes.