Modifying the color scheme of Bootstrap

In order to simplify referencing, I am establishing new theme colors as shown below, allowing me to use classes like bg-red instead of bg-danger or text-purple, and so forth.

$primary        : #24305e;
$blue           : #375abb;
$indigo         : #796eff;
$purple         : #6f42c1;
$pink           : #e83e8c;
$red            : #db4446;
$orange         : #e3240C;
$yellow         : #ffc107;
$green          : #21c87a;
$teal           : #2e9cca;
$cyan           : #17a2b8;
$light          : #f6f9fc;

$theme-colors   : (
    "blue"      : $blue,
    "indigo"    : $indigo,
    "purple"    : $purple,
    "pink"      : $pink,
    "red"       : $red,
    "orange"    : $orange,
    "yellow"    : $yellow,
    "green"     : $green,
    "teal"      : $teal,
    "cyan"      : $cyan    
);

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

However, I am unsure if this is the correct approach, as it appears that I have duplicate colors defined within the :root variables. Please see the attached image for reference.

https://i.sstatic.net/laNvv.png

Could there be something missing here?

csstwitter-bootstrapsass

Answer №1

The reason for this is that CSS variables are generated from the $colors: () map, not the $theme-colors:() map.

You end up overwriting existing CSS variables by using the same color names. For instance, if you were to do

$theme-colors:( 'vermilion':$red, )

in root:, you would have both --vermilion: and --red:

UPDATE: This is similar to having in a regular .css file:

:root {
    --red: #222222;
    --red: #333333;
}

The first --red: #222222; gets overridden and the browser uses the second value --red: #333333;

Answer №2

When using Bootstrap, it's important to note that there are CSS variables defined for both the $colors and the $theme-colors maps. The default $colors map already includes colors like blue, indigo, purple, and others that are also defined in the $theme-colors map. This can result in the related CSS variables being output twice.

In the default Bootstrap version 4.5.2, the $colors map is specified as:

(
    "blue": $blue,
    "indigo": $indigo,
    "purple": $purple,
    "pink": $pink,
    "red": $red,
    "orange": $orange,
    "yellow": $yellow,
    "green": $green,
    "teal": $teal,
    "cyan": $cyan,
    "white": $white,
    "gray": $gray-600,
    "gray-dark": $gray-800
)

This duplication should not cause any problems if you ensure that the color values are consistent across both maps. If you need to assign a different value to a color variable like $blue compared to its counterpart in $theme-colors, you may run into conflicts and should consider renaming one of them (e.g., using "blue2").

Although seeing duplicated CSS variables might be confusing, it can actually help pinpoint any potential issues with color overrides. By examining how the color-name variables, default color map declarations, and custom theme-colors map interact, you can better troubleshoot styling inconsistencies in your browser.

It's worth noting that including unnecessary theme-colors can bloat your CSS file size, so it's advisable to only include those that are truly essential for your project.

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

Is it possible to configure Nginx mime types within a Docker container?

My docker-compose.yml file looks like this: version: "1.0" services: web: container_name: webserver image: nginx volumes: - ./nginx.conf:/etc/nginx/nginx.conf:ro - ./frontend:/frontend ports: - "8001:80&qu ...

javascriptcssnginxwebserverstatic-files

What is the best method to ensure a TALL table header is repeated on every page in Chrome?

First time poster =) I am currently facing an issue while trying to print a long table and have the table header repeat on each page. The problem arises when the height of the <thead> reaches a certain threshold, specifically 242px in Chrome 87.0.42 ...

htmlcssgoogle-chrome

Modify the color of the matSnackbar

I'm having trouble changing the snackbar color in Angular using Angular Material. I tried using panelClass in the ts file and adding it to the global css, but the color remains unchanged. Any suggestions on how to resolve this? I am still new to this ...

cssangulartypescriptfrontend

What is the process for verifying which classes have been assigned to a specific component?

I am working with a Vue component and I would like to determine, from within the component itself, which classes have been applied to it. Is there a way to accomplish this? Currently, I am using a workaround where I pass the class as a prop: <my-comp ...

cssvue.jsvue-component

This module is not compatible with the "node" engine. The required version is "x" but the current version is "x"

I'm facing an issue while trying to deploy on AWS. The error message I receive is: The engine "node" is incompatible with this module. Expected version "16.17.0". Got "10.24.0" I've attempted to upgrade Node, both in the package.json file and by ...

node.jsamazon-web-servicessass

