Starlight | modifying --sl-color-bg-nav doesn't change navbar background color.

[analog vessel]

Hi, I'm using starlight and want to customize it a bit. I did some overrides with layers, it works well, but for some reason, when I modify --sl-color-bg-nav and put a new color for the variable, it doesn't change the navigation bar color. Not sure why though..

My css looks like this:

@layer starlight, rapide, hardsploit;

@layer hardsploit {
    :root,
    ::backdrop {
        --sl-color-bg: #2d2d2d;

        --sl-color-bg-nav: #212121;
        --sl-color-bg-sidebar: #212121;

        --sl-color-accent-low: orange;
        --sl-color-accent: orange;
        --sl-color-accent-high: orange;
    }

    .sl-link-button {
        &.primary {
            border-color: orange;
            color: orange;

            &:is(:hover, :focus-visible) {
                border-color: orange;
                color: orange;
            }
        }
    }
}

Note that it works for the other variables, I do get another sidebar bg color etc. just not for the navbar. Any ideas what the issue might be?

[sour kestrel]

Hi @analog vessel
Have you followed these steps to add custom styles to Starlight?

[analog vessel]

hi, I did. PS: the other variable overrides work, it's really for the specific --sl-color-bg-nav where I expect the color to change too.

[sour kestrel]

Right,
When using the inspector tools in our devtools, what style gets applied where you expect --sl-color-bg-nav to change? There must be another declaration superseding yours.

[winged fossil]

I see that you use the Rapide theme from HiDeoo. This theme sets the background color to another variable as you can see here: https://github.com/HiDeoo/starlight-theme-rapide/blob/main/packages%2Fstarlight-theme-rapide%2Fstyles%2Fbase.css#L8

Could you please try to override this variable instead with your custom color and see if it works that way?

basically:

--sl-rapide-ui-header-bg-color: #212121;

[winged fossil]

^^ @analog vessel 😉

[analog vessel]

that indeed made the trick, thanks!!

sorry for the late response, I don't get any notifs without pings so ty for pining me 😄

marking this as solved 😄