General

This plugin mainly makes use of existing Starlight CSS variables to provide an easier out-of-the-box experience for Starlight users.

Warning

If you installed the plugin in an Astro environment without Starlight, you will very likely need to provide your own CSS variables to make the Graph component look nice.

A semi-sane default configuration is provided in the variables section.

Since no !important’s were used in the making of this plugin, you can override all styling of the graph containers, etc. However, you will not be able to target the Graph elements themselves (i.e. nodes, links, labels), as these exist within a <Canvas> context.

An example (unrecommended) override of the CSS would look something like:

src/styles/global.css

:root[data-theme='light'] {
    --slsg-node-color: #00ff0a;
}

:root[data-theme='dark'] {
    --slsg-node-color: #ffea00;
}

.graph-container {
    border: 1px solid red;
}

Cascade Layer

Like Starlight, the Starlight Site Graph package internally makes use of cascade layers 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 sitegraph layer.

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 base Starlight and this package’s styles:

src/styles/custom.css

@layer my-base, starlight, sitegraph, my-overrides;

The example above defines a custom layer named my-base, applied before all the Starlight and the Site Graph’s style layers, and another named my-overrides, applied after all Starlight and Site Graph’s layers. Any styles in the my-overrides layer would take precedence over the Starlight and this package’s layers, but those layers will themselves override any styles set in the my-base layer.

Sections

CSS Variables Configure the CSS variables for the graph and backlinks components.

CSS Structure Learn about the CSS structure of the plugin.