更改活动和应用程序概述屏幕以及对话框后面的深色叠加背景 (Gnome 3)

Lev*_*nte 5 themes theme-development gnome-shell

在 Ubuntu 20.04.1 LTS上

\n

根据“设置”应用程序的“关于”选项卡的 Gnome 版本:3.36.8

\n
gnome-shell --version\nGNOME Shell 3.36.4\n
Run Code Online (Sandbox Code Playgroud)\n

主题:Yaru(默认;不是“亮”,也不是“暗”)

\n

当我按超级键或激活热角时,会出现“概述”屏幕,我可以在其中搜索应用程序、设置、文档等:

\n

Gnome dash 的屏幕截图

\n

问题/挑战:

\n

我发现与我的桌面通常看起来相比,这个覆盖层太暗了;每次我不得不使用它时,我发现它对体验有干扰性的影响,而且对我的眼睛来说调整是一项很累人的练习。

\n

我想让这个覆盖层变得更亮/更亮。

\n

我已经查看了设置org.gnome.shell.extensions.dash-to-dock,但没有找到任何内容。(我没有在 Tweaks 中启用“Ubuntu Dock”附加 Gnome shell 扩展。)

\n

然后我将 Yaru 主题从 复制/usr/share/themes/~/.themes/,并使用 Gnome-Tweaks 激活它。

\n

~/.themes/My-Yaru/gtk-3.20/我已经导出了真实内容并覆盖了文件gtk.css用以下内容覆盖了文件

\n
gresource extract gtk.gresource /com/ubuntu/themes/Yaru/3.20/gtk.css > gtk.css\n
Run Code Online (Sandbox Code Playgroud)\n

现在,它不再是原来的单行 import 语句,而是包含 12637 行 CSS。

\n

我确实尝试识别破折号覆盖层的 CSS 选择器,但我没有找到任何东西。然后我一直在寻找径向渐变的声明(因为这个覆盖层似乎有一个径向渐变),但我发现的似乎与这个覆盖层无关。

\n

我现在能做什么?我走在正确的轨道上吗?

\n

如果是,我如何启用 Gnome 调试模式,使 \xe2\x80\x94 与 Web 浏览器的开发人员工具 \xe2\x80\x94 类似,以交互方式显示此覆盖层的 CSS 选择器?

\n

如果这不是正确的方向,那么我怎样才能最好地实现目标 \xe2\x80\x94 而无需安装完全不同的主题?

\n

Lev*_*nte 5

答案兼容:

\n

Ubuntu 20.04.1,
\ngnome-shell 版本:3.36.4
\n显示服务器:X.Org Server

\n

带有径向渐变的深色背景来自 gnome shell UI 的 lightbox.js。

\n

https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/gnome-3-36/js/ui/lightbox.js

\n

似乎有3种方法:

\n
    \n
  • 通过参数(?)
  • \n
  • 通过 js 代码覆盖,利用“gresource 覆盖”
  • \n
  • 通过 css,通过创建自定义 gnome-shell 主题
  • \n
\n

通过提供给 gnome-shell UI\'s lightbox.js 的参数

\n

我对此了解不多。我没有找到任何相关内容dconf-editor,而且三个有趣的参数中的两个似乎对我来说是硬编码的。所以我去找了代码。

\n

通过覆盖 gnome-shell UI 的 lightbox.js 代码

\n

更改 lighbox.js 行为不仅会影响活动和应用程序概述屏幕,还会影响其他对话框,例如:运行命令需要身份验证关闭电源等。

\n

在 Ubuntu 20.04 上,该文件通常打包在/usr/lib/gnome-shell/libgnome-shell.so.

\n

要覆盖它,需要提取它的副本,并要求 Gnome 使用此副本。

\n

创建此目录结构,然后cd在终端中:

\n
~/.gnome-shell-custom-overlays/ui/\n
Run Code Online (Sandbox Code Playgroud)\n
~/.gnome-shell-custom-overlays/ui/\n
Run Code Online (Sandbox Code Playgroud)\n

在此目录中,执行以下操作:

\n
# You should be here:\n~/.gnome-shell-custom-overlays/ui$\n
Run Code Online (Sandbox Code Playgroud)\n

编辑 lightbox.js 文件;更改顶部附近的三个变量,如下所示:

\n
# Make a copy of the resource:\ncp /usr/lib/gnome-shell/libgnome-shell.so .\n\n# To see all of its contents:\ngresource list libgnome-shell.so\n\n# To obtain lightbox.js:\ngresource extract libgnome-shell.so /org/gnome/shell/ui/lightbox.js > lightbox.js\n\n# If the extraction was successful, our copy of the resource can\n# (probably should?) be removed.\nrm libgnome-shell.so\n
Run Code Online (Sandbox Code Playgroud)\n

现在我们需要告诉 Gnome 我们修改的文件。将以下行放入~/.profile

\n
// Old:\n//var DEFAULT_FADE_FACTOR = 0.4;\n//var VIGNETTE_BRIGHTNESS = 0.5;\n//var VIGNETTE_SHARPNESS = 0.7;\n\n// New:\nvar DEFAULT_FADE_FACTOR = 0.1;\nvar VIGNETTE_BRIGHTNESS = 0.8;\nvar VIGNETTE_SHARPNESS = 0.2;\n
Run Code Online (Sandbox Code Playgroud)\n

这里的术语“覆盖”不是指灯箱覆盖;而是指灯箱覆盖。相反,它表明了 Gnome/GTK 资源覆盖功能的工作原理。

\n

