Customization

Custom CSS

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

Learn more about custom CSS in the Starlight documentation.

Cascade layers

Like Starlight, hc-starlight 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 hc-starlight.

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 hc-starlight layers:

src/styles/custom.css

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

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