Логотип SVG в тёмной теме: кто управляет цветом

Логотипу SVG для тёмной темы нужен явный источник информации о теме. CSS страницы может оформлять контуры встроенного SVG. Внешний SVG, загруженный элементом изображения, имеет собственный контекст стилей, но внутренний запрос prefers-color-scheme может реагировать на цветовую схему встраивающего элемента. Класс ручной темы и предпочтение пользователя светлой или тёмной схемы — разные входные данные; определите, какие должны управлять рисунком.

Сохраняйте утверждённые варианты для светлых и тёмных поверхностей, если они есть. Инверсия всех цветов может изменить акцент, убрать намеренный контур или дать неутверждённый логотип. Поддержка темы — решение по окраске и интеграции после того, как сам рисунок уже правильный.

Отличайте предпочтение пользователя от темы страницы

Медиафункция CSS prefers-color-scheme определяет предпочтение светлой или тёмной схемы, передаваемое браузером или операционной системой. MDN описывает эти источники предпочтения. Собственный атрибут сайта data-theme="dark" остаётся лишь состоянием приложения, пока CSS или код не придаст ему действие.

Это объясняет частое расхождение: предпочтение браузера остаётся светлым, хотя посетитель выбирает тёмную поверхность внутри одного сайта. Логотип, следующий только предпочтению, может сохранить цвета для светлой поверхности на тёмной странице.

Свойство color-scheme — другой механизм. Оно сообщает браузеру, какие схемы поддерживает элемент, но не меняет автоматически каждую заданную автором заливку. Справочник свойства MDN отличает отрисовку под управлением браузера от стилей темы, которые автор всё ещё должен задать.

Не добавляйте три независимых механизма темы в надежде на их согласие. Определите предполагаемый источник управления до отладки видимого цвета.

Используйте селекторы страницы для встроенного логотипа с ручной темой

Встроенный SVG принадлежит документу страницы, поэтому целевые селекторы могут достигать его контуров. Сравнение встроенного SVG и изображения подробнее объясняет границу доступа.

Мы создали знак F с двумя ролями окраски: основной фигурой и отдельным круглым акцентом. Условные цвета — собственные примеры, а не фирменный стандарт.

