Когда вы загружаете изображение значка в настройщик WordPress, оно предоставляет полезный предварительный просмотр, чтобы увидеть, как ваш значок будет выглядеть в браузерах в светлом или темном режиме.
Если цвет значка не работает в темном режиме, обычное решение — заменить прозрачный PNG на JPG с белым фоном, но тогда в темном режиме вы получите белый квадрат.
Альтернативно вы можете использовать SVG для значка и изменить стиль значка на основе цветовой схемы.
Создать значок SVG Создайте квадратный SVG с нужным значком. Это будет выглядеть примерно так:
Если цвет значка не работает в темном режиме, обычное решение — заменить прозрачный PNG на JPG с белым фоном, но тогда в темном режиме вы получите белый квадрат.
Альтернативно вы можете использовать SVG для значка и изменить стиль значка на основе цветовой схемы.
Создать значок SVG Создайте квадратный SVG с нужным значком. Это будет выглядеть примерно так:
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<path fill="#0F145B" d="......" />
</svg>
Удалите все стили из фигур в SVG (включая атрибуты fill и stroke ) и добавьте эти стили с помощью встроенного CSS.
Вы можете использовать @media ( prefers-color-scheme: dark ) другую стилизацию версии темного режима. Вот как теперь выглядит мой SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<style>
path {
fill: #0F145B;
}
@media ( prefers-color-scheme: dark ) {
path {
fill: #43C1C5;
}
}
</style>
<path d="....." />
</svg>
Добавьте значок SVG в свою тему
Я добавил файл favicon.svg в каталог своей темы /assets/images/ , но вы можете добавить его в любое место своей темы.
Добавьте следующий код в файл function.php вашей темы, чтобы включить значок SVG.
Добавьте следующий код в файл function.php вашей темы, чтобы включить значок SVG.
/**
* SVG Favicon
*/
function be_svg_favicon() {
echo '<link rel="icon" href="' . esc_url( get_stylesheet_directory_uri() . '/assets/images/favicon.svg' ) . '" type="image/svg+xml">';
}
add_action( 'wp_head', 'be_svg_favicon', 100 );
Кажется, что значок SVG имеет приоритет над значком, сгенерированным WP, независимо от того, появляется ли он до или после него в разметке страницы, но у меня приоритет установлен на 100, поэтому на всякий случай он появится после.
Даже при таком подходе вам следует загрузить версию значка в формате JPG в настройщик WordPress. До сих пор существует множество браузеров, которые не поддерживают значки SVG, поэтому вам понадобится запасной вариант.
Источник Билл Эриксон. Перевод: Yandex Cloud с помощью сервиса translate