☰

检测网页应用上的暗黑模式

tag-icon • tag-icon google-chrome themes youtube
检测网页应用上的暗黑模式

有没有办法让 YouTube 等网络应用在 Ubuntu 20.04 上自动检测系统暗模式？

编辑：某些 Web 应用程序可以在 Windows 上休止使用系统主题。如果您启用了暗黑模式，则这些应用程序将使用暗黑主题显示。在 Ubuntu 20.04 中，当我将这些应用程序（谷歌浏览器上的 YouTube）配置为休止使用系统主题时，即使我将 Ubuntu 设置为暗黑模式，它仍会显示浅色主题。

答案1

这是 Ubuntu 和 Chrome 之间的问题，在此页面中，您可以看到系统正在使用哪个主题。 https://codepen.io/alisterlf/full/LYbvwER

这个页面在 Ubuntu 上使用 Firefox 可以运行，但在 Chrome 上却不行。在 Windows 上，这个页面在 Chrome 上也可以运行，所以我认为这是 Ubuntu 和 Chrome 之间的问题。

这是一个已知问题，可通过以下方式追溯这一页。

答案2

如果您将 Google Chrome 切换为 GTK 主题（设置->外观->主题），Chrome 浏览器的外观将随系统主题而变化。但是，这不会改变浏览器主题设置，如您在@Alister 的链接中看到的那样：https://codepen.io/alisterlf/full/LYbvwER

因此，系统主题不会传播到允许您使用系统主题的网站。这是一个已知问题，正在跟踪中这里。切换 Chrome 以使用 GTK 主题似乎是执行此操作的“正确”方法，并且希望当此问题修复后，您将能够使用 Youtube 的“使用设备主题”设置（个人资料图片 -> 外观 -> 使用设备主题）。

答案3

对我来说，添加强制深色主题的标志很有帮助

/usr/bin/chromium %U --enable-features=WebUIDarkMode --force-dark-mode

您还可以在 Chromium 应用程序详细信息面板中更改此命令 在此处输入图片描述 然后选择应用 在此处输入图片描述 并将我在答案开头列出的命令放入命令：场地

系统信息：

  • 操作系统：Arch Linux x86_64
  • 内核：5.15.40-1-lts
  • 德语：等离子 5.24.5

答案4

如果您有权访问 Web 应用程序（或网站）的源代码，则可以使用matchMediaJavascript：

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

另外，如果您希望应用程序在操作系统从一种模式转换为另一种模式时更新，您可以观察变化：

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

否则，据我所知，没有任何选项可以强制应用程序遵守主机操作系统的配色方案或模式

相关内容