How to change an SVG color depending on the background brightness

Question

01. The SVG should have position:fixed.

02. The SVG should change colour to white when scrolling over darker backgrounds.

03. I don't want to use "mix-blend-mode: difference", because there's no consistency in colour.

Below is the desired effect in terms of transition, using mix-blend-mode, which looks perfect except for the colours:

.fixed {
  width: 40vw;
  position: fixed;
  display: inline-block;
  mix-blend-mode: difference;
  fill: #0c7b66;
  float: left;
}

.background {
  height: 70vh;
  font-size: 4vw;
  font-weight: bold;
  font-family: sans-serif;
}
.white {
  background-color: white;
  color: #0c7b66;
}
.color_01 {
  background-color: #0c7b66;
  color: #fff;
}
.color_02 {
  background-color: #add8c0;
  color: #0c7b66;
}
p { float: right; max-width: 50vw;}
body { margin: 0;}

<div class="fixed">
      <svg class="svg-icon" viewBox="0 0 20 20">
        <path fill="" d="M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266"></path>
      </svg>
    </div>

    <div class="background white">
      <p>ICON SHOULD BE THE SAME COLOUR AS THIS TEXT</p>
    </div>
    <div class="background color_01">
      <p>ICON SHOULD BE THE SAME COLOUR AS THIS TEXT</p>
    </div>
    <div class="background color_02">
      <p>ICON SHOULD BE THE SAME COLOUR AS THIS TEXT</p>
    </div>

Does this answer help? https://stackoverflow.com/a/71265575/13304024 — Ivan Beliakov, Aug 17 '23 at 18:39
Thank you for the suggestion, I did come across this post, but that transition is just not smooth enough and will be even more noticeable if you apply it to a logo or icons. This is such an important thing in web design it's mind-blowing to me that there isn't a standard, or at least a clean comprehensible way of doing this. And judging by the amount of similar post here on Stackoverflow with no satisfying answer, this must be some dark secret only some enlightened few have access to. — David Martins, Aug 18 '23 at 10:06
I think a built-in solution would be hard to achieve because people may have different requirements as to what is considered "darker" or "lighter" background. So a Javascript way of doing this looks most suitable to me — Ivan Beliakov, Aug 18 '23 at 13:16
@IvanBeliakov - Yes, I would expect JavaScript would be the way to do this, That's why I've included it in the question tags. — David Martins, Aug 18 '23 at 14:17

score 0 · Answer 1 · answered Aug 17 '23 at 18:29

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>SVG Color Change</title>
</head>
<body>
  <div class="container">
    <div class="background"></div>
    <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <!-- Your SVG content here -->
    </svg>
  </div>
</body>
</html>

Css

/* styles.css */
.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #000, #333); /* Define your background gradient */
}

.logo {
  position: relative;
  z-index: 1; /* Make sure the SVG is above the background */
  fill: white; /* Default fill color for the SVG */
  transition: fill 0.3s ease; /* Smooth color transition */
}

.container:hover .logo {
  fill: black; /* Change fill color when container is hovered */
}

In this example, the background is created using a gradient, but you can replace it with your desired background. When the .container is hovered, the .logo fill color changes to black.

This approach doesn't involve complex JavaScript or mix-blend-mode, making it a straightforward solution.

Thanks. That's clever. But I don't think it applies to what I'm trying to do. The logo needs to change colour when a darker DIV passes under it. https://jsfiddle.net/davidxmartins/ugabjqeL/17/ — David Martins, Aug 17 '23 at 19:59

How to change an SVG color depending on the background brightness

1 Answers1