php - 没有 JavaScript 的暗模式
问题描述
我有一个仅使用 PHP、HTML 和 CSS 的小型网站,并希望在其上添加暗模式。我找到了很多解决方案,但它们都使用 JavaScript。是否可以在没有 JS 的情况下添加暗模式?
解决方案
你已经拥有了你所需要的一切。浏览器检测是使用 CSS 完成的,遵循Media Queries Level 5规范,使用prefers-color-scheme
媒体查询进行检测。如果您熟悉使用 CSS 进行响应式网页设计,那么您已经掌握了所有知识 - 唯一的区别是响应式 CSS 是关于地理(大小、列、填充、间距、字体大小等)并且prefers-color-scheme
是关于 . ..好吧...颜色。Thomas Steiner ( @DenverCoder9 ) 有一篇很棒的文章“ prefers -color-scheme: 你好黑暗,我的老朋友”,涵盖了这一点。
如果您专门询问 PHP,那么您就不走运了 - 没有用于服务器端处理的暗模式检测方法。
迄今为止,W3C (及其赞助商)的所有努力都集中在客户端/Jamstack 上。
Thomas Steiner (同一个人)建议实现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 页面中:
<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
推荐阅读
- python - 从输入文本框中获取空字符串而不是输入的值
- javascript - 为遮罩图像分配更高的 z-index
- javascript - 在节点 js 中查找,如果 zip 文件包含任何 .js 或 .exe 或 .json 格式,我想阻止这些类型的上传
- stripe-payments - 没有 Webhook 的 Stripe 自动确认和订单履行?
- react-native - 其他组件内的组件不可点击
- r - MatchIT 函数返回相等的连续变量但不相等的分类变量
- python - IndexError:索引 1040 超出轴 0 的范围,大小为 1040
- validation - CakePHP 3 - 为表中的重复列组合可重用的验证器?
- api - 密码保护 OneDrive 文件夹链接
- video - 如何在 Xamarin Forms 中获取视频的长度