Cannot set background to be theme compatible

[Pizzapops]

I cannot set scrollbar background-color & background-image to use theme variables: (-toolbar-bgcolor) & (--lwt-header-image). I would like to match the background to the background I use with addonbar_vertical.uc.js

• #addonbar_v {
  -moz-appearance: none !important;
  background-color: var(--toolbar-bgcolor);
  background-image: var(--lwt-header-image);
  background-size: 1920px 1024px;
  background-clip: padding-box;
  color: #000000 !important;
  border-right-style: solid;
  border-color: black;
  border-width:1px;
  } \

Method used: M2
Windows 10-64
Firefox 65-2018.11.01

[Aris-t2]

CSS inside js scripts can not get any variables/definitions from browsers main css documents. It does not work like this.

[Pizzapops]

The three addon bar scripts and the space and separator script in CustomJSforFX have these settings:

My old brain doesn't understand. Is it because the scrollbar script is in "strict mode"?

[Aris-t2]

Scrollbar code is neither applied to the DOM (xul, toolbars, buttons [->userChrome.css]) nor webcontent (html sites[->userContent]) and the CSS variables are defined on DOM level in "browser.css" for example.

Mozilla has added some new features so we might be able to style scrollbars through userContent.css after all differently, but I believe this method will not be compatible to custom scrollbar script.
See Aris-t2/CustomCSSforFx#160