如何访问/覆盖“ vs-dark”或“ vs” ui主题颜色

Question

当VSCode将主题仅分为两个uiTheme时，存在一些严格的主题限制： “ vs ”（针对所有浅色主题）或“ vs-dark ”（针对所有深色主题）。

这不允许人们制作不属于这两个类别的VSCode颜色主题。我想知道如何通过自定义扩展访问和覆盖uiTheme颜色以允许更多有趣的颜色主题。也许可以通过自定义CSS来完成？如果是这样，我希望有人能给我一个例子。

编辑：该资源似乎存储在：

C:/Users/micha/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/workbench/workbench.main.css

似乎我需要带有vscode-custom-css扩展名的CSS。但是，我不知道如何确定要自定义的资源的名称。我知道我可能需要在VSCode中使用开发人员模式。但是，我不知道该怎么办。

Answer 1

我能够弄清楚这一切。我尝试了vscode-custom-css和vscode-vibrancy VScode扩展，它们都允许我注入自己的自定义CSS代码，以将通常无法自定义的部分修改为VSCode。我首先替换了VSCode的代码折叠图标。然后，我最终使用了Vibrancy扩展程序的代码，因为它没有像其他扩展程序那样在VSCode中生成“损坏的安装”消息。另外，它还具有Vibrancy（模糊透明）功能。然后，我将该代码（MIT开源）集成到了自己的主题扩展中。

我使用VSCode的Developer模式检查其现有CSS；然后，制作一个自定义CSS。下面是我使用的CSS：

body {
  background: transparent !important;
}
.monaco-editor.vs-dark .margin-view-overlays .folding,
body {
background-image: url(../themes/images/arrow_down.png);
}
.monaco-editor.vs-dark .margin-view-overlays .folding.collapsed,
body {
background-image: url(../themes/images/arrow_right.png);
}

.monaco-editor .inline-folded,
body {
background-image: url(../themes/images/fold.png);
}

这是我的VSCode扩展的链接：

MKANET Theme V2

Answer 2

对于custom themes，dark与light的含义主要是：

• 已使用的theme colors的基本集。自定义主题会覆盖这些基本颜色

• 要使用的图标变体（在较暗的背景下相对于为较亮的背景光而设计的图标而言，效果更好）。主题也可以自定义一些图标颜色

• 用户选择主题时列出了哪个类别主题（dark与light）

但是dark与light决不限制自定义主题可以或不能使用的颜色。例如，light主题可以将每种UI颜色设置为各种深灰色阴影，也可以使用霓虹色彩虹。

简而言之：除了dark或light之外，您无需创建新的主题类别，也无需使用自定义CSS。