Is it possible to dynamically change the color of an SVG in the Alert Component based on the background color in SC

My goal is to dynamically change the Close Button SVG Color based on the background color being used. I am utilizing various Sass functions ($_luminance-list, color-contrast, contrast-ratio, luminance) to manage and adjust the colors.

For a demonstration, check out this Codepen example:

View codepen

Current result can be seen here:

https://i.sstatic.net/9ARjx.png

This is the desired outcome:

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

The full code includes the function definitions that I am utilizing:

Pasted comprehensive list of functions with defined variables from the original text...
cssbootstrap-4sassbootstrap-5

Answer №1

To fix the issue, you can simply eliminate the filter on .btn-close, specifically this part:

 //CSS Generated
.alert-yellow .btn-close {
  -webkit-filter: invert(1) grayscale(100%) brightness(200%);
  filter: invert(1) grayscale(100%) brightness(200%);
}

//SCSS
.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
 }

Snippet

.alert-blue {
  color: #ffffff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.alert-blue .btn-close {
  -webkit-filter: invert(1) grayscale(100%) brightness(200%);
  filter: invert(1) grayscale(100%) brightness(200%);
}

.alert-yellow {
  color: #000000;
  background-color: #ffc107;
  border-color: #ffc107;
}


.alert {
  position: relative;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-family: sans-serif;
  font-size: 1rem;
}

.alert-dismissible {
  padding-right: 3rem;
}

.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.7rem 1.6rem;
}

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  color: #000;
  background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZGF0YS1uYW1lPSJMYXllciAxIiBpZD0iTGF5ZXJfMSIgdmlld0JveD0iMCAwIDY0IDY0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZS8+PHBhdGggZD0iTTguMjUsMCwzMiwyMy43NSw1NS43NSwwLDY0LDguMjUsNDAuMjUsMzIsNjQsNTUuNzUsNTUuNzUsNjQsMzIsNDAuMjUsOC4yNSw2NCwwLDU1Ljc1LDIzLjc1LDMyLDAsOC4yNVoiIGRhdGEtbmFtZT0iJmx0O0NvbXBvdW5kIFBhdGgmZ3Q7IiBpZD0iX0NvbXBvdW5kX1BhdGhfIi8+PC9zdmc+) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.25rem;
}
<div class="alert alert-blue alert-dismissible" role="alert">
  <p><strong>Note!</strong> Lorem Ipsum is simply dummy text of the and typesetting industry.</p>
  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>

<div class="alert alert-yellow alert-dismissible" role="alert">
  <p><strong>Note!</strong> Lorem Ipsum is simply dummy text of the and typesetting industry.</p>
  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>

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

What is the process for choosing corresponding values in jQuery?

Hello, I am a beginner in programming and I am currently working on developing a word guessing game. Here is the code I have written so far: The (letter) represents the key being typed by the player Var compareLetters = $('.letter') represents ...

javascriptjqueryhtmlcss

Icon displayed within the input field

Is there a simple method to add an input text element with a clear icon on the right side, similar to the layout of the Google search box? I've searched, but I could only find instructions for placing an icon as the background of the input element. I ...

javascriptjqueryhtmlcss

Utilizing CSS/HTML to optimize code for mobile applications

Looking for some help with implementing the Upcoming Events part from this code snippet: https://codepen.io/AbhijithHebbarK/pen/boKWKE .events-details-list{ opacity:0; transition: all 0.3s ease-in-out; position: absolute; left: 0; rig ...

htmlcssmobile

Adjust the color of the section following the footer to match the footer color or black using Bootstrap

https://i.sstatic.net/gytFT.png Is there a way to modify the color of this element to match the footer color? I am seeking assistance on what CSS or HTML code would be necessary to accomplish this. I am working within Bootstrap 3 and have already attempte ...

htmlcss

"Exploring the world of Material UI styling with ReactJS: A deep dive

I've been busy developing a small web application using ReactJS and Material UI. In the documentation examples, many components include useStyles within the code. I've decided to follow suit and now have a useStyles function in each of my compone ...

javascriptcssreactjsmaterial-ui

Creating a seamless transition from 2 CSS grid columns to 1 on mobile devices without the need for a media query

