如何将PHP生成的页面切换为深色模式？
2026-4-8
如何将PHP生成的页面切换为深色模式？
嘿，看你在树莓派上搭了个定时换图的趣味页面，要给它加上深色模式其实不难，我给你分享几个实用的思路，按需选就行：
方法1：和现有时间逻辑联动，自动切换深浅模式
你已经在根据时间段换图片了，刚好可以同步给页面绑定深浅模式的样式类，逻辑完全对齐：
先修改你的PHP代码，给每个时间段加上对应的主题类：
<?php require 'Parsedown.php'; // 你的markdown解析器 $h = date('H'); // 同时设置图片和主题类 if( $h < 5 ) { $pic = 'res/cyber_rat.png'; $themeClass = 'dark-mode'; // 深夜用深色 } elseif( $h < 11 ) { $pic = 'res/day_rat.png'; $themeClass = 'light-mode'; // 清晨白天用浅色 } elseif( $h < 20 ) { $pic = 'res/saint_rat.png'; $themeClass = 'light-mode'; // 下午保持浅色 } else { $pic = 'res/asm_rat.png'; $themeClass = 'dark-mode'; // 晚间切换深色 } // 用Parsedown把README转成HTML（比nl2br更贴合markdown格式） $readme = file_get_contents('/opt/rat/README.md'); $parsedown = new Parsedown(); $readme_html = $parsedown->text($readme); ?>
然后在页面的<body>标签里输出这个类：
<body class="<?php echo $themeClass; ?>">
最后写对应的CSS样式，放在<style>标签或者单独的.css文件里：
/* 浅色模式基础样式 */ body.light-mode { background-color: #fff; color: #333; transition: all 0.3s ease; } /* 深色模式样式 */ body.dark-mode { background-color: #1a1a1a; color: #f0f0f0; } /* 给markdown内容适配深色模式 */ body.dark-mode a { color: #63b3ed; } body.dark-mode img { filter: brightness(0.9) contrast(1.1); /* 让图片在深色背景下更和谐 */ }
方法2：让用户手动切换，用Session记住选择
如果不想完全靠时间，让用户能自主切换的话，用Session来记录偏好就行：
先在PHP开头处理切换请求：
<?php session_start(); // 开启Session来存用户选择 require 'Parsedown.php'; // 处理切换主题的请求 if(isset($_GET['theme'])){ $_SESSION['theme'] = $_GET['theme']; header("Location: ".$_SERVER['PHP_SELF']); // 跳回当前页面避免重复提交 exit; } // 优先用用户选择的主题，没有的话按时间默认 $h = date('H'); if(isset($_SESSION['theme'])){ $themeClass = $_SESSION['theme']; } else { $themeClass = ($h < 5 || $h >=20) ? 'dark-mode' : 'light-mode'; } // 图片逻辑和之前一样 if( $h < 5 ) { $pic = 'res/cyber_rat.png'; } elseif( $h < 11 ) { $pic = 'res/day_rat.png'; } elseif( $h < 20 ) { $pic = 'res/saint_rat.png'; } else { $pic = 'res/asm_rat.png'; } $readme = file_get_contents('/opt/rat/README.md'); $parsedown = new Parsedown(); $readme_html = $parsedown->text($readme); ?>
然后在页面上加个切换按钮区域：
<div style="margin: 10px 0;"> <a href="?theme=light-mode" style="padding: 5px 10px; margin-right: 10px; background: #eee; text-decoration: none;">浅色模式</a> <a href="?theme=dark-mode" style="padding: 5px 10px; background: #333; color: #fff; text-decoration: none;">深色模式</a> </div>
CSS样式和方法1一样，这样用户点按钮就能切换，刷新页面也会记住他们的选择。
方法3：自动适配系统的深色模式偏好
现在主流浏览器都支持检测系统的深色模式设置，纯CSS就能搞定，不用改太多PHP：
直接写这段CSS：
/* 默认浅色模式 */ body { background-color: #fff; color: #333; transition: background-color 0.3s, color 0.3s; } /* 当系统设置为深色模式时自动生效 */ @media (prefers-color-scheme: dark) { body { background-color: #1a1a1a; color: #f0f0f0; } body a { color: #63b3ed; } body img { filter: brightness(0.9) contrast(1.1); } }
这种方法最省心，页面会自动跟着用户的系统设置走——比如用户把手机/电脑改成深色，页面就自动变深色，改回浅色就同步切换。
内容来源于stack exchange
