（PHP）如何检测用户的计算机/浏览器是否处于深色模式？

Question

最近我正在更新我的软件以支持夜间模式，这是为了响应研究结果：长时间观看白色背景的显示器对眼睛和睡眠节律不利。有没有办法从PHP中检测用户的浏览器和/或操作系统是否设置为暗模式？如何检测是否设置为夜间模式（减少蓝光）？

- uiuii

---

您无法在此处查看：https://dev59.com/u1UL5IYBdhLWcg3wHU0t - dustytrash

可能是如何在浏览器中检测OS X是否处于深色模式？的重复问题。 - naththedeveloper

Answer 1

不幸的是，暗黑模式检测方法在服务器端处理（包括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

- user1575941

Answer 2

由于PHP是在服务器上执行的，没有关于客户端的任何信息，因此没有直接的方法可以找到这个。如果可能在JS中检测颜色模式，您可以将一个小的JS脚本嵌入到您的网站中，设置一个cookie。Cookie会在请求时传输到服务器，因此PHP能够查询它们。

- Hendrik410

---

需要对浏览器进行修改，以便将此信息发送到Web服务器。 - uiuii