Theme-based scrollbar background colors and sizes are hardcoded in SCSS

[stefcameron]

If an extension needs scrollbars, there is currently no way for it to get the proper colors and sizes because they are hardcoded in SCSS, see

lens/src/renderer/components/mixins.scss

Lines 25 to 32 in 70a8982

	@mixin custom-scrollbar($theme: light, $size: 7px, $borderSpacing: 5px) {
	$themes: (
	light: #5f6064,
	dark: #bbb,
	);
	$scrollBarColor: if(map_has_key($themes, $theme), map_get($themes, $theme), none);
	$scrollBarSize: calc(#{$size} + #{$borderSpacing} * 2);

@mixin custom-scrollbar($theme: light, $size: 7px, $borderSpacing: 5px) {
  $themes: (
    light: #5f6064,
    dark: #bbb,
  );

  $scrollBarColor: if(map_has_key($themes, $theme), map_get($themes, $theme), none);
  $scrollBarSize: calc(#{$size} + #{$borderSpacing} * 2);

The light and dark colors, as well as default size and border width, should be provided as themed CSS Variables:

--scrollbarBackground: <color>;
--scrollbarSize: 7px;
--scrollbarBorderWidth: 5px;

Please remember to add these to the color reference in the docs.