7

最近，我正在更新我的软件以支持暗模式，以回应研究表明看纸白背景显示器对眼睛和睡眠节奏有害。有没有办法从 PHP 检测用户的浏览器和/或操作系统设置为暗模式？如何检测它设置为夜间模式（减少蓝色）？

4

2 回答 2

10

不幸的是，服务器端处理（包括 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
于 2020-05-26T14:45:58.280 回答
3

由于 PHP 在不了解客户端的情况下在服务器上执行，因此没有直接的方法可以找到它。

如果可以检测 JS 中的颜色模式，您可以在您的站点中嵌入一个小的 JS 脚本，用于设置 cookie。Cookie 会根据请求传输到服务器，因此 PHP 能够查询它们。

于 2018-09-18T14:13:45.010 回答