Laravel 应服务端存储主题偏好：登录用户存数据库 users 表 theme_preference 字段，游客存 session；Blade 中通过 $theme 变量动态输出 html class；Tailwind 配 darkMode: 'class' 编译两套 CSS；AJAX 切换避免重载，localStorage 仅作降级备份。
怎么用 Laravel 服务端存主题偏好
用户切换暗黑模式后，得记住他的选择，下次打开还是同一种主题。Laravel 最稳妥的做法是把偏好存在 session 或数据库里，而不是只靠前端 localStorage —— 后者在换设备、清缓存时就丢了，服务端存一份才能真“记住”。
常见错误是直接在 Blade 模板里写 localStorage.getItem('theme') 就完事，结果用户注册/登录后主题偏好不跨设备同步，或者 SSR 渲染时首屏闪白/闪黑。
- 登录用户：存到数据库的
users表加个theme_preference字段（值为'light'或'dark'），每次请求都从$user->theme_preference读取 - 游客用户：用
session(['theme' => 'dark'])，配合中间件在响应头写Vary: Cookie避免 CDN 缓存错乱 - 别用
config(['app.theme' => ...])动态改配置 —— 它是单次请求生命周期有效，且无法响应用户实时切换
Laravel Blade 如何动态输出 class 或 data-theme
Blade 不是 JS，没法等 DOM 加载完再切主题；它得在 HTML 输出前就决定好 或 的 class。所以得靠服务端变量驱动，而不是等前端 JS 注入。
典型翻车点：在 Blade 里写 硬编码，或用 @if (request()->cookie('theme') === 'dark') 手动查 cookie —— cookie 可能过期、没设 HttpOnly、没 path，而且绕过了 session 或 auth 逻辑。
- 统一从
$theme = Auth::check() ? Auth::user()->theme_preference : session('theme', 'system')获取值 - 在布局模板中这样写：
（注意引号嵌套） - 如果用 Alpine.js，
x-data初始化时读{{ $theme }}，别用localStorage覆盖服务端决策 - 避免在多个 Blade 文件里重复判断 —— 抽成一个
@props(['theme' => 'system'])组件或 View Composer
怎么让 Laravel Mix 编译出两套 CSS 变量
Tailwind 默认只生成一套 CSS，但暗黑模式需要两套颜色变量（比如 --bg-primary: #fff 和 --bg-primary: #1e293b）。不能靠 JS 动态改 CSS 变量，那样会 FOUC（闪动），尤其在 SSR 场景下更明显。
很多人试过 @layer dark { .dark\:bg-black { background-color: #000 } }，却发现深色 class 没生效 —— 因为 Tailwind 默认不启用 dark mode 的 class 模式，也没配 media query 触发条件。
- 在
tailwind.config.js中设darkMode: 'class'（不是'media'），这样.dark才会被生成 - 确保编译时启用了所有 dark 变体：
module.exports = { content: ['./resources/**/*.blade.php', './resources/**/*.js'], darkMode: 'class' } - 别在 CSS 里写
@media (prefers-color-scheme: dark)—— 这和darkMode: 'class'冲突，浏览器可能优先响应系统设置而非服务端下发的 class - 如需自定义变量，用
@layer base在css/app.css顶层定义：.dark { --bg-base: #1e293b; }，然后在组件中用bg-base
切换主题时如何避免页面重载或状态丢失
用户点一下“日/夜”按钮就整个页面刷新，体验差，而且表单输入、滚动位置、Modal 状态全丢。必须用 AJAX 切换服务端偏好，再局部更新 DOM，而不是 location.reload()。
容易被忽略的是 CSRF 和响应格式：Laravel 默认返回重定向，但前端 JS 需要 JSON 响应来决定是否更新 class；同时，AJAX 请求若没带 X-XSRF-TOKEN，会 419 错误。
- 后端路由用
POST+@csrf，返回response()->json(['status' => 'ok', 'theme' => $newTheme]) - 前端 fetch 时读
document.querySelector('meta[name="csrf-token"]').content放 header - JS 更新
document.documentElement.classList.toggle('dark', theme === 'dark')，别操作body—— 有些 CSS 依赖:root或html.dark - 切换后调用
localStorage.setItem('theme', theme)仅作降级备份，不作为唯一信源
最麻烦的其实是“系统级暗黑”和“用户手动设置”的优先级冲突。比如用户设了“深色”，但系统是浅色，又开了自动跟随系统 —— 这种逻辑必须在服务端统一裁决，前端只负责呈现，别让它自己猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
