如何从`Laravel Nova`动态更改css变量？答案

【问题标题】：How can the css variable from be changed dynamically from `Laravel Nova`?如何从`Laravel Nova`动态更改css变量？
【发布时间】：2022-01-09 13:32:48
【问题描述】：

我正在使用Nova Settings 其中一个使用了Color picker 字段。

NovaServiceProvider-

\OptimistDigital\NovaSettings\NovaSettings::addSettingsFields([
            Panel::make('Colors', [
                Color::make('Primary color')->slider(),
                Color::make('Secondary color')->slider(),
            ]),
        ]);

$primary-color = nova_get_setting('primary_color');

在我的 CSS 文件中 -

:root {
    --primary-color: rgb(255, 0, 0); //want the nova color setting to be used here
    --secondary-color: rgb(255, 197, 6);
  }

如何在 CSS 文件中调用 Nova 设置颜色值来动态改变颜色？

【问题讨论】：

标签： css laravel tailwind-css laravel-nova inertiajs

【解决方案1】：

使用Nova Settings 其中一个使用了Color picker 字段。

在 app.blade.php -

  <style>
    <?php
    $primaryColor = nova_get_setting('primary_color');
    $secondaryColor = nova_get_setting('secondary_color');
    ?> :root {
      --primary-color: <?php echo $primaryColor ?>;
      --secondary-color: <?php echo  $secondaryColor ?>;
    }
  </style>

在tailwind.config.js -

 theme: {       
  colors: {
   'primary-color': 'var(--primary-color)',
   'secondary-color':'var(--secondary-color) ',
  },
 },

【讨论】：

【解决方案2】：

您没有说前端或 Nova 仪表板是否需要它们，所以我将列出这两个过程。

前端：

// File: master.blade.php 
// Or the name of the main blade you extend, 
// if you haven't you will need to change the code on all blades

// Step 1: Add variable settings to the "master blade"
// Pro tip: it's nice to have a global variable with this info ;)
@php
    $settings = Config::get(‘YOUR_SETTINGS’);
@endphp

/* TAGs FOR TITLE, SEO, OTHER CSS FILES, ALL YOU NEED   */

// Step 2: 
<style>

    // If you have problems and don't see any changes, 
    // you can try, even if I don't like it as an idea, the "!important"
    :root {
        --primary-color: {{$settings['COLOR_FIELD_NAME']}};
        --secondary-color: {{$settings['COLOR_FIELD_NAME']}};
    }
 </style>
<body>
/* REST OF CODE */

仪表板新星：

我认为你应该改变主题，也许在保存新颜色时创建（或更新）它（你可以使用Observer）。 This is the link of the official doc 这肯定比我在这里写的要完整得多。

如果你愿意贡献，那就太好了

如果你愿意，你可以 fork 写在 David Griffiths' Nova-Dark-Theme 包中的代码。您可以创建一个也接受自定义颜色并与社区共享的组件:)

【讨论】：