Closed pavanpodila closed 1 week ago
Thanks for the feedback :raised_hands:
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:
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.
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