Как мне настроить тему GTK?

Я хотел бы создать пользовательскую тему. На самом деле, это будет модифицированная тема Yaru.

Я мог изменить основной цвет панели заголовка, но не мог изменить цвет ее кнопок.

Оригинальная тема Яру:

Модифицированная тема:

Я хотел бы изменить серый цвет кнопок на другой цвет. Как я могу это сделать?

Моя операционная система — Ubuntu 20.04 LTS с GNOME 3.36.

3 ответа

Вы можете скачать и настроить тему Yaru с Gitub .

Вот инструкции для начала.

Установите необходимые пакеты для клонирования репозитория и сборки исходных файлов:

      apt install libgtk-3-dev git meson sassc

Загрузите репозиторий с GitHub, а затем соберите и установите тему:

      # You can get the master branch using:
# git clone https://github.com/ubuntu/yaru.git

# You can get the branch for 20.04 using:
git clone --branch focal https://github.com/ubuntu/yaru.git
cd yaru

# Initialize build system (only required once per repo)
meson build
cd build

# Build and install
sudo ninja install

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

      .../yaru/gtk/src
.../yaru/gtk/src/default/gtk-3.20
.../yaru/gtk/src/default/gtk-3.0

.../yaru/gnome-shell/src
.../yaru/gnome-shell/src/gnome-shell-sass

Я не смогу дать вам конкретные инструкции, так как это сложная тема, и все зависит от того, что вы хотите изменить.

Тем не менее, обязательно взгляните на _ubuntu-colors.scssфайлы по указанным выше путям, если вы просто заинтересованы в изменении некоторых основных цветов.

  1. Вы можете изменить кнопки панели заголовка темы Ubuntu 22.04, открыв gtk.css в текстовом редакторе и прокрутив вниз до этой части:

             button.titlebutton, notebook > header > tabs > arrow,
     button {
       min-height: 24px;
       min-width: 16px;
       padding: 4px 9px;
       border: 1px solid;
       border-radius: 6px;
       transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
       color: #3D3D3D;
       outline-color: rgba(239, 134, 97, 0.7);
       border-color: #c7c7c7;
       background-image: image(white);
       text-shadow: 0 1px rgba(255, 255, 255, 0.769231);
       -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); }
    
  2. В линии:background-image: image(white);измените слово «белый» на цвет по вашему выбору. Измените числа или цифры после #, чтобы изменить цвет. Вы можете использовать Google «выбор цвета», чтобы выбрать цвет и получить код, или написать код, чтобы показать цвет.

  3. Сохраните gtk.css.

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

Я изменил тему, просто отредактировав файлы css в /usr/share/themes/<theme name>каталог. Однако это довольно метод проб и ошибок, так как не очень ясно, какой селектор CSS соответствует какому фактическому элементу на экране.

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

В обоих есть файл gtk-3.0а также gtk-3.20подкаталоги /usr/share/themes/Yaru. После создания копии каталога (скажем, под именем ) вам необходимо распаковать оба этих файла. Тип

      gresource list gtk.gresource

чтобы просмотреть содержимое файла. Он в основном содержит два файла и gtk-dark.css(который должен заменить файлы, уже присутствующие в каталоге) и assetsподкаталог с кучей файлов. Вы должны извлечь все (для этого вы можете написать простой скрипт, основанный на выводе приведенной выше команды). Чтобы извлечь один файл (например, gtk.css) сделать следующее:

      gresource extract gtk.gresource /com/ubuntu/themes/Yaru/3.0/gtk.css >gtk.css

После извлечения всего удалите gtk.gresourceфайл. Также отредактируйте index.themeфайл в /usr/share/themes/My Theme, так как он содержит название темы).

Чтобы увидеть эффект от ваших изменений, вам нужно изменить свою тему с «Моя тема» на что-то другое (может быть стандартная Yaru, таким образом вы легко увидите различия), а затем обратно на «Моя тема».

Другие вопросы по тегам