Use the `inverted` attribute when displayed on primary background.

```html
<div class="p-4 bg-primary">
  <div class="max-w-[300px]">
    <sd-progress-bar inverted value="35" max="100"></sd-progress-bar>
  </div>
</div>
```