logo标签列表

Visual Studio Code 状态栏颜色

visual-studio-codebackground-colorstatusbar
156

Visual Studio Code默认的状态栏颜色是蓝色，我觉得很分散注意力。我使用了这个扩展程序来改变颜色，但在版本1.10.2更新后它停止工作了。

对于最近有同样问题的人，请查看我自己对默认主题颜色更改和整合Material Icon主题安装的尝试：https://github.com/mostafero/vscode-ubuntu-theme - Mostav
1
个人而言，我甚至不想自定义它，我只是想找出这些颜色的含义。除了 API 参考之外，他们唯一似乎记录紫色是“无文件夹”颜色的地方是调试部分的“注意：”框，在此之后他们也顺便提到橙色表示调试。但它从未在一个地方呈现，或者给出有限数量的状态（3）。感觉这是可以放在这里的信息。 - FeRD
要了解如何在调试时关闭状态栏颜色的更改，请参见 https://stackoverflow.com/a/74779671/836330。将 debug.enableStatusBarColor 设置为 false。 - Mark
11个回答
287

您可以通过编辑用户设置并添加以下代码行来更改状态栏的颜色：

"workbench.colorCustomizations": {
    "statusBar.background" : "#1A1A1A",
    "statusBar.noFolderBackground" : "#212121",
    "statusBar.debuggingBackground": "#263238"
}
这可以动态完成吗？const config2 = vscode.workspace.getConfiguration('workbench.colorCustomizations.statusBar'); config2.update('background', '#1A1A1A'); 似乎没有任何作用？ - Tom
@TomH 我不是专家，也不太确定如何“动态”完成，但运行 Object.assign(vscode.workspace.getConfiguration('workbench.colorCustomizations'), { "statusBar.background" : "#00FF00"}) 会给我一个 TypeError，告诉我我们不能分配到只读属性。所以我猜使用 getConfiguration 方法并不是正确的方法。 - acesmndr
3
感谢@acesmndr，这个方法很好用。如此描述：https://code.visualstudio.com/docs/getstarted/themes#_customizing-a-color-theme，你也可以通过修改用户设置文件中的主题来实现特定的颜色自定义，方法如下： "workbench.colorCustomizations": { "[Markdown Editor Dark]": { "statusBar.background" : "#1A1A1A", "statusBar.noFolderBackground" : "#212121", "statusBar.debuggingBackground": "#263238" } }, - Walton
1
真的很有帮助的回答 @acesmndr - Akhila
但是，当我将主题更改为暗色时，如何使它自动切换回暗色？更新：没关系，我刚看到shacker的答案。 - tolache
126

  1. 我将会为像我这样的新手省下30分钟的时间 - 这需要在 settings.json 文件中进行编辑。最简单的访问方式是通过菜单命令 文件 → 首选项 → 设置，搜索“Color”，选择选项“工作台：颜色自定义” → “在 settings.json 中编辑”。

  2. 这使用了Gama11提出的解决方案，但注意：
    在settings.json文件中代码的最终形式应该像这样 - 注意双重大括号包围“workbench.colorCustomizations”:

 {
   // fontSize just for testing purposes, commented out.
   //"editor.fontSize" : 12

   // StatusBar color:
      "workbench.colorCustomizations": {
      "statusBar.background" : "#303030",
      "statusBar.noFolderBackground" : "#222225",
      "statusBar.debuggingBackground": "#511f1f"
     }
 }

复制/粘贴上述代码后，按下Ctrl+S保存更改至"settings.json"。

本解决方案改编自状态栏颜色。

谢谢！在 Visual Code 中直接编辑设置文件的链接是一个不错的时间节省器。此外，从设置中的颜色搜索更改主题也很容易。Visual Code 高度可定制，但与我使用过的其他编辑器相比，访问这些设置有点棘手。 - John Suit
33

由于每个主题都非常不同，您可能不希望在全局范围内进行此类更改。相反，请基于每个主题指定它们，例如：

"workbench.colorCustomizations": {
    "[Some Theme Name]": {
        "statusBar.background" : "#486357",
        "statusBar.foreground" : "#c8e9c5",
    },
    "[Some Other Theme Name]": {
        "statusBar.background" : "#385357",
        "statusBar.foreground" : "#d7e9c4",
    }
},

这样当您在喜爱的主题之间切换时，它们的自定义内容将不会被遗忘，并且将在该上下文中有意义。

