主题:滚动条托盘背景的颜色名称

时间:2018-08-17 21:43:44

标签: monaco-editor

我正在尝试根据颜色名称specified here更改颜色主题。

除了大多数情况下,滚动条托盘的背景色都无法更改之外,这一切都可以正常工作

Colors

有什么想法,这些元素的主题颜色名称是什么?

主题示例:

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

1 个答案:

答案 0 :(得分:0)

Monaco Playground中使用链接中的属性进行了很多试验之后,我发现它在哪里。

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

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

我准备了一些难看的测试色来进行尝试。打开playground,并用以下内容替换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
    }
});

A gif demonstrating the above example