CODEWITHSUNDEEP
htmlcsssvghigh-contrast
Riverglow
Riverglow

Reputation: 21

SVG set to fill currentColor but doesn't update in high contrast mode

I have a couple in-line SVGs on my webpage. Here's an example of one:

svg {
  fill: currentColor;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="-13 0 120 30" width="74px">
  <path class="cls-1" d="M20,12.82H24.6v8.31h8.52V12.82h4.62v21H33.12V25.39H24.6v8.43H20Z" transform="translate(-19.98 -12.82)" />
  <path class="cls-1" d="M42.78,12.82H58.62v4.11H47.37v4.26h9.9V25.3h-9.9v4.41h11.4v4.11h-16Z" transform="translate(-19.98 -12.82)" />
  <path class="cls-1" d="M62.88,12.82H67.5v16.8H78v4.2H62.88Z" transform="translate(-19.98 -12.82)" />
  <path class="cls-1" d="M81.45,12.82H90c5,0,8,3,8,7.26v.06c0,4.86-3.78,7.38-8.49,7.38H86.07v6.3H81.45Zm8.28,10.59c2.31,0,3.66-1.38,3.66-3.18v-.06C93.39,18.1,92,17,89.64,17H86.07v6.42Z" transform="translate(-19.98 -12.82)" />
</svg>

My understanding is this should allow Windows' High Contrast mode to adjust the fill of the SVG. However, while everything else on the page changes in high contrast mode, neither SVG changes its fill color. It is taking on the initial currentColor, but then never changes. Any ideas?

Upvotes: 2

Views: 1336

Answers (1)

chrwahl
chrwahl

Reputation: 13060

I don't know if this helps, but as I understand the issue, the following example should work when changing to High Contrast Mode. The color property on the parent element (body) controls the fill in the SVG. When the color is "overwritten" this will also affect the SVG.

body {
  color: DarkSlateBlue;
  background-color: MidnightBlue;
}

svg {
  fill: currentColor;
}
<body>
<p>Text example</p>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="-13 0 120 30" width="74px">
  <path class="cls-1" d="M20,12.82H24.6v8.31h8.52V12.82h4.62v21H33.12V25.39H24.6v8.43H20Z" transform="translate(-19.98 -12.82)" />
  <path class="cls-1" d="M42.78,12.82H58.62v4.11H47.37v4.26h9.9V25.3h-9.9v4.41h11.4v4.11h-16Z" transform="translate(-19.98 -12.82)" />
  <path class="cls-1" d="M62.88,12.82H67.5v16.8H78v4.2H62.88Z" transform="translate(-19.98 -12.82)" />
  <path class="cls-1" d="M81.45,12.82H90c5,0,8,3,8,7.26v.06c0,4.86-3.78,7.38-8.49,7.38H86.07v6.3H81.45Zm8.28,10.59c2.31,0,3.66-1.38,3.66-3.18v-.06C93.39,18.1,92,17,89.64,17H86.07v6.42Z" transform="translate(-19.98 -12.82)" />
</svg>
</body>

Upvotes: 0

Related Questions