Is utilizing a media query the sole solution for keeping itemX and itemY in the same cell on each device? Are there any native CSS grid methods that could achieve the same result? Feel free to check out the demonstration on the following fiddle: https://j ...

cssmedia-queriescss-grid

What is the best way to ensure my header element is positioned above my h2 element on the webpage?

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> <div id="page-wrapper"> <header id="header"> Hoppity Edits <div class="logo"> <im ...

htmlcss

What is the method for printing a webpage that has been modified using JavaScript?

Take a look at this screenshot to see what I'm working with. Users have the ability to modify the page by removing items, adding new items, or marking items as complete by crossing them out. I want users to be able to print the altered page using Jav ...

javascriptcssruby-on-railspdfprinting

Click on the link in the modal to either download the image or view a larger version

Struggling to create a photo gallery similar to Google Photos because of large image sizes - around 15mb - causing slow loading for users with poor connections. Currently using a placeholder image while waiting for the full-size image to load, but encount ...

javascriptimagebootstrap-4bootstrap-modal

Ways to eliminate class from HTML code

Trying to detect if a navigational element has a specific class upon click. If it has the class, remove it; if not, add it. The goal is to display an active state on the dropdown button while the dropdown is open. The active state should be removed when a ...

javascripthtmljquerycss

Ways to avoid margin overflow in CSS

I am facing an issue with the code below where the last row overflows the parent container. I have tried using overflow: auto; to fix it, but that just adds scrollbars. Any suggestions on how to prevent the overflow? <link rel="stylesheet" href="http ...

htmlcssbootstrap-4

Styling text in table cells using only CSS, without the use of scripting, based on the values within those cells

I have scoured the forum and came across several older threads that suggest it is not achievable with just CSS (the system I am utilizing does not support scripts). Is there a possibility that this has changed or if someone else has an alternative idea? W ...

htmlcss

Ways to incorporate sass:math into your vue.config.js file

While using vue-cli with Vue 2.6 and sass 1.49, I encountered errors in the console related to simple division calculations: Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. I attempted to ...

javascriptvue.jswebpacksassvuejs2

Is it practical to extract the page type/name from the CSS of the selected tab?

My website has multiple tabs on a single page and I want to integrate Google Analytics code. However, since all the tabs are part of the same page, I need a way to track which tab the user is interacting with. Would using CSS to check for the selected tab ...

javascriptcsswebgoogle-analyticsportlet

The functionality of Bootstrap 4 tabs is not compatible with owl carousel 2

Attempting to integrate bootstrap tabs functionality into the owl carousel 2, but encountering issues. On the first click of any menu item, it functions correctly and displays the corresponding value. However, upon clicking for a second time, it becomes s ...

tabsbootstrap-4owl-carouselbootstrap-tabs

Tips for creating a responsive <hr> tag

Help needed with adjusting the horizontal line tag on a webpage created using HTML, CSS, and Bootstrap. The issue arises when the window size changes to extra small. Initially, the hr tag was set to 400px, which looked great on full-screen view. However, ...

htmlcssresponsive-designbootstrap-4

A guide on setting background images with the img tag

I have created a PHP method that generates an HTML IMG tag. For example, ImageClass::getImage('sample.png' , 'myTitle') will output the string <img src="sample.png" title="myTitle" /> In my CSS file, I have used the following cod ...

phphtmlcss

I would like to include two separate divs within one larger div element

I need to include two div elements within a single div, one positioned to the right and the other to the left. <html> <div> <div><button class="mat-button menu-button"> <mat-icon color="primary"> remove &l ...

htmlcssangularangular6

What is the best method to vertically center a container in bootstrap 4 at a specified height?

I'm trying to center a container in Bootstrap 4. I have an element with a width of 300px. .guide-background{ background: url("https://www.webascender.com/wp-content/uploads/executive-guide-1.jpg"); background-repeat: no-repeat; backgrou ...

csstwitter-bootstrapbootstrap-4

Ways to evenly distribute children in a row using CSS

https://i.stack.imgur.com/HmziN.png The image above showcases the desired effect I am aiming for. It is important to note that the width of the container div may vary. The child elements should have consistent spacing between each other as well as the le ...

css