CSS 的 prefers-color-scheme 媒体查询是实现深色模式渐变的最标准方式，PHP 通常无需参与；正确做法是在 @media (prefers-color-scheme: dark) 中重定义 linear-gradient，保持角度与色标一致，避免纯黑，推荐使用带灰度的深蓝/深紫，并注意文字对比度与真机预览。
PHP 页面本身不直接控制深色模式或渐变效果，真正起作用的是 CSS 和浏览器的 prefers-color-scheme 媒体查询；PHP 只负责输出 HTML/CSS（比如根据服务端逻辑动态写入 class 或内联样式），但绝大多数场景下，你**不需要 PHP 参与判断深色模式**——纯前端就能可靠适配。
用 @media (prefers-color-scheme: dark) 控制渐变色
这是最标准、兼容性足够（Chrome 87+、Firefox 90+、Safari 14+）的做法。渐变色需在暗色模式下重新定义，不能只靠 background-color 切换。
常见错误是只写 background: linear-gradient(...) 一次，没在 dark 媒体查询里覆盖它。
正确写法示例：
立即学习“PHP免费学习笔记（深入）”；
body {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}
@media (prefers-color-scheme: dark) {
body {
background: linear-gradient(135deg, #1e1e2e 0%, #33334d 100%);
}
}
注意点：
- 渐变角度（如
135deg）、色标位置（0%/100%）建议保持一致，避免视觉跳变 - 深色渐变不要用纯黑（
#000），推荐带灰度的深蓝/深紫（如#1e1e2e），更护眼也更现代 - 如果用了 CSS 变量，可以统一管理颜色，例如：
--grad-start: #6a11cb;，再在媒体查询中重设变量值
PHP 动态输出 class 或 style 的适用场景
只有当你需要服务端提前感知用户偏好（比如 SEO 首屏直出深色样式、或结合用户账户设置强制主题），才需 PHP 参与。但注意：PHP 无法直接读取浏览器的 prefers-color-scheme，只能靠以下方式“推测”：
- 从请求头
Sec-CH-Prefers-Color-Scheme（需启用 Client Hints，且仅 Chromium 系支持，需响应头配置Vary: Sec-CH-Prefers-Color-Scheme） - 读取用户登录后保存的主题偏好（数据库字段如
user.theme = 'dark'） - 解析 Cookie（如
theme=dark），但首次访问无 Cookie 时仍需前端 fallback
简单示例（基于 Cookie）：
<?php $theme = $_COOKIE['theme'] ?? 'auto'; $cls = ($theme === 'dark') ? 'dark-theme' : ''; ?> <body class="<?= $cls ?>">
然后 CSS 写：
body { background: linear-gradient(...); }
body.dark-theme { background: linear-gradient(...); }
⚠️ 关键提醒：纯靠 PHP 输出 class 无法响应系统级深色切换（比如用户中途改系统设置），必须搭配 JS 监听 matchMedia 并更新 class，否则体验断裂。
渐变在深色模式下容易被忽略的细节
不是所有渐变都适合暗色背景——尤其带高光/透明/浅色过渡的渐变，在深底上会发灰、糊成一片。
- 避免在深色模式中使用含
rgba(255,255,255,0.1)这类低饱和白透明色，它在深背景上几乎不可见 - 慎用
background-image: url(...)渐变图，不如 CSSlinear-gradient灵活，且无法被媒体查询接管 - 如果渐变用于按钮或卡片，记得同步调整文字颜色、阴影（
box-shadow）和 border，否则对比度不足（WCAG AA 要求文本对比度 ≥ 4.5:1） - 移动端 Safari 对
prefers-color-scheme支持较晚（iOS 13.4+），旧版本会回退到亮色渐变，属于正常行为
真正难的不是写两段渐变代码，而是让深色渐变看起来“有层次却不刺眼”，这需要反复在真机上切主题预览——设计稿里的 #1e1e2e 和实际屏幕上的观感常有偏差。
