本指南旨在帮助你在 Firefox、Chrome、Chromium 和 Edge 等流行的网页浏览器中启用深色模式。

我们都喜欢深色模式。与标准浅色模式相比，许多人更喜欢它。许多桌面应用原生提供深色模式，而一些应用则是通过桌面环境的底层模式适应深色模式。

不可否认，我们都在网页浏览器上花费了很多时间。我们很少使用桌面应用（除非你从事专门的工作，例如视频编辑等）。因此，当你花费大量时间在浏览器中阅读和学习时，你始终可以选择深色模式。不过，对于网页浏览器，启用深色模式的方法略有不同。

本指南为你提供了在 Firefox、Chromium、Chrome 和 Edge 浏览器中启用深色模式的简单步骤。

在网页浏览器中启用深色模式

在 Firefox 中启用深色模式

打开 Firefox 并点击右上角的菜单。

单击 “ 设置 Settings > 扩展和主题 Extension and Themes ”。

选择 “ 深色主题 Dark Theme ” 并点击 “ 启用 enable ”。你应该会看到深色模式已应用于 Firefox。

在 Firefox 浏览器中启用深色模式

深色模式下的 Firefox

要将其还原，请按照相同的步骤并选择浅色主题。

Chromium 和 Chrome 中的深色模式

默认情况下，Chromium 或 Chrome 不会预安装任何深色主题。因此，你需要前往 Chrome 应用商店并下载你想要的深色主题。对于本指南，我会推荐超过一百万用户使用的 “Morpheon Dark” 主题。

从 Chromium 浏览器打开 Morpheon Dark 主题页面（以下链接）。

Chrome 应用商店中的 Morpheon Dark 主题

点击 “ 添加到 Chrome Add To Chrome ” 按钮。它应该会在 Chrome 中启用。

你可能想探索 Chrome 应用店中提供的其他深色或浅色主题。 访问此页面获取所有深色主题的集合。

但是，你应该要记住的一件事是：此主题不会更改设置或上下文菜单，这是显而易见的。因为它只是改变了浏览器窗口，而这些菜单（有时）是操作系统本身的一部分。

Chromium 深色主题

对 Chrome 浏览器也遵循相同的步骤。

Edge 浏览器 – 深色模式

但是，Edge 浏览器 默认带有更好的深色主题。它允许你从设置中使用 GTK+、浅色和深色模式。

打开 Edge 浏览器，点击右上角的三个小点。

转到 “ 外观 Appearance ” 并选择 “ 深色 Dark ”。这样应该就好了。

Edge 的这种深色主题实现更好，因为它改变了上下文菜单和地址栏。

深色主题的 Edge

总结

如果你是高级用户，你可能不需要本指南。你可以自己弄清楚。

但我们为所有读者涵盖了所有基础到高级教程。许多新的 Linux 用户可能不知道如何在浏览器中启用深色模式。

所以，就是说，我希望这对你和其他人有帮助。如果你遇到任何问题，请在下面的评论框中告诉我。

via: https://www.debugpoint.com/dark-mode-browser/

作者：Arindam 选题：lkxed 译者：geekpi 校对：wxy

本文由 LCTT 原创编译，Linux 中国 荣誉推出

本指南旨在帮助你了解如何在流行的浏览器，如 Firefox、谷歌 Chrome、Chromium 和微软 Edge 中启用深色模式。

我们都喜欢深色模式。许多人喜欢它，而不是标准的浅色模式。虽然许多桌面应用提供了原生的深色模式，但一些应用通过桌面环境的基础模式适应深色模式。

你不能否认，我们都在浏览器上花了好多时间。我们很少使用桌面应用（除非你是在工作，如视频编辑等）。因此，当你在浏览器上花很多时间阅读和学习时，你应该也可以选择深色模式。但是，对于各个浏览器，稍微有点不同。

本指南为你提供简单的步骤，你可以按照这些步骤在 Mozilla Firefox、Chromium、Chrome 和 Edge 浏览器中启用深色模式。

在浏览器中启用深色模式

在 Firefox 中启用深色模式

打开 Firefox ，点击右上角的设置菜单。

点击 “ 设置 Settings > 扩展和主题 Extension and Themes ”。

选择“ 深色主题 Dark Theme ”并点击“ 启用 enable ”。然后你应该看到深色模式被应用到 Firefox。

要恢复它，按照同样的步骤，选择浅色主题。

Chromium 和 Chrome 的深色模式

