最近我正在更新我的软件以支持夜间模式,这是为了响应研究结果:长时间观看白色背景的显示器对眼睛和睡眠节律不利。有没有办法从PHP中检测用户的浏览器和/或操作系统是否设置为暗模式?如何检测是否设置为夜间模式(减少蓝光)?
最近我正在更新我的软件以支持夜间模式,这是为了响应研究结果:长时间观看白色背景的显示器对眼睛和睡眠节律不利。有没有办法从PHP中检测用户的浏览器和/或操作系统是否设置为暗模式?如何检测是否设置为夜间模式(减少蓝光)?
不幸的是,暗黑模式检测方法在服务器端处理(包括PHP)中不存在。
到目前为止,W3C(及其赞助商)所做的所有努力都集中在客户端/Jamstack上,Media Queries Level 5规范使用prefers-color-scheme
媒体查询进行检测。这对CSS和JavaScript都很有用。
谷歌的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