Question

我有一个仅使用php，html和css的小型网站，并希望在其上添加深色模式。我找到了很多解决方案，但是它们都使用JavaScript。是否可以在没有JS的情况下添加黑暗模式？

谢谢。

Answer 1

您可以克隆 css 并更改背景颜色，按钮 ...真的没有必要真正使用 JavaScript

如果您只想做一个更改CSS的按钮，我真的不知道该怎么做，但是如果您想做另一个网页，但是仅适用于黑暗模式，只需将克隆从创建的CSS上移开即可。

Answer 2

一种选择是在您的URL中使用 routing 元素，该元素确定（使用服务器端逻辑）加载哪组级联样式表。

例如，在http://foobar.com/dark/path/to/content中，URL的/dark/部分可以使服务器加载您的“深色”主题CSS文件。

Answer 3

您已经拥有所需的一切。遵循Media Queries Level 5规范的CSS使用prefers-color-scheme媒体查询进行浏览器检测。如果您熟悉CSS的响应式网页设计，那么您已经掌握了所有知识-唯一的区别是，响应式CSS与地理有关（大小，列，填充，间距，字体大小等）和{{1 }}大概是……颜色。 Thomas Steiner（@DenverCoder9）的一篇很棒的文章“ prefers-color-scheme: Hello darkness, my old friend”对此进行了介绍。

如果您是专门询问PHP的，那么您就不走运了-没有用于服务器端处理的暗模式检测方法。

W3C （及其赞助商）到目前为止的所有努力都集中在客户端/ Jamstack上。
Thomas Steiner（em>（same guy））建议实施Proposed server-side client hint，但是（尚未？）通过W3C或浏览器。
无论哪种方式-服务器端检测（都有Thomas的推荐和我的解决方案）都有一个明显的缺点，即服务器只会知道状态变化（例如，当夜幕降临时，为macOS“自动”模式），在下一个服务器请求上，或更明显地，是页面的第一次加载。

我的建议是仅在此基础上利用CSS /客户端-Thomas在两种方法上提供了一些实用指南，

支持两种配色方案的1x CSS，和
2x CSS，一个亮，另一个暗。我在vinorodrigues/bootstrap-dark的CSS框架Bootstrap中制作了应用其中一些方法的教育性白皮书，以显示在没有服务器端处理的情况下这是多么容易。

已经说过-如果您必须坚持使用PHP或服务器端检测，则没有解决方法-但必须使用一些JS。最有效的方法是利用js-cookie/js-cookie项目，并将以下代码包含到HTML页面中：

prefers-color-scheme

然后您的PHP将像这样检测该cookie：

  <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>

您可以用来加载CSS的

  $color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false;
  if ($color_scheme === false) $color_scheme = 'light';  // fallback

或者，像这样：

  // 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
  }

没有JavaScript的黑暗模式

3 个答案: