Version 5.1.3 of Bootstrap now combines the $colors with the $theme-colors map for enhanced customization

I am attempting to introduce some color variables like "blue", "indigo" ... to the $theme-colors map. It appears to be functioning, but after compiling, it seems duplicated in the :root selector as shown in the image below.

Here's what I am seeing:

Image

This is my _variables.scss file:

// Import functions
@import "../../../node_modules/bootstrap/scss/functions";

$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;

$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;

$primary: #c55e0a;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;

$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "success": $success,
    "info": $info,
    "warning": $warning,
    "danger": $danger,
    "light": $light,
    "dark": $dark
);

$custom-theme-colors: (
    "blue": $blue,
    "indigo": $blue,
    "purple": $blue,
    "pink": $blue,
    "yellow": $blue,
    "teal": $teal
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);

// Import required Bootstrap stylesheets
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/utilities";

@import "../../../node_modules/bootstrap/scss/bootstrap";

Is there a way to resolve this issue?

csstwitter-bootstrapsassbootstrap-5

Answer №1

When referring to the Bootstrap documentation, it is recommended to store customizations in a separate file rather than modifying the _variables.scss. Instead, create a new file for your custom colors as outlined here.

To implement this customization, you can follow this example found here.

For instance, create a file named custom.scss and include the following code:

@import "bootstrap/functions";
@import "bootstrap/variables";

$custom-colors: (
    "blue": $blue,
    "indigo": $indigo,
    "purple": $purple,
    "pink": $pink,
    "yellow": $yellow,
    "teal": $teal
);

$theme-colors: map-merge($theme-colors, $custom-colors);
      
@import "bootstrap";

Furthermore, it is normal to see the :root variables repeated when merging them with the theme-colors map. This process is detailed in the _root.scss file...

The iteration first goes through the $colors map and then the $theme-colors map. As a result, you may observe variables like --bs-blue, --bs-indigo appearing twice in the :root section...

 @each $color, $value in $colors {
    --#{$variable-prefix}#{$color}: #{$value};
  }

  ....

  @each $color, $value in $theme-colors {
    --#{$variable-prefix}#{$color}: #{$value};
  }

If there are specific goals or objectives you are aiming to achieve, providing more context on that rather than just the symptoms could lead to a different solution or answer.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Conceal the scrollbar track while displaying the scrollbar thumb

