Theming & Styling

Learn how to customize Boreal UI with SCSS variables, built-in themes, state colors, and the ThemeProvider context.

Build consistent interfaces with theme-aware tokens.

Boreal UI provides a flexible theming system built on SCSS variables and a ThemeProvider context. Whether you want to use built-in themes or define your own, everything is designed for consistency, accessibility, and scalability.

SCSS ArchitectureDynamic SchemesGlobal Defaults

Start with the core styling systems.

SCSS Variables

Open

Base design tokens for colors, spacing, typography, radius, shadows, and component styling.

_variables.scss
$primary-color: #006a6a;
$secondary-color: #a03e40;
$border-radius-lg: 12px;

Schemes and Themes

Open

Built-in color palettes, theme props, state colors, and custom color scheme configuration.

PrimarySecondaryTertiarySurface

Custom Color Schemes

Open

Create, register, and apply your own brand palettes with ThemeProvider and custom scheme options.

Brand SchemeCustom

Color Scheme Designer

Open

Input palette colors and preview how ThemeProvider-resolved text colors render across components.

Theme decisions flow through every component.

Dashboard-ready styling

Use the same palette, spacing, shadow, and radius variables to keep product screens visually connected.

Component-level control

Theme props and custom schemes let each component adapt while still matching your design system.

Want to Dive Deeper?

See themes applied to real components.

Explore the Components section to see how Boreal UI themes, variants, and design tokens work together.

Components Section