如何修改Laravel 9中Filament 2后台仪表盘的默认颜色

下面提供两种实用的自定义颜色方案，按需选择：

方法1：通过配置文件快速修改基础颜色 #

1. 先发布Filament的配置文件到项目中：

php artisan vendor:publish --tag=filament-config

2. 打开项目根目录下的config/filament.php，找到colors数组，修改对应颜色的十六进制值即可：

'colors' => [
    'primary' => '#2563eb', // 替换成你的主色调
    'secondary' => '#64748b', // 替换成你的次要色调
    'success' => '#10b981',
    'danger' => '#ef4444',
    'warning' => '#f59e0b',
    'info' => '#3b82f6',
    'gray' => '#6b7280',
],

3. 清除配置缓存使修改生效：

php artisan optimize:clear

方法2：自定义主题实现深度颜色定制（推荐） #

如果需要更灵活的颜色控制（比如自定义颜色深浅层级、覆盖全局样式），可以创建自定义Filament主题：

1. 生成自定义主题文件：

php artisan make:filament-theme admin

执行后会在resources/css/filament/admin目录下生成主题相关文件，同时在tailwind.config.js中自动注册该主题。

2. 修改主题颜色配置
   打开resources/css/filament/admin/theme.css，可以直接通过CSS变量覆盖Filament的默认颜色：

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    /* 覆盖主色调及各深浅层级 */
    --primary: #165DFF;
    --primary-50: #E8F3FF;
    --primary-100: #D0E7FF;
    --primary-200: #A7D3FF;
    --primary-300: #7FBFFF;
    --primary-400: #56A8FF;
    --primary-500: #2D91FF;
    --primary-600: #165DFF;
    --primary-700: #0F45CC;
    --primary-800: #092D99;
    --primary-900: #031466;

    /* 按需覆盖其他颜色变量，比如secondary、success等 */
    --secondary: #6B7280;
}

也可以在tailwind.config.js的theme.extend.colors中定义自定义颜色，再关联到Filament：

module.exports = {
    content: [
        // ... 已有内容
        './resources/css/filament/admin/**/*.css',
    ],
    theme: {
        extend: {
            colors: {
                custom-primary: {
                    50: '#E8F3FF',
                    100: '#D0E7FF',
                    // ... 其他层级
                    900: '#031466',
                },
            },
        },
    },
    // ... 已有内容
}

然后回到config/filament.php，将colors.primary设置为custom-primary即可。

3. 编译前端资源
   修改完成后，编译CSS使主题生效：

npm run dev
# 生产环境使用
npm run build

注意事项 #

• 修改配置文件后务必清除缓存，否则可能看不到变化
• 自定义主题时，确保所有颜色层级都正确定义，避免出现样式断层
• 如果使用自定义主题，需要确保Filament的配置文件中theme项设置为你创建的主题名称（比如admin）

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