Hey there! I'm looking to customize my scroll bar to have a hidden track like this. Everyone's got their own style, right? ::-webkit-scrollbar{ width: 15px; height: 40px; } ::-webkit-scrollbar-thumb{ background-color: #DBDBDB; borde ...

htmlcssscrollbar

I am looking to enhance my CSS menu by incorporating a sub menu feature

I am having trouble getting my submenu to slide to the right horizontally. I have tried various CSS menus, but they are causing issues with my webpage. Here is the HTML code for the menu: <li class="widget"> <h2>Categories</h2> & ...

cssdrop-down-menumenu

CSS: Alignment of Lists with Three Items

In my CSS, I am aligning two parts of a list item to the left and right side like this: ul li div.left { float: left; } ul li { text-align: right; } <ul> <li><div class="left">On the left</div>On the right</li> ...

htmlcsslist

What is the best way to create a fully clickable navbar item for the Bootstrap dropdown feature?

I'm struggling to make a button in a navbar fully clickable for the dropdown to open. Even when I try adding margin instead of padding, it only makes things worse. Can someone help me figure out what mistake I'm making here? Essentially, my goal ...

javascriptjqueryhtmlcsstwitter-bootstrap

Compiling a list of products, but the user interface needs some adjustments

Currently, I have designed a product list menu that includes a hover dropdown feature. This means that when a user hovers over a specific menu item, the corresponding list will automatically appear. However, I am facing two issues with this setup. Firstly, ...

htmlcssangular

The same size background effect

I am looking to create a list of names that are all the same size. How can I achieve this using Bootstrap? <ul class="list-unstyled"> <li> <a class="btn btn-xs btn-warning"> <span >Loren ipsum</span> </a> ...

csstwitter-bootstrap-3

How can I customize the tooltip range in Boostrap to show updated values?

Hello, I am using Bootstrap 5.0.2. <div class="mb-3"> Brightness <input type="range" class="form-control" id="brightness" name="brightness" min="1" max="255" value="100 ...

jqueryrangeslidertooltipbootstrap-5

JS and its dynamic color changes

A game has been developed using JavaScript and HTML. The game features a table with cells that are assigned IDs for toggling colors using an onClick function. The objective is simple: when a cell is clicked, all neighboring cells, including the clicked one ...

javascripthtmlcss

Ensuring that the text snippet is positioned centrally inside a container

I am currently developing a dynamic slideshow feature. My challenge is to ensure that any text I input dynamically is centered both horizontally and vertically within a designated box. My current code snippet looks like this: HTML <body> < ...

htmlcssdom

Is it possible to keep content visible in Bootstrap tab by adding CSS?

Having an issue with the "formbox" class that is causing unexpected behavior when applied to a form. When removed, everything works as expected. I've tried narrowing down the issue by removing each CSS rule individually and testing it out but haven&ap ...

htmlcsstwitter-bootstrap

Keep the footer at the bottom of the screen without needing to define a 100vh in Material UI

In the process of developing my react app with MUI framework, I encountered various challenges in creating a sticky footer at the bottom of my screen. After exploring different solutions, one approach that I found most satisfactory is as follows: export de ...

javascriptcssreactjsmaterial-ui

Arranging website elements to conform to a compact grid system

Recently, I've been brainstorming a unique concept for a website layout that involves a background composed of tiny color-shifting squares, each measuring about 10px. The challenge I'm facing is aligning the elements on the page with this grid, a ...

javascriptjqueryhtmlcsscanvas

Issue with Tailwind and MUI integration causing unanticipated error with white buttons in NextJS Project

I'm in the process of developing a project using NextJS, TailwindCSS, and MUI React UI library. While integrating an MUI Button into my project, I noticed that the button's color remains white despite styling changes. https://i.stack.imgur.com/ ...

cssreactjsmaterial-uinext.jstailwind-css

Different ways to swap table cells using only CSS

Does anyone know how to switch the positions of table cells using only CSS? I have three divs set up like this: #content { width: 1000px; display: table; float: none; vertical-align: top; border: 1px solid red; } #left { float: left; } #ri ...

htmlcsscss-tables

Is there a way to remove the ring shadow in TailwindCSS?

Here is a visual representation of the issue I'm facing (refer to the image): Check out the Image After inspecting with Chrome, it seems like the problem is connected to --tw-ring-shadow. I attempted to use classes like ring-0 and ring-offset-0 (men ...

cssreactjsmaterial-uitailwind-cssinput-field

Parallax Effect Slows Down When Scrolling In Web Page

Currently in the process of creating a website with a scrolling parallax effect using Stellar.js on the header and three other sections. However, I'm experiencing lag when scrolling, especially at the top of the page. I've attempted to reduce la ...

javascriptjqueryhtmlcssparallax

Positioning Tool Tips with Material Design Lite

While utilizing MDL tooltips (), the tooltip typically displays just below the <div> it is linked to. I am aiming for the tooltip to show up to the right of the referenced element, rather than beneath it. My attempt to adjust the appearance in styl ...

htmlcssmaterial-designmaterial-design-lite

Combining data-target and ng-click for optimal functionality

Can someone help me troubleshoot why my modal popup is not appearing before the ng-click event gets executed? The ng-click event is functioning correctly, but the modal is not displaying. <a class="btn btn-primary" data-toggle="modal" data-target="#ad ...

angularjstwitter-bootstrap

Refresh the CSS without having to reload the entire page

I am working on a web page that operates on a 60-second timer. The code snippet below is responsible for updating the content: protected void RefreshButton_Click(object sender, EventArgs e) { ReportRepeater.DataBind(); ReportUpdatePane ...

c#asp.netcssupdatepanel

Navigating through a HTML email Listserv with a click event scrolling feature

I am looking to create an interactive HTML email with a link that can scroll the recipient's browser to a specific section within the email. I am considering using Javascript and jQuery for this functionality. Can someone guide me on how to implement ...

javascriptjqueryhtmlcss