Personalize the contrast of text color in buttons using bootstrap 5

Using bootstrap.build has been a smooth experience for customizing Bootstrap 5 so far. However, when I switched to a React project, things started going wrong. The text inside the buttons turned black and the outline button had the same issue on hover.
https://i.sstatic.net/y5sLT.png https://i.sstatic.net/R450M.png

https://i.sstatic.net/PM5eN.gif

I customized the .scss file like this:

$orange: #e84c22;
$primary: $orange;

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

However, changing the #e84c22 color for the buttons to display white text using btn btn-outline-primary and btn btn-primary classes did not work as expected, even after adjusting $yiq-contrasted-threshold.

I'm curious about the difference between using Bootstrap in React and through bootstrap.build. What could be happening behind the scenes that is causing this issue?

You can review my example project on codesandbox.io and let me know if you can spot where I went wrong:
https://codesandbox.io/s/sparkling-paper-5tvvc?fontsize=14&hidenavigation=1&theme=dark

cssreactjstwitter-bootstrapsassbootstrap-5

Answer №1

After reviewing the source code, it is evident that bootstrap.build/app is still utilizing Bootstrap 4, rather than transitioning to Bootstrap 5. Notably, there have been changes in the color contrast algorithm from Bootstrap 4 to Bootstrap 5, with a significant difference in the color contrast threshold.

In Bootstrap 4, the YIQ color space was utilized...

// The yiq lightness value that indicates the transition of color lightness from "dark" to "light". Valid values range between 0 and 255.
$yiq-contrasted-threshold: 150 !default;

On the other hand, Bootstrap 5 adopts the WCAG 2.0 algorithm.

// The required contrast ratio against white to determine if color transitions from "light" to "dark". Acceptable WCAG 2.0 values are 3, 4.5, and 7.
// Refer to https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio: 4.5 !default;

Upon comparing the two versions and their color logic:

Applying the 4.x color contrast logic to alter $primary to #e84c22 - yields light text color

Implementing the 5.x color contrast logic to modify $primary to #e84c22 - results in dark text color

Hence, your Bootstrap 5 React SASS customizations are functioning as intended, while bootstrap.build continues to rely on the older 4.x version.

To achieve light text color in Bootstrap 5 (with React), you may adjust the default value of the $min-contrast-ratio variable...

For instance, updating $min-contrast-ratio from 4.5 to 3 will generate light text color in contrast to #e84c22:

$min-contrast-ratio: 3;
$orange: #e84c22;
$primary: $orange;

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

As stated in the Bootstrap 5 SASS documentation, "the acceptable values for WCAG 2.0 are 3, 4.5, and 7". Alternatively, you can explore the 5.x solutions outlined in my related response. For further customization of Bootstrap, consider checking out themestr.app (note: I am the creator), now updated with Bootstrap 5.x.

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

The CSS file cannot be found on the live XAMPP server

Here is the current structure of my project: https://i.sstatic.net/foUiy.png I attempted to link my CSS stylesheet by navigating to the project path, then /css, and finally /style.css. This setup works correctly when opening the .html file locally in a b ...

phphtmlcssxampphref

Failing to reach the nested if statements within a switch case block

Before removing my question, please read this. Despite testing with console.logs, my code does not enter the if statements. I have not come across a similar solution to my issue. In an attempt to address any timing or asynchronous problems, I added a use ...

javascriptreactjstypescriptreact-hooks

Using jQuery to create radial-gradients with the background-css feature

I'm a newcomer to this online community and English is not my first language. Despite that, I will do my utmost to clearly explain the issue at hand. Recently, I utilized the .css function in jQuery to create a design element successfully. However, I ...

jquerycss

Insert a variety of pictures into divs that share the same class

Can I target div elements with the same class in CSS and apply unique styles to each? Here is my HTML: <div class="image"><br/>a</div> <div class="image"><br/>b</div> <div class="image"><br/>c</div> ...

htmlcss

Is there a way to horizontally center Material UI Switch and its icon props?

I'm using Material-UI to implement a Switch component on my project. This particular component allows for the addition of icons, however, I've encountered an issue with alignment when including them. Is there a way to horizontally center align b ...

javascripthtmlreactjsmaterial-ui

Javascript malfunctioning - exhausted all troubleshooting options

