javascript - 我的网站如何检测浏览器是否使用深色/浅色主题，而不是操作系统是否使用主题

Question

我正在尝试根据浏览器主题更改网站图标。我试过 window.matchMedia('(prefers-color-scheme: dark)').matches但这似乎只检测计算机颜色主题，而不是浏览器。是否可以只获取浏览器主题？

Answer 1

你错了，prefers-color-scheme还获得了浏览器主题的偏好——但不是你想的那样。如果您正在考虑在 Chrome Web Store 或 Firefox 的 Add-On Store 中找到的那些浏览器主题，不幸的是，当前的浏览器都没有实现它以适应 WebExtensions。
prefers-color-scheme从操作系统获取主题，但如果它被覆盖或落后于用户首选项，也可以从浏览器获取。在 Firefox 上，添加 ui.systemUsesDarkTheme至 about:config并将其设置为 0总是让 (prefers-color-scheme: dark)无论操作系统的偏好如何，都是如此。在 Android 上，我相信三星浏览器在三点菜单中有一个选项，可以一直启用暗模式，这也会覆盖 Android 的设置。 所以，继续使用 prefers-color-scheme并期待 future 的浏览器能够满足您的需求。