Chromium 或 Chrome 默认不预装任何深色主题。因此，你需要去 Chrome 商店，下载任何你想要的深色主题。在本指南中，我将推荐 “Morpheon Dark” 主题，它有超过一百万用户在使用它。

从 Chromium 浏览器中打开 Morpheon Dark 主题页面（从以下链接）。

Chrome 网络商店中的 Morpheon Dark 主题

点击“ 添加到 Chrome Add To Chrome ” 按钮。它应该会在 Chrome 中启用。

你可能想探索 Chrome 网络商店中的其他黑白或深色主题。请访问此页面，查看所有的深色主题集合 。

然而，你应该记住一件事：这个主题不会改变设置或上下文菜单。这很明显。因为它只是改变了浏览器窗口，而那些菜单是操作系统本身的一部分（有时）。

对 Google Chrome 也要按照同样的步骤进行。

Edge 浏览器的深色模式

然而，微软 Edge 浏览器 默认带有更好的深色主题。它允许你从设置中使用 GTK+、浅色和深色模式。

打开 Edge 浏览器

点击右上角的三个小圆点。

进入“ 外观 Appearance ”，选择“ 深色 Dark ”。这就完成了。

这个 Edge 的深色主题实现得更好，因为它改变了上下文菜单和地址栏。

结束语

如果你是一个高级用户，你可能不需要这个指南。你可以搞清楚。

但我们为所有的读者涵盖了所有从基础到高级的教程。许多新的 Linux 用户可能也不知道如何在浏览器中启用深色模式。

因此，话虽如此，我希望这能帮助你和其他人。如果你遇到任何麻烦，请在下面的评论栏里告诉我。

via: https://www.debugpoint.com/dark-mode-browser/

作者：Arindam 选题：lkxed 译者：geekpi 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

我喜欢 在 Ubuntu 中使用深色模式。在我看来深色模式能够缓解视觉疲劳，让系统看起来更加的赏心悦目。

我发现了一个 gedit 文本编辑器的小麻烦，如果你在深色模式下使用它，你也许也会遇到。

默认情况下 gedit 高亮当前光标所在的行。这是一个非常有用的功能，但是如果你在 Linux 系统中开启了深色模式，那么你将会感到痛苦。为什么？因为被高亮的文本将不再变得可读。你自己看吧：

如果你选择文本，它将变得可读，但这并不是一个让人感到有多么愉快的阅读或者编辑体验。（LCTT 校注：在新的 Ubuntu 22.04 中，这一情况已经有所改善，“高亮当前行”已被取消勾选）

好消息是你不需要再忍受它。我将演示几个步骤让你能够同时享受 gedit 以及系统的深色模式。

让 gedit 在深色模式下阅读体验友好

你基本上有两个选择：

1. 禁用高亮当前行，但也同时意味着你必须清楚地知道你在哪一行。
2. 改变默认的颜色设置，但编辑器的颜色会变得稍微有些不同，而且如果你更改系统主题，它不会自动切换到浅色模式。

在 gedit 或者 GNOME 的开发者解决这个问题之前，这是你必须要做的应变和妥协。

选项1： 禁止高亮当前行

当你打开 gedit 后，点击汉堡菜单然后选择“ 首选项 Preferences ”。

在查看选项卡，你应该看到在 “ 高亮 Highlighting ” 区域的下方的 “ 高亮当前行 Highlight current line ” 选项。取消勾选这个选项，马上就可以看到效果。

“高亮当前行”是一个有用的功能，如果你想继续使用它，请选择第二个选项。

选项2： 更改编辑器的颜色主题

在“ 首选项 Preferences ”窗口，找到 “字体与颜色Font & Colors” 标签页，然后将颜色主题更改为 “Oblivion”、“Solarized Dark”，或者 “Cobalt”。

正如我前面所提到的，缺点就是当你把系统主题切换为浅色模式时，编辑器将不会自动切换到浅色模式。

开发者应该修复的一个 bug

这里 有几个 Linux 可用的文本编辑器 ，但是为了快速阅读或编辑文本文件，我更推荐使用 gedit。尽管如此，小烦恼仍旧是小烦恼。开发者应该在将来的版本中为这个很好的文本编辑器修复这个问题，让我们不再求助于这些应对办法。

你呢？你在你的系统上使用深色模式还是浅色模式？你注意到 gedit 的这个问题了吗？你有使用什么方法去解决它吗？欢迎分享你的经验。

