Laravel 10+Breeze已启用深色模式，如何切换为浅色模式？

以下是具体操作步骤：

1. 重新编译前端资源
   你已经在tailwind.config.js中正确设置了darkMode: 'class'，但修改配置后必须重新编译资源才能生效：

   npm run dev
   # 生产环境请执行 npm run build
   

2. 修改根布局模板强制浅色模式
   打开resources/views/layouts/app.blade.php，找到根<html>标签的class属性，替换掉原来的深色模式检测逻辑：

   • 原代码通常类似：

     <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="{{ request()->cookie('dark_mode') ? 'dark' : '' }}">
     

   • 修改为固定的浅色模式：

     <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     

     也可以明确添加light类确保生效：

     <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="light">
     

3. 强制刷新页面清除缓存
   浏览器可能缓存了旧的CSS资源，按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，确保新样式加载。

4. 移除深色模式切换按钮（可选）
   如果不需要切换功能，可删除布局中对应的按钮代码，通常在导航栏区域，类似：

   <button type="button" class="...">
       {{ __('Toggle dark mode') }}
   </button>
   

内容的提问来源于stack exchange，提问作者Samuel Ivan