Powrót

Dynamiczne SVG czyli jak sprawić, że ikony ożyją

SVG, które adaptuje się do dark i light theme

Sprawa jest dość prosta, ale nieoczywista. Mi przynajmniej nie przyszłoby do głowy, że można tak zrobić.

Próbując zrobić ikony dostosowane do theme (motywu), jeszcze jakiś czas temu rozważałbym bardziej:

• Nadpisywanie stylu z poziomu rodzica, “łapiąc” konkretny SVG.
• Używał dwóch różnych SVG, o różnych kolorach. Jeden bym ukrywał, a drugi pokazywał.

Problem w tym, że to wymaga obsługi takich sytuacji raz po razie, w całej aplikacji, gdziekolwiek tylko użyjesz ikony, która ma być na przykład biała w trybie “dark”, a czarna w trybie “light”. Nie mówiąc już o niepotrzebnym zaciąganiu dodatkowych assetów.

Jak sprawić by ikona zmieniała kolor wraz ze zmianą theme?

Aby osiągnąć taki efekt, można po prostu użyć @media wewnątrz samej ikony.

1<svg ...>
2    <style>
3      @media (prefers-color-scheme: dark) {
4        path {
5          stroke: #FFFFFF;
6        }
7      }
8      @media (prefers-color-scheme: light) {
9        path {
10          stroke: #000000;
11        }
12      }
13    </style>
14    <path .../>
15</svg>

Przykład powyżej będzie ustawiał kolor obrysowania w ikonie SVG, zależnie od zastosowanego przez użytkownika motywu systemowego.

Oczywiście przy bardziej złożonych ikonach należy zadbać o to by każda ścieżka (path) była obsłużona.

Powrót