Customization

Custom CSS

To customize the styles applied to your Starlight site when using starlight-theme-rose-pine, you can provide additional CSS files to modify or extend Starlight and starlight-theme-rose-pine default styles.

Learn more about custom CSS in the Starlight documentation.

Cascade layers

Like Starlight, starlight-theme-rose-pine 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 Starlight and starlight-theme-rose-pine.

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 styles from the starlight and rose-pine layers:

src/styles/custom.css

@layer my-reset, starlight, rose-pine, my-overrides;

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