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

Настройка Тема
1

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

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

Скриншоты

Светлая схема, запущенная на Meta. Меню уведомлений, через которое просматривается страница:

Notifications menu
Notifications menu2200×1150 428 KB

Выпадающий список поиска:

Search dropdown
Search dropdown2200×1150 516 KB

Диалоги — страница позади размывается, а затемняется:

Keyboard shortcuts dialog
Keyboard shortcuts dialog2200×1150 262 KB

Flag dialog
Flag dialog2200×1150 252 KB

Возможности

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

Установка

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

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

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

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

P.S.: Скриншоты сделаны на Meta :discourse2: с темой, применённой локально в моём браузере через консоль разработчика :goodnews:

4 лайка
Backdrop-filter (blur) has no effect on .menu-panel, even though background transparency works
2

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

3 лайка
3

Может быть, позже. Просто попробуйте сами! :slight_smile:

1 лайк
4

Возможно, вы хотите присоединиться к @theme_authors, чтобы иметь возможность публиковать сообщения в категории Customization > Theme?

4 лайка
6

Большое спасибо за подсказку, @NateDhaliwal! Я не знал о группе theme_authors, поэтому я в неё вступлю, и тогда мы сможем переместить тему в раздел «Темы».

2 лайка
7

Я попробовал, но не заметил никаких изменений. Я нажал кнопку «Примерить тему».

8

Например, загляните на https://riben.talk/ (спасибо @kddkd).

Вы также можете связаться с ним через https://discourse.theme-creator.io с минимальными ограничениями (я бы рекомендовал разместить поле поиска по центру шапки).

P.S.! После применения новой темы не забудьте обновить сайт в вашем браузере.

IMG_0021
IMG_00211320×2868 506 KB

Обновление: скриншоты от @Heliosurge теперь в первом сообщении, спасибо за напоминание! Дайте знать, что вы думаете, если попробуете.

4 лайка
9

Terraglass 1.2.0 — стеклянные меню и диалоги

Новое: стеклянные меню и диалоги

Эффект матового стекла теперь распространяется не только на шапку, боковую панель и поиск:

  • Выпадающие меню стали полупрозрачными с мягким размытием, включая подсветку при наведении и выделении
  • Диалоги получили аналогичное оформление, а фон за ними теперь размывается, а затемняется
  • Тонкая кромка и едва заметный блик по верхнему краю создают эффект стекла
  • Прозрачность и размытие можно настроить отдельно для меню и диалогов

Включено по умолчанию. Если вам нравится предыдущий вид, отключите glass_surfaces в настройках темы.

Terraglass 1.1.0 — опциональная подсветка шапки и важное исправление ошибки

Новое: подсветка шапки

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

  • auto следует цвету акцента активного цветового схемы, поэтому меняется вместе с переключением светлого/темного режима
  • custom позволяет выбрать любой цвет (hex, именованный цвет, rgb…)
  • Настраиваемая интенсивность, от едва заметного намека до сплошной полосы
  • Эффект прозрачности и размытия матового стекла сохраняется под этим слоем

Отключено по умолчанию — включите его с помощью header_tint в настройках темы.

Исправлено: переключатели «вкл/выкл» не работали

В версии 1.0.x отключение функции в настройках темы не приводило к её фактическому отключению. Теперь все переключатели работают как задумано.

4 лайка