我正在尝试根据颜色名称specified here更改颜色主题。
除了大多数情况下,滚动条托盘的背景色都无法更改之外,这一切都可以正常工作
有什么想法,这些元素的主题颜色名称是什么?
主题示例:
/**
* 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: [...]
}
答案 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
}
});