有没有办法检测 Chrome 的 Devtools 是否使用暗模式？答案

【问题标题】：Is there a way to detect if Chrome's Devtools are using dark mode?有没有办法检测 Chrome 的 Devtools 是否使用暗模式？
【发布时间】：2017-10-21 19:09:29
【问题描述】：

在来自 PAGE 而不是来自 devtools 本身的 Javascript 中，目前有一种方法可以确定 Chrome 的 devtools 是否使用暗模式而不是“正常模式”？

我确实找到了一个 bug report 对此有评论，但看起来这只与 Chrome 扩展程序有关。

【问题讨论】：

是的。如果您在开发工具上打开元素检查器，则会将 -theme-with-dark-background 类附加到文档正文中。寻找那个。从那里你可以写一些 javascript 来得到你想要的答案。
该类是否可以从站点访问，或者只是 devtools 本身？
开发工具本身就是一个可检查的浏览器窗口。至于您如何从其他上下文（例如 chrome 扩展程序或父 chrome 窗口）访问此信息，我不知道这是否可能。
所以这根本不能回答这个问题。我已经提到扩展可以通过内置对象访问它。
好吧，如果您为 devtools 本身准备好了 devtools，它确实提供了一个答案。您没有指定您试图获取此信息的上下文。

标签： javascript google-chrome

【解决方案1】：

不，它不可从页面获得。

它仅适用于 javascript 中的扩展，通过：

chrome.devtools.panels.themeName

在用户的 DevTools 设置中设置的颜色主题的名称。可能的值：default（默认值）和dark。

从 Chrome 59 开始。

来源：https://developer.chrome.com/extensions/devtools_panels

因此，技术上可以编写一个 chrome 扩展来读取值，然后通过类或 javascript 变量将其公开给页面。
但是要求您的访问者安装用于检测暗模式的扩展程序是不切实际的。

【讨论】：