Векторный логотип
Для смены цвета лого или автоматической смены цвета в зависимости от фоновой картинки ваш логотип должен быть в формате SVG.
Для начала ваш логотип уже должен быть в векторе и переведен в кривые. В гугле полно уроков, как сделать простой векторный логотип, здесь же я расссмотрю его использование на сайте.
1. Открываем ваш векторный файл в иллюстраторе и подрезаем пустые поля
2. Сохраняем как SVG c такими настройками
3. Открываем полученный файл в любом текстовом редакторе и удаляем стили
Здесь выделен лишний участок:
4. Копируем код в svg-оптимизатор
Переходите по ссылке и оптимизируете ваш код.
5. Полученный код вставляем в поле SVG-код в кастомайзере вашего сайта
Внешний вид > Настроить > Внешний вид:
Здесь можно задать ему цвет, размер, отступы и включить автоматическую смену цвета. Для автоматической смены цвета на странице должен находиться слайдер, который должен быть полноэкранным или прижат к верху. Или фоновая картинка в шапке.
Вот пример со слайдером, прижатым к верху — здесь лого на темной картинке становится белым, а на светлой того цвета, которым вы ему задали. Обратите внимание, что шрифт меню тоже становится белым на темном фоне:
А вот пример картинки в шапке в серии: