Theming

Learn how to customize the theme to match your brand identity using the Sass variables or CSS custom properties.

Your Brand, Our Tech!

Sass variables

SCSS

// 1. Set your custom theme variables
$primary: #152d61; // Rence Blue
$secondary: #5f6368; // Rence Gray
$accent: #f4b400; // Material Gold

// 2. Import Rence Material (which imports Bootstrap)
@import "rence-material/scss/material";

Customizing Rence Material is easy and powerful. Use the Sass variable system to override primary and secondary colors at compile time.

Visualizing your theme

Core Palette

Primary#152d61

Secondary#5f6368

Accent#f4b400

Change these variables and the entire UI will automatically re-shade everything from alerts to button state layers.

CSS Custom Properties

Runtime flexibility!

CSS

:root {
  --rm-primary: #152d61;
  --rm-secondary: #5f6368;
  --rm-surface: #ffffff;
  --rm-on-surface: #202124;
}

Native CSS variables are also available for runtime customization without recompiling Sass.