(PHP) 如何检测用户的计算机/浏览器处于暗模式?
Posted
技术标签:
【中文标题】(PHP) 如何检测用户的计算机/浏览器处于暗模式?【英文标题】:(PHP) How to detect that user's computer/browser is in Dark Mode? 【发布时间】:2019-02-22 14:28:27 【问题描述】:最近我正在更新我的软件以支持暗模式,以响应研究表明,看着纸白背景显示器对眼睛和睡眠节奏有害。有没有办法从 php 中检测到用户的浏览器和/或操作系统设置为暗模式?检测它是否设置为夜间模式(减少蓝色)如何?
【问题讨论】:
你不能,看这里:***.com/questions/50840168/… How to detect if OS X is in dark mode in browsers?的可能重复 【参考方案1】:由于 PHP 在服务器上执行而不知道客户端,因此没有直接的方法可以找出这一点。
如果可以检测 JS 中的颜色模式,您可以在您的站点中嵌入一个小的 JS 脚本,用于设置 cookie。 Cookie 会根据请求传输到服务器,因此 PHP 能够查询它们。
【讨论】:
需要对浏览器进行修订才能将此信息发送到 Web 服务器。【参考方案2】:很遗憾,服务器端处理(包括 PHP)不存在暗模式检测方法。
迄今为止,W3C(及其赞助商)的所有努力都集中在客户端/Jamstack 上,Media Queries Level 5 规范使用prefers-color-scheme
媒体查询进行检测。这在 CSS 和 javascript 中都很有用。
Google 的 Thomas Steiner (@DenverCoder9) 建议实施 Proposed server-side client hint,但这尚未被 W3C 或浏览器采纳(还没有?)。
李>无论哪种方式 - 服务器端检测都有一个明显的缺点(Thomas 的建议和我下面的解决方案)因为服务器只会知道状态变化(例如macOS 夜幕降临时的“自动”模式)在下一个服务器请求时,或者更明显地,在页面的第一次加载时。
建议将此检测留在客户端,vinorodrigues/bootstrap-dark 之类的项目显示了这很容易 - 无需服务器端处理。
话虽如此 - 有一个解决方法:
最有效的方法是利用js-cookie/js-cookie 项目,并将以下代码包含到您的 html 页面中:
<script src="https://cdn.jsdelivr.net/npm/js-cookie/dist/js.cookie.min.js"></script>
<script>
// code to set the `color_scheme` cookie
var $color_scheme = Cookies.get("color_scheme");
function get_color_scheme()
return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
function update_color_scheme()
Cookies.set("color_scheme", get_color_scheme());
// read & compare cookie `color-scheme`
if ((typeof $color_scheme === "undefined") || (get_color_scheme() != $color_scheme))
update_color_scheme();
// detect changes and change the cookie
if (window.matchMedia)
window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme );
</script>
然后你的 PHP 会像这样检测这个 cookie:
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false;
if ($color_scheme === false) $color_scheme = 'light'; // fallback
您可以使用它来加载 CSS:
// Load the CSS for the correct color-scheme
if ($color_scheme == 'dark')
?><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vinorodrigues/bootstrap-dark@0.0/dist/bootstrap-night.min.css"><?php
else
?><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0.css/bootstrap.css"><?php
或者,像这样:
?>You are in <?= $color_scheme ?> mode.<?php
【讨论】:
以上是关于(PHP) 如何检测用户的计算机/浏览器处于暗模式?的主要内容,如果未能解决你的问题,请参考以下文章