Bootstrap

How to implement custom color modes in Bootstrap 5.3?

March 18, 2026

download ready
Thank You
Your submission has been received.
We will be in touch and contact you soon!

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/bootstrap@5.3.3/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>
Arrow icon

Previous

Next

Arrow icon
Hire Now!

Need Help with Bootstrap Development ?

Work with our skilled bootstrap developers to accelerate your project and boost its performance.
**Hire now**Hire Now**Hire Now**Hire now**Hire now

Related Q&A

blog-banner-img
calender
March 18, 2026

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

Bootstrap
All
blog-banner-img
calender
March 18, 2026

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

Bootstrap
All
blog-banner-img
calender
March 18, 2026

How to implement and debug sticky footer layouts in Bootstrap?

Bootstrap
All
Ready to Build
Something Amazing?
Got an Idea?
We got you.
Need a Tech Partner
You Can Trust?
Got Challenges?
We’ve Got Solutions.
Your Vision,
Our Mission.
Let’s talk.
Project Inquiry
Email iconhello@zignuts.com
Call icon+49 3056837888
Call icon+1 4088728242
Career Inquiry
Email icontalent@zignuts.com
Call icon+91 9427726620
India
A-409, Siddhraj Zori, Gandhinagar, 382421, Gujarat, India
Germany
Rheinsberger Str. 76,10115 Berlin, Germany
USA
611 Gateway Blvd, South San francisco, CA 94080, USA
Company Deck

Company Deck

PDF, 3MB

© 2026 Zignuts Technolab. All Rights Reserved.

Facebook iconTwitter iconInstagram iconYoutube iconLinkedIn iconSocial icon

How to implement custom color modes in Bootstrap 5.3?

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/bootstrap@5.3.3/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>