CSS Customization

Starlight exposes --sl-* CSS variables and accepts project styles through the customCss configuration. This site replaces the accent palette and adds the reusable class below in src/styles/custom.css.

This box is styled by project CSS.

:root {
  --sl-color-accent: #a66cff;
}

For structural changes, the components option can replace named Starlight theme components. This sample leaves those components untouched so its header uses Starlight’s standard layout.