Terraglass — тема с матовым стеклом и продуманными светлыми и тёмными палитрами

Я только что опубликовал тему, над которой работал довольно долго. Теперь она доступна как open source под лицензией MIT: чистый, современный вид, построенный на полупрозрачных поверхностях с эффектом матового стекла (шапка, боковая панель, поиск) и специально разработанной светлой и тёмной цветовой схемой — без жёстко заданных цветов, всё привязано к CSS-переменным Discourse, поэтому она работает из коробки с автоматическим переключением между светлым и тёмным режимами.

Репозиторий: GitHub - terraboss/discourse-terraglass · GitHub

Возможности

  • Поверхности с эффектом матового стекла — шапка, боковая панель/меню-гамбургер и поле поиска/выпадающий список в шапке полупрозрачны с размытием фона; прозрачность и сила размытия настраиваются.
  • Отдельные, специально разработанные светлая и тёмная цветовые схемы (а не просто инверсия одной схемы), проверенные на соответствие контрастности WCAG AA для текста и элементов интерфейса.
  • Превью ссылок в стиле X/Twitter (onebox) с тонкой рамкой и скруглёнными углами.
  • Теги в форме флагов/стрелок в стиле «Etiquette».
  • Встроенные видео с фиксированным соотношением сторон 16:9 на всех устройствах.
  • Список тем с чередованием цветов строк (зебра) и ненавязчивым состоянием при наведении курсора.
  • Настраиваемое скругление углов для кнопок, карточек, модальных окон и полей ввода.
  • Доступная рамка фокуса, использующая цвет текста текущей схемы, поэтому она остаётся видимой как в светлом, так и в тёмном режиме.
  • Всё перечисленное выше — это настройки темы: отключайте или настраивайте то, что вам не нужно.

Установка

Настройка → Темы → Установить → Из git-репозитория:

https://github.com/terraboss/discourse-terraglass

Это также даст вам возможность «Проверить обновления» в один клик в будущем.

Известная проблема

backdrop-filter (размытие за боковой панелью, меню-гамбургером и панелью поиска) не отображается в каждой комбинации браузера/Discourse, хотя сама прозрачность работает надёжно и корректно деградирует без размытия. Я отслеживаю это здесь: backdrop-filter blur has no effect on .menu-panel — если кто-то сталкивался с этим или имеет идеи, буду рад их услышать.

Буду рад отзывам, готов принимать запросы на новые функции и сообщения об ошибках в репозитории.

2 лайка

Можете выложить несколько скриншотов? Звучит отлично