How do I change colors for accents ?

[pavanpodila]

Describe the bug

I love the theme and would like to change the accent color ? Is there an easy way to set the variable or update some config ? I could not find a direct way to do this.

To Reproduce

No easy way to change accent color

Expected behavior

There should be some config to change colors

How often does this bug happen?

Every time

System Info

No response

Additional Context

No response

[HiDeoo]

Thanks for the feedback 🙌

At the moment, customization can be done by using Starlight custom CSS and overriding some CSS variables or classes. In the case of the accent colors, the 3 main variables would be --sl-color-accent-low, --sl-color-accent, and --sl-color-accent-high (you can find a complete list here).

Altho, until Cascade Layers are supported by Starlight (currently WIP), you may need to trick the specificity of the CSS selectors to override the default values set by the theme. For example, you can use :root:is(:root) instead of :root to increase the specificity of the selector.

:root:is(:root),
::backdrop:is(::backdrop) {
  --sl-color-accent-low: red;
  --sl-color-accent: red;
  --sl-color-accent-high: red;
}

The above CSS will override the accent colors to red:

[pavanpodila]

Awesome ...thanks so much for the direction @HiDeoo ...been following your work and its inspiring! BTW, I am converting some of my websites and apps to adopt Astro as the core framework ... been going great so far.