Customization

Custom CSS

To customize the styles applied to your Starlight site when using the Starlight Black theme, you can providing additional CSS files to modify or extend the Starlight and the Starlight Black theme default styles.

Learn more about custom CSS in the Starlight documentation.

Cascade layers

Like Starlight, the Starlight Black theme uses cascade layers internally to manage the order of its styles. This ensures a predictable CSS order and allows for simpler overrides. Any custom unlayered CSS will override the default styles from the starlight and black layers.

If you are using cascade layers, you can use @layer in your custom CSS to define the order of precedence for different layers relative to the Starlight and Starlight Black theme styles:

src/styles/custom.css

@layer my-reset, starlight, black, my-overrides;

The example above defines a custom layer named my-reset, applied before all the Starlight and Starlight Black theme layers, and another named my-overrides, applied after all Starlight and Starlight Black theme layers. Any styles in the my-overrides layer would take precedence over the Starlight and Starlight Black theme styles, but Starlight or the Starlight Black theme could still change styles set in the my-reset layer.

Tailwind CSS

Following the Tailwind CSS installation guide.

Hello World!

<button class="rounded-full bg-cyan-500 px-4 py-2 text-sm font-semibold text-white">
  Hello World!
</button>