title: Customize Background in Shopify Section (Dawn Theme)
body: <p>I would like to create three versions of backgrounds that can be set via the section-settings in the Shopify Dawn Theme.</p>
  <p>current looks
  [1]: <a href="https://i.stack.imgur.com/SJWZQ.png" rel="nofollow noreferrer">https://i.stack.imgur.com/SJWZQ.png</a></p>
  <p>The default theme.liquid defines some global variables:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> --color-base-background-1: 
   {{ settings.colors_background_1.red }}, 
   {{ settings.colors_background_1.green }}, 
   {{ settings.colors_background_1.blue }};
          </code></pre>
  </div>
  </div>
  </p>
  <p>This is accessed at various places in the base.css file</p>
  <p>Example:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.color-background-1 {
   --color-foreground: var(--color-base-text);
   --color-background: var(--color-base-background-1);
   --gradient-background: var(--gradient-base-background-1); 
  } </code></pre>
  </div>
  </div>
  </p>
  <p>Now I would like to use these global variable also in the respective section.css</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.background-none{
    color: var(--color-base-background-1);
    background: green;
   }</code></pre>
  </div>
  </div>
  </p>
  <p>However this does not produce any results as soon as I use the variable. The color &quot;green&quot; works fine, however the font color does not change as long as I try to use the variable.</p>
  <p>Does anyone have an idea how to address this issue?</p>