Bootstrap 4主题颜色：变量与映射的使用场景对比

Awesome question! Let’s break down when to use each Bootstrap 4 theme color customization method, and why each choice makes sense for different scenarios.

When to use this: #

• You only need to tweak 1-2 default theme colors and want to keep the rest of Bootstrap’s default color palette as-is.
• You’re looking for a quick, minimal-code approach for small brand-alignment changes.

Why it works: #

Bootstrap uses core color variables like $primary and $danger as building blocks for its styles. By redefining these variables before importing Bootstrap’s SCSS files, you’re telling the framework to swap out the defaults with your custom values. This method avoids rewriting the entire color map, keeping your code clean and focused on just the changes you need.

Example:

// Custom overrides go first
$primary: #0074d9;
$danger: #ff4136;

// Then import Bootstrap's core SCSS
@import "bootstrap/scss/bootstrap";

When to use this: #

• You want to build a fully customized color set (e.g., remove default colors like info, add brand-specific hues like brand-teal).
• You need Bootstrap to automatically generate utility classes (like .btn-brand-teal, .bg-brand-teal, .text-brand-teal) for your custom colors.
• You want consistent color usage across all theme-dependent components (buttons, alerts, navbars, badges, etc.).

Why it works: #

The $theme-colors map is Bootstrap’s single source of truth for contextual color styles. When you modify this map, Bootstrap uses it to regenerate all related component styles and utility classes. This is ideal for full theme overhauls—no more manually writing CSS for every component that needs your custom color.

If you want to keep Bootstrap’s default colors while adding/updating some, use map-merge to avoid overwriting the entire map:

// Merge custom colors with Bootstrap's defaults
$theme-colors: map-merge($theme-colors, (
  "primary": #0074d9,
  "danger": #ff4136,
  "brand-teal": #00cc99
));

// Import Bootstrap's core SCSS
@import "bootstrap/scss/bootstrap";

Quick Rule of Thumb: #

• Use variable overrides for small, isolated color tweaks (e.g., just changing the primary brand color).
• Use the $theme-colors map for full theme overhauls or adding reusable custom color utilities.

内容的提问来源于stack exchange，提问作者slacle