Привет, Хабр! Меня зовут Артём, и я ведущий дизайнер РЕД ОС. В сегодняшнем материале расскажу, как мы нашли решение, которое позволяет привести приложения РЕД ОС 8 к единому стилю в разных графических окружениях и добиться автоматизации этого процесса. Наш опыт пригодится разработчикам и дизайнерам интерфейсов, а также будет интересен тем, кто следит за развитием продукта.

Проблемы и вопросы

В последнее время мы активно развиваем дизайн в РЕД ОС 8. У нас было множество целей, но главной задачей стало приведение графических оболочек к единому фирменному стилю. Мы уделили внимание темам оформления различных графических окружений (DE), наборам иконок, курсорам, дизайну менеджеров авторизации, обоям для рабочего стола и многому другому. Теперь настало время для редизайна наших собственных приложений, которые стали выбиваться из фирменного стиля.

В РЕД ОС 8 пользователям доступны три основных графических окружения: KDE Plasma, MATE и GNOME, каждое из которых использует различные фреймворки — QT, GTK3 и GTK4 соответственно. Это привело к возникновению ключевых вопросов: "На каком из фреймворков стоит разрабатывать интерфейс приложений?" и "Как унифицировать дизайн интерфейсов приложений?".

Так возникла необходимость автоматизировать процесс оформления приложений:   

• Во-первых, это позволит избежать ручного прописывания стилей для каждого отдельного приложения. 

• Во-вторых, это существенно сокращает время на верстку и разработку. 

• В-третьих, хотелось реализовать  возможность применять тему оформления независимо от рабочего окружения, настраивая ее исключительно для конкретного приложения.

Решения

Различия фреймворков и унификация стиля

Стало очевидно, что необходимо привести к единому стилю не только оформление DE, но и оформление всех компонентов, начиная от стиля окон и заканчивая мелкими элементами, такими как кнопки, чекбоксы и другие.

Настройка дизайна через темы оформления

Настройка дизайна осуществляется через темы оформления рабочей среды. В KDE Plasma это реализовано проще благодаря использованию движка Plasma-Breeze, который автоматически обрабатывает все компоненты. Дополнительная настройка включает цветовые схемы, представленные в виде конфигурационных файлов с RGB-значениями.

С MATE и GNOME ситуация сложнее, так как темы оформления разделены на множество частей, каждая из которых отвечает за свои настройки. Нас интересуют только некоторые из них, такие как темы GTK3 и GTK4, которые основаны на CSS-стилях. Эти стили требуют отдельной настройки для каждого компонента. Кроме того, существуют отдельные элементы интерфейса, такие как чекбоксы, представленные в виде изображений, что позволяет их гибко кастомизировать.

Процесс создания унифицированных тем

Процесс начинается с использования готовой темы KDE, основанной на стиле Plasma-Breeze и цветовой схеме. Каждый компонент переносится в дизайн-библиотеку, что позволяет создавать макеты быстрее, используя унифицированные элементы, идентичные десктопным.

Затем подготавливается тема оформления для GTK: стандартные компоненты адаптируются под стиль библиотеки QT. После подготовки всех компонентов они переносятся в тему оформления GTK, благодаря гибкой кастомизации с помощью CSS.

Универсальное решение для фреймворка Qt

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

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

Существуют инструменты настройки для приложений Qt — утилиты qt5ct и qt6ct. Они позволяют пользователям настраивать внешний вид приложений Qt, включая темы, шрифты и значки, особенно в средах рабочего стола, отличных от KDE Plasma, где интеграция с Qt часто отсутствует.

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

На скриншотах показано одно и то же приложение до и после применения переменного окружения qt5ct:

Решение:  мы разработали небольшой скрипт. Он использует gsettings API для проверки выбранной темы оформления рабочего стола и, в зависимости от нее, автоматически настраивает цветовую схему наших приложений.

Осталось решить, когда именно должен запускаться этот скрипт. Учитывая, что у каждого пользователя могут быть свои настройки оформления, мы создали пользовательский сервис systemd. Чтобы сервис не работал постоянно, мы реализовали его вызов через триггер. Этот триггер настроен на systemd path и срабатывает при изменении темы оформления графического окружения.

Вывод

В ходе работы над дизайном в РЕД ОС 8 мы столкнулись с задачами унификации стиля приложений в различных графических окружениях. Использование QT5, GTK3 и GTK4 потребовало универсальных решений для сохранения единого стиля и упрощения разработки.

С помощью qt5ct мы создали унифицированный дизайн, автоматически применяемый к приложениям, что сократило время на верстку и упростило дизайн-ревью.

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

Таким образом, использование универсальных инструментов упростило разработку и обновления дизайна.