Темный режим для фавиконки SVG

Вы можете встроить CSS в SVG с помощью элемента <style>. Это означает, что вы можете стилизовать свою иконку с помощью встроенного prefers-color-scheme.

<!-- icon.svg -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: white;
      stroke: black;
      stroke-width: 2px;
    }
    @media (prefers-color-scheme: dark) {
      circle {
        fill: black;
        stroke: white;
      }
    }
  </style>
  <circle cx="50" cy="50" r="47"/>
</svg>

Для Safari все немного иначе. Вам нужно добавить mask-icon. Это тоже SVG, но он должен быть одноцветным и располагаться на прозрачном фоне. Вы указываете цвет, поэтому нет возможности для ситуации с темным режимом.

<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">