初探高度自定义 GNOME 系应用

7 个月前(已编辑)
1
这篇文章上次修改于 7 个月前,可能部分内容已经不适用,如有疑问可询问作者。

这里以 Nautilus 为例


Nautilus
怎么样 效果还可以吧

一. 启动 GTK Inspector

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


GTK Inspector

如果没有出现,或是想要关闭了之后再召唤出来,尝试组合键 Ctrl + Shift + i
这时候左上角有选择对象的按钮,我们可以很方便地用它来选择要修改 css 的对象

二. 找寻对象

选择到对象之后,查看其 CSS 节点,注意节点之间的继承关系,我们可以在样式类别栏中找到对应的样式,并在右侧找到 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)


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

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

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


box shadow
经过分析,这里是sidebar-panebox-shadow
我们稍作改动

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

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 配置

抄的。

评论区加载中...