我最近将我的 Mac 更新为 Mojave。在其中，计算机现在向浏览器发送有关暗模式是否打开的信息，以便在 CSS 中使用，就像本例中那样，这使得 <body> 中的文本变为蓝色。如果它是:
@media (prefers-color-scheme: dark) {
body {
color: blue;
}
}
一些网站使用它来将他们的标签图标设置为白色或浅灰色(如果它处于打开状态)。例如:
但是，如果浏览器没有设置为深色主题，它看起来很糟糕，所以这不是检查内容应该是浅色还是深色的好方法:
有没有什么方法可以在 CSS 或 JavaScript 中获取浏览器主题中选项卡的颜色，以便更好地实现此类功能？
最佳答案
与“宽度”和“高度”媒体查询一样，您可以根据“prefers-color-scheme”属性设置属性:
@media (prefers-color-scheme: dark) {
color: white;
background: black
}
请注意，您还可以通过这种方式设置变量和属性:
root: {
--text-color: black;
--back-color: white;
}
body {
color: var(--text-color);
background: var(--back-color)
}
@media (prefers-color-scheme: dark) {
root: {
--text-color: white;
--back-color: black;
}
}
这真的很酷。 :)
浏览器对此的支持非常新，并不是每个浏览器都支持(还)，您将不得不选择是愿意稍等片刻还是不关心 :D https://caniuse.com/#search=prefers-color-scheme
You won't be able to get the exact color used by a user on his browser, simply because browsers are done differently and engines have to be a little standardized and can't implement some functionalities that will work only on their browser.
关于css - 有没有办法检查用户的浏览器主题是什么颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57781268/