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

Question

我正在使用 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设置颜色值来动态改变颜色？

Answer 1

你没有说你是否需要它们用于前端或 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 包中的代码。您可以创建一个也接受自定义颜色并与社区共享的组件:)

Answer 2

使用 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) ',
  },
 },

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

How can the css variable from be changed dynamically from `Laravel Nova`?

css

inertiajs

laravel

tailwind-css

laravel-nova