My JavaScript code consists of a single line, but I keep encountering the "getElementById null" error. document.getElementById("menu-background").style.left = "0"; HTML: <html> <head> <title></title> <link rel="style ...

javascripthtmlcss

What is the best approach for making a drawer resizable?

I am interested in making the material ui drawer resizable width using a draggable handle. Currently, I have implemented a solution that involves adding a mouse event listener to the entire application and updating the width based on the position of the ...

javascriptreactjsresizematerial-ui

When it comes to designing responsive websites, the use of `@

Being new to CSS, I am open to criticism and feedback. @media (max-width: 735px) {... } @media (min-width: 735px) {... } @media (width: 320px) {... } @media (width: 360px) {... } @media (width: 375px) {... } @media (width: 414px) {... } I have tried us ...

cssmedia-queries

Positioning elements vertically and float them to the left side

I'm struggling to grasp the concept of the float attribute. Here's the code that is causing me confusion: #p1 { border: solid black 3px } <p id="p1" style="float:left">Paragraph 1</p> <a href="https://facebook.com" style="floa ...

htmlcss

Utilizing JavaScript to trigger a series of click events on a single button in order to

I am working on implementing a click event for a checkbox that will add and remove CSS classes using the "classList.toggle" method. Specifically, I want the checkbox to toggle between adding the "xyz" class on the first click, and then adding the "abc" cla ...

javascripthtmlcss

Guide to activating animation on one element when hovering over another element?

I am setting up an HTML 5 range element and looking to enhance the user experience. Specifically, I want to implement a feature where when the user hovers over the range, the height and width of the thumb should increase to 12 pixels. CSS .myrange::-webk ...

javascriptjquerycsshtmlcss-transitions

Stopping a div from causing the parent table's width to increase

I've encountered an interesting challenge with a project I'm working on. I need to inject markup into pages that I don't have control over, specifically within tables. The issue arises when my injected div causes the parent table to expand u ...

htmlcss

Steps to create a typewriter effect using a collection of words

I managed to create a looping typewriter effect, but I'm facing an issue where the first word in the array is not being typed again after the first cycle. Additionally, I am seeing 'undefined' displayed after the last word before it repeats ...

javascriptreactjsnext.js

What is the best method to choose the initial offspring of the primary brother or sister within a list item?

Is there a way to specifically target the nested li elements in my css selector? Check out the Demo li:first-child { background-color: rgb(236, 236, 236); list-style-type: none; margin-bottom: 3px; padding: 8px; } <ul> <li& ...

csssiblings

Error: Unrecognized term found in a project involving Tailwind CSS and Next.js

After 10 hours, I am still unable to deploy my application due to a build failure. I am using React/Next with Tailwind. I suspect the error stems from a PostCSS plugin, but I cannot pinpoint any mistakes (if there are any). The application runs perfectly ...

reactjsnext.jstailwind-cssvercelpostcss

Is there a way to automatically input an array of elements into a form without having to do it manually

Is it possible to create a form using an array of items fetched from a database, and automatically populate the form with each of these elements? Currently, I'm facing difficulties as the form appears empty. What am I missing? Below is the code I ha ...

javascripthtmlreactjsforms

How can I deploy React applications to AWS EC2 using Github Actions and AWS CodeDeploy?

I am currently facing a challenge in setting up a React app within Github Action workflow and deploying it on an EC2 instance. The issue I'm encountering is the inability to access the /build folder that is created during the action process. Below i ...

reactjsamazon-web-servicesgithubamazon-ec2

Implementing useState to toggle the checked value of a checkbox in React

When passing a list of checkbox fields with attributes to my component, I want to update the checked attribute based on user selection. However, all I have managed to do so far is double the check value in an array. How can I modify this specific key with ...

javascriptreactjs

Enhancing React with the Apollo Mutation Feature

Hello everyone, I recently started working with graphql and apollo. I am able to make get requests, but I am facing issues with mutations. Although my handleChange function is functioning properly and I can retrieve values, I am unable to make post request ...

node.jsreactjsmongodbgraphqlreact-apollo

Display multiple markers on a Google Map using google-map-react library

I am currently struggling to display markers on my Google Map using the map function. I have tried various approaches but nothing seems to work. Could there be limitations that I'm not aware of, or am I overlooking something critical? I experimented w ...

javascriptreactjsgoogle-map-react