Векторный логотип

Для смены цвета лого или автоматической смены цвета в зависимости от фоновой картинки ваш логотип должен быть в формате SVG.

 
Для начала ваш логотип уже должен быть в векторе и переведен в кривые. В гугле полно уроков, как сделать простой векторный логотип, здесь же я расссмотрю его использование на сайте.
 

1. Открываем ваш векторный файл в иллюстраторе и подрезаем пустые поля

2. Сохраняем как SVG c такими настройками

3. Открываем полученный файл в любом текстовом редакторе и удаляем стили

Здесь выделен лишний участок:

4. Копируем код в svg-оптимизатор

Переходите по ссылке и оптимизируете ваш код.

5. Полученный код вставляем в поле SVG-код в кастомайзере вашего сайта

Внешний вид > Настроить > Внешний вид:

Здесь можно задать ему цвет, размер, отступы и включить автоматическую смену цвета. Для автоматической смены цвета на странице должен находиться слайдер, который должен быть полноэкранным или прижат к верху. Или фоновая картинка в шапке.

Вот пример со слайдером, прижатым к верху — здесь лого на темной картинке становится белым, а на светлой того цвета, которым вы ему задали. Обратите внимание, что шрифт меню тоже становится белым на темном фоне:

А вот пример картинки в шапке в серии: