Unable to combine theme color with text or background

After customizing Bootstrap's theme colors in my SCSS file, I encountered an issue. Here is how I did it:

// set variables
$primary: #8dc3a7;
$light: #b4d6c1;
$starorange: #df711b;

// import functions and variables
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$custom-theme-colors: (
  "starorange": $starorange,
);

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

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

I was able to successfully apply the starorange color to a button using the following code:

<button class="btn btn-md btn-starorange">Send</button>

However, when I tried to use the same color for text or background within the same HTML document, such as in the following examples:

<div class="pb-1 text-starorange">
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
</div>

or

<section class="bg-starorange">
     .... some html here ...
</section>

In both cases, the color was not applied at all. I am unsure why this is happening and would appreciate any assistance.

PS: It appears that while classes like btn-starorange, border-starorange, or link-starorange are present in the transpiled CSS file, bg-starorange and text-starorange do not exist.

csssassbootstrap-5

Answer №1

In a recent response to a question similar to this one, it was noted that there appears to be an issue introduced in version 5.1.0 as mentioned on the Bootstrap blog...

"Updated .bg- and .text- utilities The updated RGB values are designed to improve the use of CSS variables throughout the project. These changes allow for real-time customization without needing to recompile Sass, along with on-the-fly transparency for any background or text color."

Currently, in version 5.1.0, one would need to rebuild all the bg-* and text-* classes like so...

@import "functions";
@import "variables";
@import "mixins";

$starorange: #df711b;

