title: Changing editor colors with custom Customizer options
body: <p>I'm trying to create a featured that will allow me to used a Customizer color picker to change my var(--bs-primary) variable in the live customizer view, editor view, and front end. So far it works in the live customizer and the front end but the editor is not.</p>
  <p>Theme: Roots/Sage 10</p>
  <p>Here is my color section of theme.json:</p>
  <pre><code>&quot;color&quot;: {
        &quot;palette&quot;: [
          {
            &quot;slug&quot;: &quot;primary&quot;,
            &quot;color&quot;: &quot;var(--bs-primary)&quot;,
            &quot;name&quot;: &quot;Primary&quot;
          },
          {
            &quot;slug&quot;: &quot;secondary&quot;,
            &quot;color&quot;: &quot;var(--bs-secondary)&quot;,
            &quot;name&quot;: &quot;Secondary&quot;
          }
        ],
        &quot;custom&quot;: false,
        &quot;customGradient&quot;: false,
        &quot;defaultPalette&quot;: false,
        &quot;defaultGradients&quot;: false
      },
  </code></pre>
  <p>Here is my functions.php custom Customizer settings:</p>
  <pre><code>function theme_bootstrap_customizer($wp_customize){
      //adding section in wordpress customizer   
      $wp_customize-&gt;add_section('bootstrap_colors_section', array(
          'title' =&gt; 'Subsite Settings Section'
      ));
  
      //adding setting for subsite theme color picker
      $wp_customize-&gt;add_setting('site_color', array(
          'default'   =&gt; '#000000',
          'type' =&gt; 'theme_mod',
      ));
      $wp_customize-&gt;add_control( 
          new WP_Customize_Color_Control( 
              $wp_customize, 'site_color_control', array(
                  'label' =&gt; 'Site Color',
                  'section' =&gt; 'bootstrap_colors_section',
                  'settings'=&gt; 'site_color',
      )));
  }
  
  add_action('customize_register', 'theme_bootstrap_customizer');
  </code></pre>
  <p>And to overwrite the default --bs variables I added this in my php template which adds the override to every page on the website (besides the editor I guess?)</p>
  <pre><code>&lt;style&gt;
        :root {
          --bs-primary: &lt;?php echo get_theme_mod('site_color'); ?&gt; !important;
          --primary-color: &lt;?php echo get_theme_mod('site_color'); ?&gt; !important;
          --bs-primary-rgb: &lt;?php
            $hex = get_theme_mod('site_color');
            list($r, $g, $b) = sscanf($hex, &quot;#%02x%02x%02x&quot;);
            echo &quot;$r, $g, $b&quot;;
          ?&gt; !important;
        }
      &lt;/style&gt;
  </code></pre>
  <p>So pretty much what I can tell is that the editor isn't applying the override I have set in the php template head. Is there some way to add PHP code that has my css variables in it to the head of the editor so it has the same --bs override?
  Thanks in advance and please let me know if I can clarify anything further.enter code here</p>