初探高度自定义 GNOME 系应用

这里以 Nautilus 为例

一. 启动 GTK Inspector

在终端运行 GTK_DEBUG=interactive nautilus
然后我们可以看到有这样一个窗口出现

二. 找寻对象

选择到对象之后，查看其 CSS 节点，注意节点之间的继承关系，我们可以在样式类别栏中找到对应的样式，并在右侧找到 CSS 属性

三. 临时修改 CSS 样式

3.1 透明背景

我们在上一步可以看到对应的样式，那么如何修改它呢
很简单，GTK Inspector 第三页就可以实时修改并应用 CSS 样式

根据上图
window.background.nautilus-window 是控制 Nautilus 全局背景的样式

我们修改一下

按下暂停键取消暂停（默认会暂停）
然后就可以看到这个样式已经生效了

你会注意到左侧的透明程度比较低（事实上这里会叠加两个0.9的不透明度，实际不透明度为0.99

不透明度计算方法如下
假定有两个通道 alpha1 alpha2 不透明度分别为 0.8 0.9
其叠加效果为 1 - (1 - 0.8) * (1 - 0.9)

还有就是标题栏的背景样式也不会改变

如何解决呢 分析这里的样式，我们添加

就解决了，但是这里中央还会出现一道竖线

现在就和最上面那张图的效果一样了

3.2 渐变背景/图片背景/模糊背景

这里是很简单的CSS知识，发挥你的创造力吧

模糊背景做不到

GTK+ 的 CSS 引擎并不支持所有的 CSS 属性，例如 backdrop-filter
你可以考虑使用一些如 KWin 或 Compiz 这样的窗口管理器

四. 写入 gtk.css

GTK 应用会读取

~/.config/gtk-3.0/gtk.css
~/.config/gtk-4.0/gtk.css

把你的 CSS 配置放进去就好了
重启即可生效

五. 我的 define-color 配置

抄的。