如何在Laravel Nova中动态修改CSS变量，调用Nova Settings配置的色值？

解决方案 #

因为静态CSS文件无法直接调用PHP侧的nova_get_setting方法，你可以通过以下两种常用方案实现CSS变量动态注入：

方案1：页面头部内嵌覆盖样式（推荐，实现最简单）

直接在项目的全局Blade模板（通常是resources/views/layouts/app.blade.php）的<head>标签中插入一段内嵌样式，将后端读取到的配色值注入到CSS变量中，优先级会高于你静态CSS文件里的默认定义：

<head>
    <!-- 其他原有头部内容，比如meta、标题等 -->
    <style>
        :root {
            --primary-color: {{ nova_get_setting('primary_color', 'rgb(255, 0, 0)') }};
            --secondary-color: {{ nova_get_setting('secondary_color', 'rgb(255, 197, 6)') }};
        }
    </style>
    <!-- 你的静态CSS文件引入代码要放在这段内嵌样式的后面，确保注入的变量能覆盖默认值 -->
    <link rel="stylesheet" href="{{ asset('css/your-stylesheet.css') }}">
</head>

其中nova_get_setting的第二个参数是兜底默认值，避免配置未读取成功时样式出错。

方案2：动态生成CSS路由

如果不希望在HTML中内嵌样式，你可以新增一个专门返回动态CSS的路由，服务端渲染好变量值后再返回CSS内容：

1. 在routes/web.php中添加路由定义：

Route::get('/dynamic-theme.css', function () {
    $primary = nova_get_setting('primary_color', 'rgb(255, 0, 0)');
    $secondary = nova_get_setting('secondary_color', 'rgb(255, 197, 6)');
    
    $cssContent = <<<CSS
    :root {
        --primary-color: {$primary};
        --secondary-color: {$secondary};
    }
    CSS;

    return response($cssContent, 200)
        ->header('Content-Type', 'text/css')
        ->header('Cache-Control', 'public, max-age=3600'); // 可按需加缓存配置
});

2. 在Blade模板的头部引入这个动态CSS资源即可，同样要放在你的静态CSS文件之前加载，确保变量生效：

<link rel="stylesheet" href="/dynamic-theme.css">
<link rel="stylesheet" href="{{ asset('css/your-stylesheet.css') }}">

注意事项 #

nova-color-field默认返回的是带#前缀的十六进制色值，CSS本身兼容十六进制、RGB、RGBA等多种格式，不需要额外做格式转换。如果你的配置返回的色值不带#，可以在输出时补充前缀：

--primary-color: #{{ ltrim(nova_get_setting('primary_color'), '#') }};

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