如何定制我的 GTK 主题?

如何定制我的 GTK 主题?

我想创建一个自定义主题。实际上,这将是经过修改的 Yaru 主题。

我可以更改标题栏的主颜色,但无法更改其按钮的颜色。

原始 Yaru 主题:

原始 Yaru 主题标题栏

修改主题:

修改了 Yaru 主题标题栏

我想将按钮的灰色改为其他颜色。我该怎么做?

我的操作系统是带有 GNOME 3.36 的 Ubuntu 20.04 LTS。

答案1

您可以下载并自定义Github 上的 Yaru 主题

这里是帮助您入门的说明。

安装必备包以克隆存储库并构建源文件:

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上面路径中的文件。

答案2

我曾经通过编辑目录中的 css 文件来修改主题/usr/share/themes/<theme name>。但是,这是一种反复试验的方法,因为不清楚哪个 CSS 选择器对应于屏幕上的实际元素。

我建议先创建主题的副本,因为如果您编辑原始主题,主题更新时您的更改可能会被覆盖。对于 Yaru 主题,您无论如何都必须这样做,因为它以打包形式提供,如果您想修改它,则需要解压它。

的和子目录gtk.gresource中都有一个文件。创建目录的副本(例如名为)后,您必须解压这两个文件。输入gtk-3.0gtk-3.20/usr/share/themes/Yaru/usr/share/themes/My Theme

gresource list gtk.gresource

列出文件的内容。它基本上包含两个文件gtk.cssgtk-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,因此您会很容易看到差异),然后再返回到“我的主题”。

答案3

  1. 您可以通过在文本编辑器中打开 gtk.css 并向下滚动到此部分来更改 Ubuntu 22.04 主题标题栏按钮:

     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);将单词“white”更改为您选择的颜色。更改 # 后的数字或数字以更改颜色。您可以谷歌“颜色选择器”来选择颜色并获取代码或编写代码来显示颜色。

  3. 保存 gtk.css。

  4. 要应用主题,您可以更改为其他主题,然后再返回 Yaru。现在,打开文件或再次显示文本编辑器后,您将在自定义中看到标题栏按钮的颜色。

在此处输入图片描述

相关内容