Theme: color name for scrollbar tray background

Question

I'm trying to change the color theme based on color names specified here.

This is working fine for most everything, except I can't get the backdrop color of the scrollbar tray to change:

Any ideas what that elements theme color name is?

Theme example:

  /**
   * List of colors:
   *  https://github.com/Microsoft/monaco-editor/blob/master/test/playground.generated/customizing-the-appearence-exposed-colors.html
   */
  export type Theme = monaco.editor.IStandaloneThemeData;

  const BG = '#202634';
  const BG_SELECTION = '#394050';
  const BG_GUTTER = '#262C3A';

  export const dark: Theme = {
    base: 'vs-dark',
    inherit: true,
    colors: {
      'editor.foreground': '#F8F8F2',
      'editor.background': BG,
      'editor.selectionBackground': BG_SELECTION,
      'editor.lineHighlightBackground': BG_SELECTION,
      'editorCursor.foreground': '#F8F8F0',
      'editorWhitespace.foreground': '#3B3A32',
      'editorIndentGuide.activeBackground': '#9D550F',
      'editor.selectionHighlightBorder': '#222218',

      'editorGutter.background': BG_GUTTER,

      'scrollbarSlider.shadow': BG,
      'scrollbarSlider.background': BG,
      'scrollbarSlider.activeBackground': BG_GUTTER,
      'scrollbarSlider.hoverBackground': '#2B313E',
    },
    rules: [...]
  }

Answer 1

Use minimap.background property in your custom theme config:

monaco.editor.defineTheme("drake", {
  base: "vs-dark",
  inherit: true,
  colors: {
      "editor.foreground": "#f6f8fa",
      "editor.background": "#0a090e",
      "minimap.background": "#0a090e",
    },
  });
}

Answer 2

After a lot of playing around in the Monaco Playground with the properties from your link, I found where it is.

It actually needs to be part of the rules:

rules: [
        { background: '#00FF00' }
],

I prepared some ugly test colors to try it out. Open the playground and replace the monaco.editor.defineTheme() with the following

monaco.editor.defineTheme('myCoolTheme', {
    base: 'vs',
    inherit: true,
    rules: [
        { background: '#00FF00' } // green <- this is the property! background of right part (scrollbar)
    ],
    colors: {
        'editorGutter.background': "#FF0000", // red left part (gutter)
        'editorLineNumber.foreground': '#00FF00', // green line numbers in the left part (gutter)
        'scrollbar.shadow': '#0000FF', // blue shadow of right part (scrollbar)
        'scrollbarSlider.background': '#FFFFFF', // white slider when you mouse is on the right part (scrollbar)
        'scrollbarSlider.hoverBackground': '#CCCCCC', // gray slider when your mouse is on the slider itself
        'scrollbarSlider.activeBackground': '#000000', // black slider when you are dragging the slider itself
        'editor.background': '#CCCCCC' // gray middle part background
    }
});