$custom-theme-colors: (
  "starorange": $starorange
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

@import "bootstrap";

View Demo

An update for Bootstrap 5.1.x -- the issue with custom bg- and text- colors is set to be resolved in version 5.2.x according to this source

Answer №2

After trying the solution provided by @zim, I almost got it to work for me. However, it ended up removing the -white -black and -body variations on generated utilities.

Fortunately, I managed to successfully incorporate my additional theme colors using the following approach:

@import "functions";
@import "variables";
@import "mixins";

// Additional Theme Colors
$theme-colors:map-merge($theme-colors, (
  "brand-primary":$brand-primary,
  "brand-primary-light":$brand-primary-light,
  "brand-primary-dark":$brand-primary-dark,
  "brand-neutral-dark":$brand-neutral-dark,
  "brand-neutral-medium":$brand-neutral-medium,
  "brand-neutral-light":$brand-neutral-light,));

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-colors: map-merge($utilities-colors, (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
));
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

@import "bootstrap";

Although it may not be entirely correct, it seems that according to Bootstrap's variables.scss file, white/black/body should be reintroduced into $utilities-text and $utilities-bg rather than all utilities. While this solution works for my current requirements, a more proper approach would involve adding them specifically to $utilities-text-colors and $utilities-bg-colors. However, when attempting this, black is somehow lost in the process.

Having dedicated too much time to this today, I've come across a potential fix in the upcoming release. As such, I've decided to postpone updating until then, as it presents a viable option for resolving the issue.

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

Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

I would greatly appreciate any assistance with this request, please. Here is the input that I have: <input onchange="UpdateItemQuantity(this.value,1284349,0,10352185,2579246,'','AU'); return false;" type="number" class="form-contro ...

jqueryhtmlcss

CSS border alignment techniques

I am attempting to achieve the effect of having an orange border on top of a blue border, with only the orange border moving. I have noticed this design feature on various websites but have been unable to replicate it without removing the padding of the pa ...

htmlcss

JavaScript Birthday Verification: Regular Expression Pattern

I am currently testing out JavaScript form validation. The information provided is not being sent to any database, it's just for format testing purposes. All the regex checks are functioning correctly apart from birth. It seems like there may be an i ...

javascripthtmlcssregex

What methods can I use to create a navigation bar similar to this design?

Lately, I've noticed a growing trend in navigation bars that are designed to resemble waves. Wavey Navbar I'm eager to incorporate a similar navbar into my website, but I'm struggling to figure out how to do it. I'm working with react ...

htmlcss

Bootstrap mobile menu logo design

Currently, I am working on a bootstrap template where I have created a div class containing a logo. However, I have noticed that when I resize the Chrome window, the logo overlaps with the mobile menu. Here is the mobile version of my site: https://i.sst ...

htmlcsstwitter-bootstraptoggle

Increase the dropdown size without altering the dimensions of the container

I have a dropdown menu enclosed in a div with a vibrant yellow background. Take a look at the code on Plunker here. Upon clicking the dropdown button, the list expands and the container's height increases as well. The background color of the dropdown ...

htmlcss

Expand your view to avoid overflow

Take a look at this image When viewing with standard resolution (1386 x 788), everything looks fine. However, when attempting to zoom out in Internet Explorer, things get messy: Why does this happen and how can it be fixed? Here's the code causing t ...

htmlcss

Preventing placeholder from reverting back on transition (CSS)

My goal was to create an input field with a transition effect on the placeholder text. To achieve this, I utilized a <span> tag to hold the placeholder and applied a transition using the :focus CSS selector. The implementation works smoothly, but the ...

htmlcssdebuggingcss-transitionsplaceholder

The page appears to be too wide for its intended dimensions

Currently, I am developing a single-page website located at . The issue I am facing is that the page appears larger than 100% despite there not being any code elements causing this distortion. To create this website, I am utilizing PHP for fetching Faceboo ...

phpjqueryhtmlcss

Making rapid formatting changes by rearranging the positioning of words in Javascript

Struggling to untangle my complex code, I'm unable to make the necessary adjustments. Here's what I have: var stocks= [ ["Beef (80/20) raw","oz",115.4451262,3.293742347,72,"4.85 gallons","5.65 pounds","0 - ",2.142,19,20,"0.0001275510204"," ...

javascriptjqueryhtmlcss

What is the best way to make my Bootstrap card scale down exclusively?

I am currently working on a game using HTML and JS. The game involves collecting resources to unlock new "helpers" that appear in a div. Everything is functioning well, except that the alignment of the cards in the list is off. This is because the bootstra ...

htmlcssbootstrap-5

Div at the top and bottom that remains fixed while still allowing main content to be visible

My design uses a straightforward layout, featuring top and bottom divs that span 100% width. The content is sandwiched between these two sections: |--------------------| | TOP | |--------------------| | | | CONTENT ...

bootstrap-5

How to implement div scrolling on button click using Angular 4

Is there a way to make the contents of a div scroll to the left when one button is clicked and to the right when another button is clicked? I've tried using ScrollLeft, but it doesn't seem to be working... Here's the HTML code: <button ...

javascripthtmlcssangular

Including a CSS link in a .css file is an essential step in styling

Can someone guide me on how to reference the Bootstrap link (https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css) in a .css file within an Angular project? ...

cssangular

I want to update the toggle switches within the GridToolbarColumnsButton component from MUI's DataGrid to checkboxes

Currently, I am developing a website where one of the pages has tabular data fetched from the backend. To filter this table, I utilized Mui filters from datagrid({...data}components={{ toolbar: CustomToolbar }}). Among these filters is a GridToolbarColumns ...

cssreactjscheckboxmaterial-uidatagrid

The CSS background gradient appears distorted on larger screens

https://i.sstatic.net/SN1j8.jpg This layout design is my own creation. It's structured like this: <div class="outer"> <div class="container"> <div class="content"></div> <aside></aside> </div> < ...

htmlcss

Tips for ensuring the label and input are aligned on the same line in Bootstrap 5

Is there a way to align the label and input on the same line in Bootstrap 5? I'm unsure of how to do this. https://i.sstatic.net/eFo50.png Thank you for your assistance. <!DOCTYPE html> <html> <head> <title>HTML CSS ...

bootstrap-5

Utilizing a dynamic URL to set the background image of a div element (with the help of

Currently, I am in the process of designing a user registration page that allows users to input an image URL and view a preview of the image within a designated div. The div already contains a default image set by a specific class. The HTML code for displa ...

jqueryhtmlcssimage

Since updating my background-image, the header images have mysteriously vanished

Currently, I am in the process of building a webpage and want to create a default navigation bar that will be consistent across all pages. Below is the code snippet from the file where I wish to include my navigation bar: <html> <head> < ...

phpcssnavigationincludedefault

Tips for appending the id of an active element to a URL

My goal was to include the id value of the active element in a URL and then redirect to that URL with a button click. HTML <div class="icon" tabindex="0" id="company"> <img src="company.png"> </div> <button type="submit" onclick= ...

javascriptjqueryhtmlcss