Использование SVG-иконок в документации по помощи для визуальной совместимости с тёмной темой

Общее
1

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

но использование загруженных SVG-файлов напрямую от Font Awesome тоже не помогло, а ссылка на GitHub с иконками из того обсуждения не полностью соответствовала текущему интерфейсу Discourse. К счастью, я наткнулся на:

Это помогло мне понять, что да, в загруженных файлах Font Awesome отсутствуют атрибуты width и height. Я нашёл иконки v5 на Font Awesome и отредактировал соответствующие SVG-файлы. Высота в 17 пикселей хорошо подошла для кнопок действий в постах (14 пикселей для кнопок редактора), а ширина выбиралась исходя из значения viewBox; калькулятор соотношения сторон иногда был очень полезен.

Помимо необходимости добавить width и height, мне также нужно было добавить атрибут fill к элементу path. Я выбрал fill="currentColor" вместо статического цвета, так как считал цвет окружающего текста отличным значением по умолчанию. Однако я всё же хотел, чтобы иконки соответствовали цветам кнопок интерфейса, а не окружающему тексту, и обнаружил, что могу сохранить синтаксис загрузки файлов ![alt](file) и при этом нацелиться на эти конкретные SVG, обернув их в HTML-тег span (что обычные пользователи вряд ли сделают) и добавив в CSS следующий код:

p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img { 
    filter: invert(85%) sepia(14%) saturate(0%) hue-rotate(169deg) brightness(85%) contrast(83%); 
}

@media (prefers-color-scheme: dark) {
    p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img { 
        filter: invert(51%) sepia(0%) saturate(484%) hue-rotate(216deg) brightness(102%) contrast(88%);
    }
}

Этот конкретный CSS имитирует значение var(--primary-low-mid), когда основной цвет установлен в чёрный для нашей светлой темы и в #eee для нашей тёмной темы, а также учитывает существующий обёртывающий span в панели предпросмотра редактора. Вы можете использовать генератор CSS-фильтров, чтобы понять, как изменить цвет SVG при таком использовании. (В зависимости от ваших цветовых схем, возможно, стоит проверить, как это выглядит, если у пользователя ещё не сохранена опция автоматического переключения тёмной темы в настройках, но его устройство находится в тёмном режиме, так как может возникнуть промежуточное состояние при использовании @media (prefers-color-scheme: dark) в вашем CSS.)

Надеюсь, этот процесс поиска поможет кому-то ещё! Если вы хотите скачать и использовать/отредактировать иконки, которые я создал для этой цели (поскольку это заняло некоторое время), вы можете найти их на страницах руководства, которые я уже завершил: действия и реакции в постах, базовое оформление постов, расширенное оформление постов и конструктор опросов. (Я заменил только отдельные иконки и оставил скриншоты со светлой темой для контекстных изображений, которые представляют собой смесь изображений из документации помощи здесь, на meta, и скриншотов, сделанных мной для нашего конкретного сайта.)

7 лайков