Bootstrap 5 Theme Color Customization: Customizing Brand Colors and Component Colors

In web development, a unified brand color scheme enhances a website’s recognizability. Bootstrap 5 offers robust theme customization capabilities, enabling us to easily create interfaces aligned with brand styles. This article guides you from basic concepts to practical steps for customizing Bootstrap 5 theme colors, including global brand colors and refined adjustments for component-specific hues.

Why Customize Theme Colors?¶

Bootstrap 5 provides a default color scheme, but real-world projects often require integrating it with brand colors (e.g., company logo colors or primary tones). Customizing theme colors ensures consistent visual styles across buttons, navigation bars, cards, and other components. It also reduces repetitive CSS code and strengthens brand identity.

Core: Understanding Bootstrap 5 Theme Color Variables¶

Bootstrap 5 theme colors are primarily controlled via Sass variables, which define default colors for global settings and components. Key variables include:

$primary: Primary brand color (impacts buttons, links, navigation bars, etc.)
$secondary: Secondary color (used for secondary buttons, borders, etc.)
$success/$info/$warning/$danger: Functional colors for success, info, warning, and error states
$light/$dark: Background colors (light and dark modes)
Component-specific variables: e.g., button background $btn-primary-bg, text color $text-muted, etc.

Step 1: Install Bootstrap 5 with Sass¶

To modify theme colors, use Bootstrap’s Sass source files (not just CDN CSS), as Sass variables require compilation to generate CSS. Installation steps:

Ensure Node.js is installed (for dependency management). Run in the terminal:

   npm init -y  # Initialize project (skip if existing)
   npm install bootstrap@5 sass --save-dev  # Install Bootstrap 5 and Sass compiler

Create a folder structure in the project root for organization:

   Project Root
   ├─ scss/        # Custom Sass files
   │  └─ custom.scss  # Custom theme configuration
   └─ dist/        # Compiled CSS output

Step 2: Customize Global Brand Colors¶

2.1 Define Primary Brand Color¶

Suppose we set the primary brand color to Google’s blue #4285F4 (logo color). Steps:

In scss/custom.scss, override Bootstrap’s core variables before importing Bootstrap:

   // Custom theme variables (must come before importing Bootstrap)
   $primary: #4285F4;        // Primary brand color
   $primary-dark: #3367D6;   // Darker shade for hover states
   $secondary: #34A853;      // Secondary color (customizable)

   // Import Bootstrap source files
   @import "bootstrap/scss/bootstrap";

Critical Note: Variable definitions must precede @import "bootstrap/..." to override default values.

Compile the Sass file:

   npx sass scss/custom.scss dist/css/custom.css

This generates dist/css/custom.css with your custom theme.

2.2 Verify the Result¶

Test the custom CSS in an HTML file:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="dist/css/custom.css">
</head>
<body>
  <!-- Test primary buttons -->
  <button class="btn btn-primary">Primary Button</button>
  <button class="btn btn-secondary">Secondary Button</button>

  <!-- Test navigation bar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
  </nav>
</body>
</html>

The buttons and navigation bar should now display your custom #4285F4 primary color.

Step 3: Refined Component Color Customization¶

3.1 Button Color Customization¶

Button backgrounds and text colors can be controlled via $btn-* variables:

// Custom primary button
$btn-primary-bg: #4285F4;
$btn-primary-color: #ffffff;
$btn-primary-hover-bg: #3367D6; // Darker on hover

// Custom warning button
$btn-warning-bg: #FBBC05;
$btn-warning-color: #000000;

3.2 Card Color Customization¶

Card-specific variables control backgrounds, borders, and headers:

$card-bg: #f8f9fa;           // Card background
$card-border-color: #dee2e6; // Card border
$card-header-bg: $primary;   // Header background (uses primary color)

3.3 Quick Utility Class Overrides (No Variable Changes Needed)¶

For temporary color adjustments, use Bootstrap utility classes:

<!-- Custom card background -->
<div class="card bg-custom" style="background-color: #FF5733;">
  <div class="card-body">
    <h5 class="card-title">Custom Card</h5>
  </div>
</div>

<!-- Custom text color -->
<p class="text-#FF5733">Custom Text Color</p>

Step 4: Advanced Techniques (Dark Mode & Dynamic Themes)¶

Bootstrap 5 supports dark mode (Dark Mode) via $theme-colors:

// Enable dark mode
$enable-dark-mode: true;
$theme-colors: (
  primary: #4285F4,
  secondary: #34A853,
  dark: #1E293B // Dark background color
);

For dynamic theme switching at runtime, use CSS variables (:root):

:root {
  --primary: #4285F4;
  --primary-dark: #3367D6;
}

Notes¶

Variable Priority: Custom variables must be defined before importing Bootstrap to override defaults.
Compilation Tools: Use the “Live Sass Compiler” VSCode extension for automated compilation.
Official Documentation: Refer to the Bootstrap 5 Sass Variables Guide for a complete list of variables.

By following these steps, you can fully customize Bootstrap 5 theme colors—from global brand identities to granular component details. Experiment with variables to observe changes in buttons, navigation bars, and cards, and quickly build a unique brand-aligned interface!