Styling SVG summary-details element marker

Question

I am trying to change the color of a custom summary marker. The marker is an SVG loaded in the background tag of summary::after. The color definition must be a var to work with my theme picker.

<details>
  <summary>
    <span class="select-text">Other controls</span>
  </summary>
  <label id="first-control" for="shuffle-control" class="checkbox-container">Shuffle translation display order
    <input id="shuffle-control" type="checkbox" store="shuffle-control" checked />
    <span class="checkmark"></span>
  </label>
</details>

details {
  display: flex;
}
details summary {
  cursor: pointer;
}
summary {
  display: flex;
  list-style-position: outside;
  align-items: center;
  justify-content: space-between;
  margin-left: 0;
  padding: 0;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: "";
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-down-fill' viewBox='0 0 16 16' %3E%3Cpath fill='currentColor' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z' /%3E%3C/svg%3E");
  background-size: cover;
  color: var(--fontColor); **DOES NOT WORK**
  transition: 0.2s;
}
details[open] > summary::after {
  transform: rotate(180deg);
}

I have tried setting the color in the summary::after rule as well as within the SVG data.

Answer 1

As commented, you can't style any svg elements in image/background-images.

As a workaround you can use your svg icon as a mask-image and apply it to your pseudo element. Then you can change the rendered icon color by changing the background-color:

details {
  display: flex;
}

details summary {
  cursor: pointer;
}

summary {
  display: flex;
  list-style-position: outside;
  align-items: center;
  justify-content: space-between;
  margin-left: 0;
  padding: 0;
}

summary::-webkit-details-marker {
  display: none;
}

:root {
  --fontColor: red;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-down-fill' viewBox='0 0 16 16' %3E%3Cpath fill='currentColor' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z' /%3E%3C/svg%3E")
}

summary::after {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  mask-image: var(--svg);
  mask-size: cover;
  -webkit-mask-image: var(--svg);
  -webkit-mask-size: cover;
  background-color: var(--fontColor);
  transition: 0.2s;
}

details[open]>summary::after {
  transform: rotate(180deg);
}

<details style="--fontColor:green">
  <summary>
    <span class="select-text">Other controls</span>
  </summary>
  <label id="first-control" for="shuffle-control" class="checkbox-container">Shuffle translation display order
    <input id="shuffle-control" type="checkbox" store="shuffle-control" checked />
    <span class="checkmark"></span>
  </label>

</details>

<details style="--fontColor:magenta">
  <summary>
    <span class="select-text">Other controls</span>
  </summary>
  <label id="first-control" for="shuffle-control" class="checkbox-container">Shuffle translation display order
    <input id="shuffle-control" type="checkbox" store="shuffle-control" checked />
    <span class="checkmark"></span>
  </label>

</details>