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

```html
<div class="bg-primary p-8">
  <sd-carousel inverted>
    <sd-carousel-item>
      <div class="slot slot--border slot--text slot--inverted h-16">Default slot 1</div>
    </sd-carousel-item>
    <sd-carousel-item>
      <div class="slot slot--border slot--text slot--inverted h-16">Default slot 2</div>
    </sd-carousel-item>
    <sd-carousel-item>
      <div class="slot slot--border slot--text slot--inverted h-16">Default slot 3</div>
    </sd-carousel-item>
  </sd-carousel>
</div>
```