.ink { fill: #183c35; }
.accent { fill: #c58868; }
[data-theme="dark"] .ink { fill: #f5f0e7; }
[data-theme="dark"] .accent { fill: #ffc34d; }

Применяйте правила к нужному встроенному рисунку, а не каждому контуру сайта. Логотип может содержать несколько намеренных окрасок, масок или градиентов. Руководство по изменению цвета SVG рассматривает проверку фактического источника окраски формы до изменения стилей.

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

Пусть внешний SVG управляет внутренними медиаправилами

Внешнее изображение — отдельный контекст стилей. Значение color: rebeccapurple на его HTML-элементе изображения не проникает внутрь и не перекрашивает произвольные контуры. Даже currentColor внутри файла SVG не становится автоматически цветом текста страницы-хоста.

Вместо этого файл может содержать собственные правила темы. Вот полный небольшой адаптивный SVG из нашего собственного теста:

<svg xmlns="http://www.w3.org/2000/svg" width="140" height="105"
  viewBox="0 0 140 105">
  <style>
    .ink { fill: #183c35; }
    .accent { fill: #c58868; }
    @media (prefers-color-scheme: dark) {
      .ink { fill: #f5f0e7; }
      .accent { fill: #ffc34d; }
    }
  </style>
  <path class="ink" d="M15 15H85V30H33V48H70V63H33V90H15Z"/>
  <circle class="accent" cx="102" cy="73" r="17"/>
</svg>

У встроенного изображения SVG запрос предпочтения может отражать используемую цветовую схему встраивающего элемента. Спецификация CSS Color Adjustment описывает эту связь. Это сигнал схемы, а не переход обычных CSS-селекторов страницы-хоста внутрь файла.

В нашем тестовом примере один хост явно задаёт color-scheme: light, другой — color-scheme: dark. Оба загружают одинаковый адаптивный файл. Их фон и цвет текста тоже заданы намеренно. Одно свойство не обеспечило бы эти полные стили.

Если тема управляется приложением, при таком подходе согласуйте схему хоста с выбранной темой. Тёмный фон при хосте, всё ещё объявляющем светлую схему, может передавать не тот сигнал, который вы предполагали.

Сравните три пути в реальном браузере

Наш исходный HTML-пример содержит два хоста с фиксированной схемой сверху. Ниже кнопка меняет ручную тему страницы для встроенного знака и внешнего изображения с фиксированными цветами. Этот внешний контрольный файл содержит такую же геометрию, но без медиаправила тёмной темы.

Браузер сообщал о светлом пользовательском предпочтении. Нажатие кнопки ручной темы меняло основную встроенную заливку с rgb(24, 60, 53) на rgb(245, 240, 231), а акцент — с rgb(197, 136, 104) на rgb(255, 195, 77). Индикатор предпочтения оставался светлым. Изменение окраски вызывали собственные селекторы страницы.

Два верхних изображения показывали светлую и тёмную окраску, выбранную соответствующими схемами хостов. Фиксированное внешнее изображение сохраняло зелёный и медный рисунок, хотя окружающая поверхность становилась тёмной, а вычисленный color его HTML-элемента изображения был фиолетовым.

Мы проверили вычисленные стили и фактическую отрисовку. Все три внешних изображения загрузились в естественном размере 140 × 105 и отображались в размере 280 × 210. Тест устанавливает поведение этих файлов в данной браузерной сессии. Это не испытание разных браузеров, почтовых клиентов, экспорта PDF или переключения операционной системы.

Испытывайте конечное применение, а не только отдельный файл

Откройте исходный SVG отдельно для проверки геометрии, затем изучите его в реальном встраивании страницы. Проверьте оба состояния темы, акцент, прозрачные отверстия и ближайший фон. Адаптивный логотип также может менять композицию при узком размере; руководство по адаптивной компоновке SVG-логотипа рассматривает это отдельное решение.

Внешнее изображение SVG имеет ограничения: MDN отмечает отключение скриптов и ограничение внешних ресурсов. Для показанного подхода держите нужные стили внутри ресурса и испытывайте настоящий контекст доставки. Результат браузера не обещает такого же поведения в почтовом рендерере или импортёре дизайна.

Для подходящего логотипа, доступного только как PNG или JPEG, процесс векторизации логотипа PerfectVector может восстановить контуры кандидата SVG. До подготовки вариантов темы сравните силуэт, надписи и мелкие зазоры с источником. Векторизация не назначает смысловые роли окрасок, не добавляет логику темы приложения и не утверждает инвертированный фирменный вариант. Наш тестовый знак создан непосредственно из векторных фигур.

Частые вопросы

Перекрасит ли тёмная страница внешний SVG-логотип автоматически? Нет. Внутренние правила окраски изображения всё ещё важны. Адаптивный внешний SVG может использовать собственный запрос предпочтения со схемой встраивающего элемента, а SVG с фиксированными цветами — сохранять исходные окраски.

Меняет ли ручной класс тёмной темы prefers-color-scheme? Сам по себе нет. Класс или data-атрибут — состояние приложения. В тесте ручная тема страницы менялась, а запрос пользовательского предпочтения браузера оставался светлым.

Нужно ли инвертировать все цвета SVG-логотипа для тёмной темы? Используйте утверждённые варианты, когда они есть. Проверьте основную окраску, акцент, контуры и отверстия на нужной поверхности, а не считайте, что общая инверсия сохраняет дизайн.

Источники

1. MDN: prefers-color-scheme — Источники пользовательского предпочтения и поведение встроенного SVG.
2. MDN: color-scheme — Поддержка схем и отдельная ответственность автора за стили.
3. CSS Color Adjustment: эффекты используемой цветовой схемы — Сигнал схемы, передаваемый встроенному содержимому.
4. MDN: SVG как изображение — Ограничения скриптов и ресурсов в контексте изображения.

Нужны редактируемые контуры из растрового логотипа? Создайте и проверьте кандидат SVG, сохраните принятый мастер, затем определите роли окрасок и испытайте реальную страницу с темой.