How to change the default theme colors in Bootstrap?

To change default theme colors in Bootstrap 5 , use Sass to override variables like $primary before importing Bootstrap; 2. Update the $theme-colors map to add or modify colors such as "highlight" for full utility class support; 3. Compile the Sass file using build tools like Webpack, Vite, or the sass CLI after installing Bootstrap via npm; 4. Alternatively, use CSS custom properties for quick overrides, though this method does not generate new utility classes and relies on !important, making it less scalable; the recommended approach is using Sass for complete and maintainable customization.

Changing the default theme colors in Bootstrap (especially Bootstrap 5 and above) is straightforward if you're using Sass, which is how Bootstrap is built. You can customize the color palette by overriding Bootstrap’s variables before importing the framework.

Here’s how to do it properly:

✅ 1. Use Sass and Customize Variables

Bootstrap uses Sass variables for colors. To change the default theme colors (like primary, secondary, success, danger, etc.), you need to:

1. Create a custom Sass file (e.g., custom.scss)
2. Override Bootstrap’s color variables before importing Bootstrap
3. Compile the Sass into CSS

Example: Change Primary and Add a Custom Color

// custom.scss

// 1. Override default variables
$primary: #ff6b35; // Change primary to a nice orange
$success: #28a745;
$danger:  #dc3545;

// 2. Optionally add a new color to the theme map
$custom-colors: (
  "highlight": #ffcc00,
);

// 3. Import Bootstrap (must come after variable overrides)
@import "~bootstrap/scss/bootstrap";

? Note: The order matters! Variables must be set before importing Bootstrap.

✅ 2. Recompile the Theme Color Classes

Bootstrap generates utility classes (like .bg-primary, .text-success) based on a map called $theme-colors. If you want your new colors to have full support (classes, hover states, etc.), update this map.

Example: Modify $theme-colors Map

// custom.scss

// Define your custom colors
$custom-primary: #ff6b35;
$custom-secondary: #6f42c1;

// Update the theme-colors map
$theme-colors: (
  "primary": $custom-primary,
  "secondary": $custom-secondary,
  "success": #28a745,
  "danger": #dc3545,
  "warning": #ffc107,
  "info": #17a2b8,
  "light": #f8f9fa,
  "dark": #343a40,
  "highlight": #ffcc00  // This will generate .btn-highlight, .text-highlight, etc.
);

@import "~bootstrap/scss/bootstrap";

After compiling, you’ll get utility classes like:

• .text-highlight
• .bg-highlight
• .btn-highlight

✅ 3. Use with Build Tools (Recommended)

To make this work, you need a build setup that compiles Sass. Common tools:

• Webpack with sass-loader
• Vite, Parcel, or Node-Sass
• Or just use sass CLI:

sass custom.scss output.css

Ensure Bootstrap is installed via npm:

npm install bootstrap

✅ 4. Alternative: Use CSS Custom Properties (Limited)

If you can’t use Sass, you can override some styles with CSS, but this won’t generate new utility classes.

/* Can override specific elements */
.btn-primary {
  background-color: #ff6b35;
  border-color: #ff6b35;
}

.bg-primary {
  background-color: #ff6b35 !important;
}

⚠️ This method is not scalable and requires !important, so it’s not ideal.

Summary

For most projects, using Sass to override variables and rebuild Bootstrap is the cleanest and most powerful way to change default theme colors.

Basically, just:

1. Customize variables
2. Update $theme-colors
3. Import Bootstrap
4. Compile

And you’re good to go.

The above is the detailed content of How to change the default theme colors in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!