Как изменить цвет вашего SVG-значка при включенном темном режиме
Использование изображения SVG в качестве значка вашего веб-сайта дает преимущество обслуживания одного ресурса, не беспокоясь о различных разрешениях экрана ваших пользователей.
Кроме того, вы можете изменить цвет значков SVG, когда включен темный режим!
Чтобы установить файл SVG в качестве значка:
<!-- ... -->
<head>
<!-- ... -->
<!-- favicon 👇 -->
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg">
<!-- ... -->
</head>
<!-- favicon 👇 -->
<!-- ... -->
Затем вы можете изменить код SVG значка для учета темного режима. Чтобы установить цвет элемента SVG (например, элемента <path>), вам необходимо указать значение для свойства fill (если значение не указано, по умолчанию используется черный цвет).
Чтобы настроить таргетинг на темный режим, используйте медиа-функцию prefers-color-scheme:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<style>
path {
fill: #212121; <!-- set icon color for light mode -->
}
@media (prefers-color-scheme: dark) {
path {
fill: white; <!-- set icon color for dark mode -->
opacity: 0.5;
}
}
</style>
<path d="M24,13.2V10.8H20.191a10.6,10.6,0,0,0-.228-1.44A10.145,10.145,0,0,0,22.2,3H19.8a7.738,7.738,0,0,1-.939,3.706,6.873,6.873,0,0,0-2.9-2.516,4.121,4.121,0,0,0-7.926,0,6.892,6.892,0,0,0-2.9,2.516A7.748,7.748,0,0,1,4.2,3H1.8A10.145,10.145,0,0,0,4.037,9.36a10.6,10.6,0,0,0-.228,1.44H0v2.4H3.845a11.117,11.117,0,0,0,.279,1.326A10.156,10.156,0,0,0,1.8,21H4.2a7.732,7.732,0,0,1,.985-3.783C6.746,20.245,9.372,22.8,12,22.8s5.254-2.555,6.815-5.583A7.732,7.732,0,0,1,19.8,21h2.4a10.156,10.156,0,0,0-2.324-6.474,11.117,11.117,0,0,0,.279-1.326Zm-17.4-3a1.8,1.8,0,1,1,.527,1.273A1.8,1.8,0,0,1,6.6,10.2ZM12,18a2.4,2.4,0,1,1,1.7-.7A2.4,2.4,0,0,1,12,18Zm3.6-6a1.8,1.8,0,1,1,1.273-.527A1.8,1.8,0,0,1,15.6,12Z"/>
</svg>
Подробнее: (caniuse.com/link-icon-svg) поддержка браузера.
Ссылка на автора - twitter.com/guerriero_se !
