monaco-editor - 主题：滚动条托盘背景的颜色名称

Question

我正在尝试根据此处指定的颜色名称更改颜色主题。

这对大多数情况都很好，除了我无法更改滚动条托盘的背景颜色：

任何想法元素主题颜色名称是什么？

主题示例：

  /**
   * 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: [...]
  }

标签： monaco-editor

Answer 1

在摩纳哥游乐场用你链接的属性玩了很多之后，我找到了它在哪里。

它实际上需要成为规则的一部分：

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

我准备了一些难看的测试颜色来尝试一下。打开操场并将其替换monaco.editor.defineTheme()为以下内容

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
    }
});