更改 Activity- 和 Apps-overview 屏幕以及对话框后面的深色叠加背景 (Gnome 3)

回答兼容：

Ubuntu 20.04.1，
gnome-shell 版本：3.36.4
显示服务器：X.Org Server

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

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

似乎有3种方法：

• 通过参数（？）
• 通过 js 代码覆盖，利用“gresource 覆盖”
• 通过 css，通过创建自定义 gnome-shell 主题

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

我对此知之甚少。我没有在 中找到任何相关的东西dconf-editor，另外三个有趣的参数中有两个似乎是硬编码的。所以我去找了代码。

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

更改 lighbox.js 行为不仅会影响 Activity- 和 Apps-overview 屏幕，还会影响其他对话框，例如：Run a Command、Authentication required、Power off等。

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

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

创建此目录结构，并cd在终端中：

~/.gnome-shell-custom-overlays/ui/

# You should be here:
~/.gnome-shell-custom-overlays/ui$

在此目录中，执行以下操作：

# Make a copy of the resource:
cp /usr/lib/gnome-shell/libgnome-shell.so .

# To see all of its contents:
gresource list libgnome-shell.so

# To obtain lightbox.js:
gresource extract libgnome-shell.so /org/gnome/shell/ui/lightbox.js > lightbox.js

# If the extraction was successful, our copy of the resource can
# (probably should?) be removed.
rm libgnome-shell.so

编辑 lightbox.js 文件；改变靠近顶部的三个变量，如下：

// Old:
//var DEFAULT_FADE_FACTOR = 0.4;
//var VIGNETTE_BRIGHTNESS = 0.5;
//var VIGNETTE_SHARPNESS = 0.7;

// New:
var DEFAULT_FADE_FACTOR = 0.1;
var VIGNETTE_BRIGHTNESS = 0.8;
var VIGNETTE_SHARPNESS = 0.2;

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

export G_RESOURCE_OVERLAYS="/org/gnome/shell=$HOME/.gnome-shell-custom-overlays"

这里的“叠加层”不是指灯箱叠加层；相反，它暗示了这个 Gnome/GTK 资源覆盖特性是如何工作的。

重要提示：在我做这一切之前，我已经libgtk-3-dev在我的系统上安装了这个包。它用于开发/调试，就像资源覆盖功能似乎如此。因此，现在我无法确定是否尊重G_RESOURCE_OVERLAYS环境变量取决于这个包的存在......以防万一准备安装它......

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

进一步调整

要查看进一步调整灯箱参数的效果，每次编辑后重新加载 Gnome shell 是必要的。可以通过运行命令对话框（由 Alt+F2 显示）发出r命令来完成。

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

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

参考文献/文献：

• 归功于超级用户 Q/A
• Gnome 开发者参考
• Arch wiki 上的 Gnome 食谱

通过 CSS（gnome-shell 自定义主题）

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

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

（此外，以下是我对问题的原始答案，在我可以将手放在上面的 javascript 覆盖之前。）

使用自定义 Gnome shell 主题

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

sudo apt install gnome-tweaks gnome-shell-extensions

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

创建自定义 Gnome shell 主题

这部分没有被证明是最好的方法；只是我找到了这种方式。

创建以下目录结构：

~/.themes/my-gnome-shell-theme/gnome-shell/

复制这个文件（默认 Yaru 主题的 shell 主题实现）：

/usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource

进入这个新创建的目录，所以你最终得到这个：

~/.themes/my-gnome-shell-theme/gnome-shell/gnome-shell-theme.gresource

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

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

脚本的内容可能是这样的，或者更好（我不是 bash 脚本专家）（我已经知道人们不再喜欢反引号了）：

#!/bin/bash

currentdir=$(pwd);

# For regular themes:
# gresource_name="gtk.gresource"
# For shell themes:
gresource_name="gnome-shell-theme.gresource"

for resource in `gresource list ${currentdir}/${gresource_name}`;
do
    echo $resource
    filename=`basename ${resource}`
    gresource extract $currentdir/$gresource_name $resource > $currentdir/$filename
done

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

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

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

cp gnome-shell.css gnome-shell.css.bak

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

gnome-shell 开发者工具

它被称为窥镜。它可以通过运行命令对话框（由 Alt+F2 显示）发出lg命令来激活。

CSS 调整

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

CSS 以这样的方式工作，即在文件末尾进行的定义可以覆盖在同一文件中早先编写的定义。这就是为什么不需要在整个文件中分散编辑的原因；只需在最后添加正确的东西就可以了。这就是我附加的内容gnome-shell.css：

/* Activity-Overview-related */

/* Covers up the dark lightbox overlay with a lighter semi-opaque tone.
   This may be needed only if lightbox.js is not overridden. */

/*
#overview {
    background-color: rgba(210,202,194,0.6);
}
*/

.search-section-content {
    /* This has text on it; for eligibility, keep it more opaque. */
    background-color: rgba(29, 29, 29, 0.5);
}
.workspace-thumbnails {
    /* Plain background area, may be pretty transparent. */
    background-color: rgba(29, 29, 29, 0.25);
}

/* A less harsh workspace-switcher popup. */

.workspace-switcher-container {
    background-color: rgba(100, 96, 92, 0.45);
    border-radius: 10px;
}
.ws-switcher-active-up,
.ws-switcher-active-down,
.ws-switcher-active-left,
.ws-switcher-active-right {
    background-color: rgba(215, 86, 41, 0.8);
    border: 1px solid #cc4414;
    border-radius: 5px;
    color: #ffffff; }

/* Misc. */

.switcher-list, .osd-window, .resize-popup {
    /* A bit softer Alt+Tab popup.
     * This has text on it; for eligibility, keep it more opaque. */
    background-color: rgba(100, 96, 92, 0.85);
}

启用自定义主题

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

使 CSS 修改生效

r方法一：通过运行命令对话框发出命令（由 Alt+F2 显示）重新加载 shell；它还应该接受新的 CSS 更改。

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

# For resetting to default, the argument can apparently be either
# an empty string: '' or: default.
gsettings set org.gnome.shell.extensions.user-theme name ''

# The custom theme's name is the name of its directory in ~/.themes/
gsettings set org.gnome.shell.extensions.user-theme name my-gnome-shell-theme

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

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