The attempt to change the header's background color has proven to be unsuccessful

Hello this is my first question on stackoverflow so please forgive my lack of experience. I am attempting to modify the background color of an entire HTML document using the background-color property on the element. Despite changing some parts of the docu ...

htmlcssasp.net-mvcbootstrap-4

"Positioned at the top of the page is the alert box, with the

I'm looking to add an alert at the top of my webpage containing a form for visitors to enter their phone number. Currently, I have a "alert alert-info" div with the form inside it placed at the top of my body tag, which works perfectly. However, when ...

javascriptjqueryhtmlcsstwitter-bootstrap

Attempting to align the fixed banner in the middle of my blog

I have spent hours combing through code after code on this site, trying to center my fixed banner without success. I am feeling frustrated and in need of some assistance. Here is the CSS snippet I have been working with: .heading { position:fixed; ...

csscentertumblrfixedbanner

When I click on the md-select element, a superfluous "overflow-y: scroll;" gets added to the <body> of my webpage

Typically, I have the following styles on my body: element.style { -webkit-app-region: drag; } However, when I interact with a md-select element (you can observe this behavior on the provided link), additional styles are applied. element.style { -w ...

javascripthtmlcssangularjsangular-material

Display two images consecutively within a single img tag

My goal is to display two images using a single <img /> tag. The first small image will be loaded and shown using the src attribute, while the second large image will be contained within the data-src attribute. Only one image will be displayed at a t ...

javascriptjqueryhtmlcssimage

Choosing the Offspring: Deliberating on Multiple Children with Identical Names in Selenium

Just starting out with Selenium and web development in general, I've encountered a problem with locating an element using XPath. selenium.common.exceptions.NoSuchElementException I've been trying to troubleshoot for a while now, but haven' ...

pythonhtmlcssseleniumselenium-webdriver

The table row's background image splitting into two halves

I am working on a table row class called logo, which has specific attributes. .logo { background: url("img/logo.png") no-repeat left top !important; } Currently, I have successfully placed an image at the top left of every row. However, my goal is ...

cssbackground-image

There seems to be an issue with the on() function in jQuery when using mouseover

I am trying to implement a small popup box that appears when I hover over some text, but for some reason it's not working as expected. Can someone please help me troubleshoot this issue? My goal is to display the content from the "data-popup" attribut ...

jqueryhtmlcss

Div vanishes once SVG Gaussian blur is applied

I'm attempting to add a Gaussian blur effect to an element that contains some child nodes with content. In Chrome, I successfully applied the blur using the following style: -webkit-filter: blur(2px); Unfortunately, Firefox does not support thi ...

htmlcssfirefoxsvgsvg-filters

Removing the navigation button from the hamburger menu

I am working on creating a semi-progressive top navigation bar. For the mobile viewport, the navigation bar will only display the logo and a hamburger button. When the button is clicked, various navigation menu options as well as the Log In and Sign Up bu ...

javascripthtmlcss

The issue with MUI TextField: the outline is overlapping the label

Recently, I encountered an issue with a MUI TextField in my project. In its default state, everything appeared fine: https://i.stack.imgur.com/WFzOr.png However, when I increased the font size as per the theme provided below, the label started to overlap ...

cssreactjsmaterial-ui

"Within Angular 2+, the attribute referenced is not recognized as a valid property, even though it is explicitly defined within the @Input

The main goal here is to increase the vertical pixel count. <spacer [height]="200"></spacer> Initially facing an issue where an error message states that height is not a recognized attribute of spacer. To address this problem, I set up the fo ...

javascripthtmlcssangularproperties

Relocate the preview division below the button in the Kartik File Input Widget

There are two input file buttons that allow users to upload an image on each button. Upon selecting an image, a preview of the image will be displayed above the button. The current layout is shown here: https://i.sstatic.net/aLAbo.png When images of diff ...

javascriptjquerycssfile-uploadwidget

Tips for showcasing a table generated from various input types on a separate page after pressing the submit button

After creating two JavaScript functions, I am eager to utilize both of them upon pressing the submit button on my form. The first function is already integrated into the submit button and activates a paragraph display upon submission. Now, I intend to sh ...

javascriptcsshtml

A more efficient approach to creating a personalized design

After realizing the original question was unclear and wouldn't solve my problem, I have decided to edit it and create a new one. For my project, I require a customized layout where users can move, resize, add, or remove each box according to their pr ...

javascriptjquerycsslayoutmargin