Отображение иконок в письмах на почте в тёмной теме (dark mode)
Интересуют лучшие практики по применению иконок в тёмной теме на почте.
В web-разработке всё весьма очевидно, заранее знаешь где какая иконка будет и каким будет фон. Как в тёмной теме на stack overflow, в логотипе идёт инверсия и повышение яркости, элегантно, зависит от настроек на сайте.
С почтой немного иначе.
В Яндекс почте на мобильном клиенте, например, фон письма идёт в цвете #292d36, текст в письме светло-серый, всё это вне зависимости от того каким текст видит отправитель, если только принудительно не красит его в другие цвета. Какой фон будет в других клиентах не понятно, или есть какой-то стандарт?
Вопрос
Есть ли возможность делать адаптивный SVG?
Т.е. менять цвет текста или элементов, если за прозрачным фоном будет тёмный фон? Чтобы текст был изначально тёмным, но инвертировался в зависимости от того, на сколько тёмным будет фон за SVG. Нашёл такой схожий вопрос с хорошим ключевым словом XOR, но ответ там не совсем понятен, и по ответу, вроде бы, такой финт ушами не возможен.
В BIMI Inspector есть переключатель в dark mode, чтобы посмотреть отображение логотипа, но меняет он как-то режим поддерживаемый SVG, или просто подставляет фон?
На текущий момент нашёл эту статью с вариантами решения такими как переключатель режима для пользователя прямо в письме, сегментация пользователей на тёмных и светлых, но это актуально для рассылок, а не обычных писем. И там же вышел на @media.
Последний вариант выглядит как неплохое решение, даже тут в code snippet работает и инвертирует цвета в моём случае, т.к. использую тёмную тему в настройках системы:
@media (prefers-color-scheme: dark) {
svg { filter: invert(1) }
body { background-color: #000 }
}
<svg viewBox="0 -15 175 20" xmlns="http://www.w3.org/2000/svg">
<text>Stackoverflow на русском</text>
</svg>
Но насколько такой подход будет failsafe? Понятно, что если prefers-color-scheme не сработает, будет просто тёмная иконка под светлую тему, но он ведь может и не сработать при тёмном фоне?
Безопаснее всего, конечно же, сделать иконку в нейтрально серых оттенках или в цвете. Или же предусмотреть белый фон внутри иконки в самом SVG, чтобы она была видна на тёмном фоне, а при белом этот фон был просто не заметен. Или использовать фильтры с тенью, которые будут видны на светлом фоне, и с подсветкой, которая будет видная на тёмном фоне, с точки зрения дизайна решаемо.
Но интересует, всё же, техническая часть по @media, либо же инверсия цвета отталкиваясь от фона за SVG, не дизайнерские уловки, а техническая адаптивность, если это возможно.