重要提示:在执行所有这些操作之前,我已经libgtk-3-dev在我的系统上安装了该软件包。它用于开发/调试,就像资源覆盖功能似乎是如此。因此,现在我无法确定是否尊重G_RESOURCE_OVERLAYS环境变量取决于此包的存在与否...以防万一准备好安装它...

\n

无论如何:要使更改生效,请注销并重新登录。

\n

进一步调整

\n

要查看进一步调整灯箱参数的效果,需要在每次编辑后重新加载 Gnome shell。可以r通过“运行命令”对话框(通过 Alt+F2 显示)发出命令来完成。

\n

有趣的是:根据我的经验,当保存其中存在语法错误的 lightbox.js 文件时,“运行命令”对话框似乎不再出现。但它可能“在那里”,只是不“可见”。在这种情况下,请继续操作:修复语法并保存文件,按 Alt+F2,然后按r,然后按 Enter。

\n

本答案讨论了有关资源覆盖功能对系统稳定性的潜在影响的更多重要考虑因素

\n

参考文献/文献:

\n\n

通过 CSS(gnome-shell 自定义主题)

\n

如果您成功地覆盖了 lightbox.js,那么这部分可以提供更多的调整来进一步完善体验。

\n

但是,如果您没有覆盖 lightbox.js,那么这部分可以提供额外的解决方法,但对于活动和应用程序概述屏幕的用处有限。

\n

(另外,在我把手放在上面的 javascript 覆盖之前,以下是我对这个问题的原始答案。)

\n

使用自定义 Gnome shell 主题

\n

gnome-shell-extensions为此,需要Gnome Tweaks 应用程序以及 Gnome shell 扩展“用户主题”(软件包的一部分,可通过 apt install 获得)。

\n
sudo apt install gnome-tweaks gnome-shell-extensions\n
Run Code Online (Sandbox Code Playgroud)\n

打开 Tweaks 应用程序,然后在“扩展”选项卡上启用“用户主题”扩展。

\n

创建自定义 Gnome shell 主题

\n

这部分未被证明是最好的方法;只是我发现了这个方法。

\n

创建以下目录结构:

\n
~/.themes/my-gnome-shell-theme/gnome-shell/\n
Run Code Online (Sandbox Code Playgroud)\n

复制此文件(默认 Yaru 主题的 shell 主题实现):

\n
/usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource\n
Run Code Online (Sandbox Code Playgroud)\n

进入这个新创建的目录,所以你最终会得到这样的结果:

\n
~/.themes/my-gnome-shell-theme/gnome-shell/gnome-shell-theme.gresource\n
Run Code Online (Sandbox Code Playgroud)\n

在终端中打开该目录,gresource list gnome-shell-theme.gresource会显示这个新复制的文件的内容。

\n

定制脚本帮助提取所有内容。

\n

脚本的内容可能是这样的,或者更好(我不是 bash 脚本专家)(我\xc2\xa0已经知道人们不再喜欢反引号了):

\n
export G_RESOURCE_OVERLAYS="/org/gnome/shell=$HOME/.gnome-shell-custom-overlays"\n
Run Code Online (Sandbox Code Playgroud)\n

注意:此自定义脚本不会重现 .gresource 文件中规定的目录结构;相反,它以扁平方式将文件放置在目标(当前)目录中。但是,它会打印遇到的每个资源的定义,以及其最初预期/定义的路径。虽然这似乎并不总是必要的,但在某些情况下(例如,当遇到损坏的图标或小部件背景时),可能值得考虑根据定义建议将文件重新排列到目录结构中。请注意,我将原始 .gresource 文件留在了目录中。

\n

替代提取器脚本:通过在此站点或互联网上的其他地方搜索字符串“do gresource extract”可以找到更多此类脚本。

\n

运行提取器脚本,然后快速保护原始文件的备份,

\n
cp gnome-shell.css gnome-shell.css.bak\n
Run Code Online (Sandbox Code Playgroud)\n

提取的gnome-shell.css文件已准备好进行编辑。

\n

gnome-shell 开发者工具

\n

它的名字叫“镜子”。可以通过运行命令对话框(通过 Alt+F2 显示)发出lg命令来激活它。

\n

CSS 调整

\n

以下更改最适合我的单调桌面背景颜色;但通过一些颜色调整,它可能对任何情况都有用。

\n

CSS 的工作方式是,在文件末尾所做的定义可以覆盖同一文件中先前编写的定义。这就是为什么没有必要将编辑分散到整个文件;只需在最后添加正确的内容即可完成工作。这就是我附加的内容gnome-shell.css

\n
sudo apt install gnome-tweaks gnome-shell-extensions\n
Run Code Online (Sandbox Code Playgroud)\n

启用自定义主题

\n

在“调整”应用程序的“外观”选项卡的“主题”部分中,有一个标记为“Shell”的字段。新的自定义主题应该在选择的小部件中可用。请记住,要激活此小部件,需要启用“用户主题”Gnome shell 扩展。

\n

使CSS修改生效

\n

方法 1:r通过运行命令对话框(通过 Alt+F2 显示)发出命令来重新加载 shell;它还应该接受新的 CSS 更改。

\n

方法 2:与方法 1 相比,在默认和自定义 shell 主题之间来回切换似乎更加流畅和优雅。主题切换可以在 Tweaks 应用程序的 UI 上实现,也可以通过gsettingscli 实现,如下所示如下:

\n
~/.themes/my-gnome-shell-theme/gnome-shell/\n
Run Code Online (Sandbox Code Playgroud)\n

从混乱的自定义主题中恢复

\n

如果需要,可以通过gsettings set在虚拟控制台(例如 Ctrl+Alt+F3)中执行上述命令来切换回默认主题(无需启动图形会话)。

\n