logo
Bootstrap
Bootstrap

How to implement custom color modes in Bootstrap 5.3?

March 18, 2026

Bootstrap 5.3 officially supports only light and dark color modes. However, it is technically possible to create custom color modes using the data-bs-theme attribute by overriding Bootstrap’s CSS variables. Since Bootstrap 5.3 is fully CSS-variable driven, any custom theme name (e.g., teal, brand, custom) will work as long as the required variables are defined, even though these modes are not officially documented or maintained by Bootstrap.

‍CSS Overrides:-

Code

[data-bs-theme="teal"] { 
  --bs-primary: #20c997; 
  --bs-primary-rgb: 32, 201, 151;
}

HTML Implementation:-

Code

<!DOCTYPE html>
<html lang="en" data-bs-theme="teal">
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-5">
    <div class="btn btn-primary mb-3">Teal Primary Button</div>
    <div class="card bg-primary text-white p-4">
      <h5>Custom Teal Theme Card</h5>
      <p>All components adapt automatically</p>
    </div>
  </div>
</body>
</html>
PreviousNext
Hire Now!

Need Help with Bootstrap Development ?

• Hire Now • Hire Now • Hire Now
Ready to leverage the power of conversational AI? Start your project with Zignuts expert AI developers.
bg-image

Related Q&A

Bootstrap
Bootstrap

calendar-iconMarch 18, 2026

clock-icon5 min read

How does Flexbox improve layout management in Bootstrap 4 and 5?
Bootstrap
Bootstrap

calendar-iconMarch 18, 2026

clock-icon5 min read

How to resolve "Bootstrap JavaScript components not working" issues?
Bootstrap
Bootstrap

calendar-iconMarch 18, 2026

clock-icon5 min read

How to implement and debug sticky footer layouts in Bootstrap?
Load More
Let's talk.
branch images
India
W210-217, Siddhraj Z Square, Opp. The Landmark, Kudasan Por Road, Kudasan, Gandhinagar - 382421
branch images
Germany
Rheinsberger Str. 76,10115 Berlin, Germany
branch images
USA
611 Gateway Blvd, South San francisco, CA 94080, USA
download-image
Company Deck
PDF, 3MB
© 2026 Zignuts Technolab. All Rights Reserved.
branch imagesbranch imagesbranch imagesbranch imagesbranch imagesbranch images