更改活动和应用程序概览屏幕上以及对话框后面的深色覆盖背景（Gnome 3）

Question

答案兼容：

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 overlays”
通过 css，通过创建自定义 gnome-shell 主题

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

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

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

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

在 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。可以通过发出命令来r完成运行命令对话框（按 Alt+F2 显示）。

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

其他重要考虑因素讨论了资源叠加功能对系统稳定性的潜在影响在这个答案中。

参考文献/文献：

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

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

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

（此外，在我开始处理上面的 javascript 覆盖之前，以下是我对这个问题的原始回答。）

使用自定义 Gnome shell 主题

gnome-shell-extensions为此，需要Gnome Tweaks 应用程序以及 Gnome shell 扩展“用户主题”（软件包的一部分，可通过 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显示此新复制的文件的内容。

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

脚本的内容可能是这样的，或者更好（我不是 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 文件留在了目录中。

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

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

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

提取的gnome-shell.css文件已可供编辑。

gnome-shell 开发者工具

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

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 应用程序的“外观”选项卡中，在“主题”部分，有一个标有“Shell”的字段。新的自定义主题应该在所选小部件中可用。请记住，要激活此小部件，需要启用“用户主题”Gnome shell 扩展。

使 CSS 修改生效

方法 1：r通过运行命令对话框（通过 Alt+F2 显示）重新加载 shell；它还应该获取新的 CSS 更改。

方法 2：与方法 1 相比，在默认和自定义 shell 主题之间来回切换似乎更加顺畅和优雅。可以在 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

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

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

Answer 1

答案兼容：

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 overlays”
通过 css，通过创建自定义 gnome-shell 主题

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

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

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

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

在 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。可以通过发出命令来r完成运行命令对话框（按 Alt+F2 显示）。

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

其他重要考虑因素讨论了资源叠加功能对系统稳定性的潜在影响在这个答案中。

参考文献/文献：

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

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

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

（此外，在我开始处理上面的 javascript 覆盖之前，以下是我对这个问题的原始回答。）

使用自定义 Gnome shell 主题

gnome-shell-extensions为此，需要Gnome Tweaks 应用程序以及 Gnome shell 扩展“用户主题”（软件包的一部分，可通过 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显示此新复制的文件的内容。

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

脚本的内容可能是这样的，或者更好（我不是 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 文件留在了目录中。

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

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

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

提取的gnome-shell.css文件已可供编辑。

gnome-shell 开发者工具

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

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 应用程序的“外观”选项卡中，在“主题”部分，有一个标有“Shell”的字段。新的自定义主题应该在所选小部件中可用。请记住，要激活此小部件，需要启用“用户主题”Gnome shell 扩展。

使 CSS 修改生效

方法 1：r通过运行命令对话框（通过 Alt+F2 显示）重新加载 shell；它还应该获取新的 CSS 更改。

方法 2：与方法 1 相比，在默认和自定义 shell 主题之间来回切换似乎更加顺畅和优雅。可以在 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

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

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

答案1

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

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

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

相关内容