title: Change ion-progress-bar background color
body: <p>I recently switched to Ionic 4 and I'm having some troubles with the SCSS.</p>
  
  <p>I have a very basic home page : </p>
  
  <pre><code>&lt;ion-content padding&gt;
  
    &lt;div class="quizz-progress ion-text-center"&gt;
      &lt;ion-progress-bar value="0.4"&gt;&lt;/ion-progress-bar&gt;
    &lt;/div&gt;
  
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>And I would like to set a custom background color for my progress bar without using primary colors set in variable.scss</p>
  
  <p>I saw while running the app that this is the result HTML inside the <strong>ion-progress-bar</strong></p>
  
  <pre><code>&lt;div class="progress" style="transform: scaleX(0.4);"&gt;&lt;/div&gt;
  &lt;div class="progress-buffer-bar" style="transform: scaleX(1);"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>These elements are inside a shadow root, and I understood that using a simple <code>background-color: red</code> in my SCSS wouldn't work.</p>
  
  <p>Here is what I did in my SCSS file : </p>
  
  <pre><code>.quizz-progress{
      ion-progress-bar{
          .progress{
              --background-color: var(--ion-color-primary);
          }
          .progress-buffer-bar{
              --background-color: var(--ion-color-light);
          }
      }
  }
  </code></pre>
  
  <p>But this has no effect. How could I change the color of the progress bar without using the <code>color</code> attribute ? Thank you in advance for any help</p>