3
在打开多个 VSCode 实例的情况下，将此应用于工作区设置以区分不同的项目也是非常好的。您还可以更改 titleBar.activeBackground 和 titleBar.activeForeground，使其更加明显。 - Qwerty
1
请注意，与其他答案一样，您可能还想设置 statusBar.noFolderBackground 和 statusBar.debuggingBackground，否则它们不会受到影响。 - lapis
11
这是我在macOS上为工作区（而不是全局）设置Visual Studio Code状态栏颜色所采取的步骤。
菜单 视图 → 命令面板... → 搜索"打开工作区设置（JSON）"。
（这将打开项目 [project-name].code-workspace 文件。）
在设置属性中添加颜色自定义。
{
    "folders": [],
    "settings": {
        "workbench.colorCustomizations": {
            "statusBar.background": "#938e04",
            "statusBar.foreground": "#ffffff"
        }
    }
}

这在你打开多个 Visual Studio Code 实例并且想要在视觉上区分每个窗口而不必更改全局主题时非常有用。
如果你没有定义工作区，Visual Studio Code 将在执行“打开工作区设置（JSON）”命令时打开 `.vscode/settings.json` 文件。
如果是这种情况，你可以直接输入工作台的自定义内容：
{
   "workbench.colorCustomizations": {
        "statusBar.background": "#938e04",
        "statusBar.foreground": "#ffffff"
    }
}
5

在我的看法中，有一个比前面提到的更强大、更健壮的解决方案，那就是根据你正在处理的文件改变状态栏的颜色——它叫做ColorTabs，它允许你提供一系列正则表达式，并基于此改变颜色。

声明——我是这个扩展的作者。

1
不错的扩展 - 希望正则表达式可以作用于完整路径，这样我就可以区分所有打开的VSCode项目了。 - cyberwombat
1
实际上它是使用完整路径的，但我将其更改为相对路径...也许可以进行配置。 - orepor
2
这样配置分支标签颜色会很好，而不是文件名 - 如果是develop -> 绿色，qa -> 橙色，master -> 红色，其他 -> 默认？ - Johan Aspeling
1
那个编写了一个解决问题的扩展程序的人所获得的投票比那些重复顶级帖子内容的其他帖子少，真是有趣。 - a.anev
3
我刚注册，无法直接评论 HelloWorldDude的回答，但这正是我所需：每个工作区使用不同的颜色快速区分 Visual Studio Code 窗口。
我使用的是 Windows 10 操作系统和 Visual Studio Code 1.63.1 版本。项目层级的设置位于项目根目录下的 .vscode 文件夹中，文件名为 settings.json。
我的语法不包括 "folders" 和 "settings"，而只是设置块内的内容，如下所示：
{
  "workbench.colorCustomizations": {
      "statusBar.background": "#7c0101",
      "statusBar.foreground": "#ffffff"
  }


}
相关：*为什么我需要50个声望才能发表评论？我可以做些什么替代方案？*。 - Peter Mortensen
2

还有一个扩展程序可用，孔雀，可以改变工作区的颜色。它允许您为每个Visual Studio Code实例选择不同的颜色。

2

您可以通过编辑扩展来更改颜色：

 "colors":{
        "statusBar.background": "#505050",
    },
“by edit extensions” 是什么意思？是哪个菜单命令？是哪个文件？在哪里？ - Peter Mortensen
可能是对文件“settings.json”的引用。 - Peter Mortensen
此文已被J.Paul的答案取代，其中包含了所有的指令和其他信息。 - Peter Mortensen
0

如果您正在使用Vim插件, 改变状态栏颜色的最佳方法是进入设置, 搜索 "status bar color" 并勾选 "允许 Visual Studio Code 根据模式改变颜色"

以下是Vim插件状态颜色控制的快照:

Snapshot

0

Visual Studio 1.75（2023年1月）将提供一个新选项，来源于问题155294：

我正在成为我们调试器的高级用户（是的，终于）。
这意味着在大多数“VS Code时间”中，我都在运行或连接某种类型的调试程序。

因此，我经常看到丑陋的橙色调试状态栏处理。
我不喜欢它，对我来说，只看到activitybar图标装饰就足够了。

现在有一个专门的设置（PR 168513），而不是在workbench.colorCustomizations中设置statusBar.debuggingBackground：

debug.enableStatusBarColor：当调试器处于活动状态时，颜色状态栏

这在VSCode内部人员今天可用。

这也在Mark的“{{link1:如何防止Visual Studio Code在运行任何Java文件时更改状态栏颜色为橙色}”中提到。

请参考以下翻译：同样的内容：https://stackoverflow.com/a/74779671/836330 - Mark
@Mark 谢谢你的更新。我已经在我的答案中交叉参考了你的回答。 - VonC
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接