Switch light/dark background color for sidebar-scroll

[edgarriba]

Hi - is it possible to overwrite for light/dark mode the background-color of the sidebar-scroll ?

Now I do directly on the css but only for light

.sidebar-scroll p.caption{
    background-color: #4d59ff;
}

see results (I would like to make the dark less colorful)

[pradyunsg]

The default styling doesn't have any background on the caption and the sidebar has a "fun" padding story (which is thanks to the scrollbars on various platforms) -- anyway, that's why there's no CSS variables provided for it and also why I don't intend to provide any.

is it possible to overwrite for light/dark mode the background-color of the sidebar-scroll ?

Yes, you can write your own CSS that does this FWIW; modelled after how Furo handles it's own CSS declarations:

furo/src/furo/theme/furo/partials/_head_css_variables.html

Lines 14 to 26 in 5cdb35c

	<style>
	body {
	{{ declare_css_variables(theme_light_css_variables, furo_pygments.light) }}
	}
	body[data-theme="dark"] {
	{{ declare_css_variables(theme_dark_css_variables, furo_pygments.dark) }}
	}
	@media (prefers-color-scheme: dark) {
	body:not([data-theme="light"]) {
	{{ declare_css_variables(theme_dark_css_variables, furo_pygments.dark) }}
	}
	}
	</style>

The caveats in https://pradyunsg.me/furo/stability/#undocumented-unstable-customisations will apply though -- I won't actively try to break this, but I also don't promise that it won't break. :)

[edgarriba]

thanks for the answer !