SCSS：警报组件 - 根据背景颜色更改 SVG 颜色？

Question

我想根据背景中使用的颜色更改关闭按钮 SVG 颜色我正在使用一些 Sass 函数 * ($_luminance-list, color-contrast, contrast-ratio, luminance)控制颜色。*

Codepen 示例：

这是当前结果：

我想达到的效果：

我的完整代码包括我使用的函数。

$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;

@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
  $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
  $max-ratio: 0;
  $max-ratio-color: null;

  @each $color in $foregrounds {
    $contrast-ratio: contrast-ratio($background, $color);
    @if $contrast-ratio > $min-contrast-ratio {
      @return $color;
    } @else if $contrast-ratio > $max-ratio {
      $max-ratio: $contrast-ratio;
      $max-ratio-color: $color;
    }
  }

  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";

  @return $max-ratio-color;
}

@function contrast-ratio($background, $foreground: $color-contrast-light) {
  $l1: luminance($background);
  $l2: luminance(opaque($background, $foreground));

  @return if($l1 > $l2, ($l1 + .05) / ($l2 + .05), ($l2 + .05) / ($l1 + .05));
}

@function luminance($color) {
  $rgb: (
    "r": red($color),
    "g": green($color),
    "b": blue($color)
  );

  @each $name, $value in $rgb {
    $value: if($value / 255 < .03928, $value / 255 / 12.92, nth($_luminance-list, $value + 1));
    $rgb: map-merge($rgb, ($name: $value));
  }

  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
}

@function opaque($background, $foreground) {
  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
}

@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

$white:          #ffffff       !default;
$black:          #000000       !default;

$min-contrast-ratio:   4.5                   !default;
$color-contrast-dark:  $black                !default;
$color-contrast-light: $white                !default;

$yellow: #ffc107 !default;

$theme-colors: () !default;
$theme-colors: map-merge(
    (
        "yellow":   yellow
    ),
    $theme-colors
);

@mixin alert-variant(
  $background,
  $border,
  $color: color-contrast($background)
) {
  color: $color;
  background-color: $background;
  border-color: $border;
  
  .btn-close {
      filter: invert(1) grayscale(100%) brightness(200%);
  }
}

@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant($value, $value);
  }
}

Answer 1

只需删除.btn-close上的filter，这部分：

 //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%);
 }

片段

.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>

SCSS：警报组件 - 根据背景颜色更改 SVG 颜色？

SCSS: Alert Component - change the SVG color based on background color?

css

sass

bootstrap-4

bootstrap-5

片段