via: https://itsfoss.com/gedit-dark-mode-problem/

作者：Abhishek Prakash 选题：lujun9972 译者：void-mori 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。

你可能已经熟悉 媒体查询 media query 了。它们被广泛地用于使网站具有响应性。width 和 height 属性包含视区的尺寸。然后，你可以使用 CSS 在不同的尺寸下呈现不同的布局。

prefers-color-scheme 媒体查询 的工作方式与此相同。用户可以将他们的操作系统配置为使用浅色或深色主题。prefers-color-scheme 包含这个值。该值是 light 或 dark ，尽管 W3C 规范指出它可能支持未来的值，如 sepia。我为这两种模式指定不同的 CSS 变量值，让用户的操作系统来决定。

prefers-color-scheme 媒体查询

prefers-color-scheme 媒体查询的两种变化是:

/* Light mode */
@media (prefers-color-scheme: light) {
   :root {
       --body-bg: #FFFFFF;
       --body-color: #000000;
   }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

在上面的 CSS 中，--body-bg 和 --body-color 是 CSS 变量。正如你所看到的，它们对两种模式都包含不同的值。在浅色主题中，我设置了一个白色背景和黑色文本。在深色主题中，我设置了黑色背景和白色文本。

因为规范说 W3C 可能会引入未来的值，所以把这个 CSS 转换为默认值是有意义的。

/* Light mode */
:root {
   --body-bg: #FFFFFF;
   --body-color: #000000;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

在上面的代码中，我默认定义了一个浅色主题，如果媒体查询是 dark，则将其转换为深色主题。这样一来，以后任何添加到媒体查询的值都会默认设置为浅色主题。

使用 CSS 变量

现在我为不同的主题设置了不同的值，我需要实际使用它们来设计页面。

body {
   background: var(--body-bg);
   color: var(--body-color);
}

var() 语法 是 CSS 使用变量的方式。在上面的代码中，我是说把 background 设置为 --body-bg 的值，把 color 设置为 --body-color 的值。注意，这些变量的值来自媒体查询。这意味着背景和前景的颜色是根据操作系统的设置而改变的！

这就是媒体查询的真正能力。提供一个从操作系统到网页的一致的用户体验。

如果你进入 findmymastodon.com，并切换你的操作系统的主题，你会看到从一个主题到另一个主题的过渡。

CSS 工作组 网站也使用同样的媒体查询。改变你的操作系统主题，网站就会切换主题来进行调整。

结论

请注意，使用 prefers-color-scheme 与使用普通的编程语言没有什么不同。我定义了一些变量，这些变量的值根据一些逻辑而改变。而这些变量然后被用于进一步的操作。

让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。而且，为了用户的利益，它进一步模糊了桌面和网络之间的界限。最新的浏览器版本 支持 prefers-color-scheme，所以你今天就可以开始实验了。

编码愉快。

这篇文章最初发表在 作者的网站 上，经许可后重新发表。

via: https://opensource.com/article/21/10/dark-themes-websites

作者：Ayush Sharma 选题：lujun9972 译者：geekpi 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

LibreOffice 是一款自由开源的跨平台办公生产力软件。如果你没有充分利用它，那么必须看下 LibreOffice 小技巧。

甚至在非编程人员中，深色主题也越来越受欢迎。它减轻了眼睛的压力，特别适合长时间使用屏幕。有人认为，这使文本看起来清晰明了，有助于提高生产率。

如今，某些 Linux 发行版例如 Ubuntu 带有深色模式，使你的系统具有更暗的色彩。当你打开 深色模式 dark mode 时，某些应用将自动切换到深色模式。

LibreOffice 也会这样，但你编辑的主区域除外：

你可以更改它。如果要让 LibreOffice 进入完全深色模式，只需更改一些设置。让我告诉你如何做。

如何在 LibreOffice 中完全启用深色模式

如前所述，你需要先启用系统范围的深色模式。这样可以确保窗口颜色（或标题栏）与应用内深色完全融合。

接下来，打开套件中的任意 LibreOffice 应用，例如 Writer。然后从菜单中，依次点击 Tools -> Options -> Application Colors，然后选择 Document background 和 Application background 为 Black 或 Automatic（任意适合你的方式）。

如果图标不是深色，那么可以从菜单（如下图所示）中更改它们，Tools -> Options -> View ，我在 MX Linux 上的个人选择是 Ubuntu 的 Yaru 图标样式（如果你使用的图标包为深色版本，请选择它） 。

当然，你也可以尝试其他 Linux 发行版的 icon 主题。

最终结果应如下所示：

LibreOffice flatpak 软件包的其他技巧

如果你使用的是 LibreOffice 套件的 Flatpak 软件包，那么 LibreOffice 的标题区域（或菜单区域）可能看起来是白色的。在这种情况下，你可以尝试进入 Tools -> Options -> Personalization，然后选择 “灰色主题”，如下截图所示。

它并不完全是黑色的，但应该可以使外观看起来更好。希望可以帮助你切换到深色主题的 LibreOffice 体验！

总结

深色主题逐渐开始在我们的台式机中占主导地位，它具有现代品味并减少了眼睛疲劳，尤其是在弱光条件下。

LibreOffice 使你可以自由地将工作环境切换为深色主题或保留浅色主题元素。实际上，你将有大量的自定义选项来调整你喜欢的内容。你是否已在 LibreOffice 上切换为深色主题？你首选哪种颜色组合？在下面的评论中让我们知道！

via: https://itsfoss.com/libreoffice-dark-mode/

作者：Dimitrios Savvopoulos 选题：lujun9972 译者：geekpi 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

深色模式是 Ubuntu 20.04 最受瞩目的新功能之一了。任何版本的 Ubuntu 都可以通过安装深色主题让用户界面拥有一个深色的外观，但在 Ubuntu 20.04 中，这个过程变得更简单。

在 Ubuntu 20.04 中，无需额外安装主题，默认主题（称为 Yaru）本身就带有三种模式，其中就包括深色模式。

下面我会展示如何将 Ubuntu 系统完全设置为深色模式。

在 Ubuntu 20.04 打开深色模式

这个步骤是在 GNOME 桌面上进行的，如果你使用的是其它桌面，你看到的可能会和下面的截图不一样。

按下 super 键（或 Windows 键），然后输入 “settings”，就可以找到系统设置。

在系统设置中，进入“ 外观 Appearance ”部分，就可以看到 浅色 light 、 标准 standard 和 深色 dark 三个选项。既然要使用深色模式，那自然而然要选择“深色”这个选项了。

完成设置以后，使用了 GTK3 的应用程序都可以跟随深色模式。因此你会看到系统中包括文本编辑器、终端、LibreOffice 等在内的大多数应用程序都已经切换成深色了。但未使用 GTK3 的应用程序可能并没有跟随进入深色模式，下面我会展示如何更完整地进入深色模式。

继续调整，进入完整深色模式

这个时候你会发现，shell 主题、屏幕顶部面板中的消息托盘和系统托盘还仍然保持在原有的模式当中。

现在就需要使用 GNOME 扩展安装 Yaru 深色 shell 主题了。在 Ubuntu 中通过 Ctrl+Alt+T 打开终端，然后执行以下这个命令安装浏览器扩展：

sudo apt install chrome-gnome-shell

进入扩展页面启用这个扩展：

执行以下命令安装 GNOME 调整工具：

sudo apt install gnome-tweaks

打开 GNOME 调整工具，进入“ 外观 Appearance ”部分，就可以看到 shell 主题的选项，现在只需要把它启用就可以了。

设置完之后再观察一下，桌面通知、消息托盘、系统托盘等等都已经进入深色模式了。

现在感觉好多了。但你可能还会注意到，在使用浏览器访问网站的时候，很多网站都使用了白色的背景色。如果期望网站方提供深色模式，那是很不现实的，但我们可以自己实现这一件事。

你需要用到的东西就是诸如 Dark Reader 这样的浏览器扩展。《在 Firefox 中启用深色模式》这篇文章中也有讨论过这个浏览器扩展，它的使用过程并不复杂，如果你使用的浏览器是 Firefox、Chrome 或 Ubuntu 下的 Chromium，就可以直接安装其官方网站上列出的扩展。

Dark Reader 安装完成后，就会以深色模式打开网站了。

当然，有些外部的第三方应用程序可能仍然是浅色状态。如果它们自己附带了深色模式的选项，就需要手动启用它们的深色模式。

如今，深色模式在非开发者人群中也越来越流行了。按照以上的步骤，你就可以轻松进入深色模式。

请享受深色模式。

via: https://itsfoss.com/dark-mode-ubuntu/

作者：Abhishek Prakash 选题：lujun9972 译者：HankChow 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出