【问题标题】:Visual Studio Code status bar colorVisual Studio Code 状态栏颜色
【发布时间】:2017-08-04 11:49:40
【问题描述】:

Visual Studio Code 的默认状态栏颜色是蓝色,我觉得它很分散注意力。我使用this 扩展来更改颜色,但在1.10.2 更新后它已停止工作。

【问题讨论】:

  • 对于最近有同样问题的人,请检查我自己对默认主题颜色更改 + 集成 Material Icon 主题安装的谦虚尝试github.com/mostafero/vscode-ubuntu-theme
  • 就个人而言,我什至不想自定义它,我只是想找出颜色的含义。除了 API 参考之外,他们似乎唯一记录紫色是“无文件夹”颜色的地方是 a "Note:" box in the Debugging section,很长 之后,他们还顺便提到了橙色意味着调试。但它从来没有出现在一个地方,也没有给出有限数量的状态 (3)。感觉像是可以存在于某处的信息 HERE

标签: visual-studio-code background-color statusbar


【解决方案1】:

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

"workbench.colorCustomizations": {
    "statusBar.background" : "#1A1A1A",
    "statusBar.noFolderBackground" : "#212121",
    "statusBar.debuggingBackground": "#263238"
}

【讨论】:

  • 这可以动态完成吗? const config2 = vscode.workspace.getConfiguration('workbench.colorCustomizations.statusBar'); config2.update('background', '#1A1A1A'); 好像什么都没做?
  • @TomH 我不是专家,不太确定它是如何“动态地”完成的,但运行Object.assign(vscode.workspace.getConfiguration('workbench.colorCustomizations'), { "statusBar.background" : "#00FF00"}) 给我一个 TypeError 告诉我我们不能分配给只读属性。所以我想使用 getConfiguration 方法不是正确的方法。
  • 这很好,感谢@acesmndr。如此处所述:code.visualstudio.com/docs/getstarted/…,您还可以对用户设置文件主题进行此更改,如下所示:“workbench.colorCustomizations”:{“[Markdown Editor Dark]”:{“statusBar.background”:“#1A1A1A” , "statusBar.noFolderBackground" : "#212121", "statusBar.debuggingBackground": "#263238" } },
  • 非常有帮助的答案@acesmndr
【解决方案2】:
  1. 将为像我这样的菜鸟节省 30 分钟的时间 - 必须在 settings.json 文件中进行编辑。 最简单的访问方法是文件 -> 首选项 -> 设置,搜索“颜色”,选择一个选项“工作台:颜色自定义”->“在 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”。

解决方案已从此处改编:https://code.visualstudio.com/api/references/theme-color#status-bar-colors

【讨论】:

  • 谢谢!有一个直接在 Visual Code 中编辑设置文件的链接是一个很好的节省时间的方法。此外,主题也很容易从设置中的颜色搜索中更改。 Visual Code 是高度可定制的,但与我使用的其他编辑器相比,获得这些设置对我来说有点尴尬。
【解决方案3】:

由于每个主题都如此不同,您可能不想在全局范围内进行这样的更改。相反,请在每个主题的基础上指定它们:例如:

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

这样,当您在最喜欢的主题之间切换时,您对它们的自定义不会被遗忘,并且在这种情况下是有意义的。

【讨论】:

  • 当打开多个 VSCode 实例时,将其应用于工作区设置以区分不同的项目也很棒。还可以更改titleBar.activeBackgroundtitleBar.activeForeground 使其更加明显。
  • 请注意,与其他答案一样,您可能还想设置statusBar.noFolderBackgroundstatusBar.debuggingBackground,否则它们不会受到影响。
【解决方案4】:

这些是我在 macOS 上为工作区(不是全局)设置 VS Code 状态栏颜色所采取的步骤。

查看 |命令面板... |搜索“打开工作区设置 (JSON)”

(这将打开项目 [project-name].code-workspace 文件。)

在设置属性中添加颜色自定义。

{
    "folders": [],
    "settings": {
        "workbench.colorCustomizations": {
            "statusBar.background": "#938e04",
            "statusBar.foreground": "#ffffff"
        }
    }
}

当您打开多个 VS Code 实例并希望在视觉上区分每个窗口而无需更改全局主题时,这非常有用。

【讨论】:

    【解决方案5】:

    在我看来,有一个比上述答案更强大、更强大的解决方案,那就是根据您正在处理的文件更改状态栏颜色 - 它称为 ColorTabs
    它允许您提供一个正则表达式列表并根据它更改该颜色。

    免责声明 - 我编写了扩展程序 享受吧!

    【讨论】:

    • 不错的扩展 - 希望正则表达式在完整路径上工作,这样我就可以区分我所有 VSCode 打开的项目。
    • 它实际上是在完整路径上,但我将其更改为相对路径...也许可以配置
    • 在分支上配置选项卡颜色而不是文件名会很好 - 如果它的开发 -> 绿色,qa -> 橙色,主 -> 红色,其他 -> 默认?
    • 写了一个扩展来解决问题的人比其他重复顶部帖子所说的帖子的票数更少,很好。
    【解决方案6】:

    您可以通过编辑扩展来改变颜色:

     "colors":{
            "statusBar.background": "#505050",
        },
    

    【讨论】:

      【解决方案7】:

      还有一个扩展可用https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock 来更改工作场所的颜色。它允许您为每个 vs 代码实例选择不同的颜色

      【讨论】:

        【解决方案8】:

        我刚刚注册,所以无法直接评论 @HelloWorldDude 的回复,但这正是我想要的:每个工作区使用不同的颜色来快速区分 VS Code 窗口。

        我使用的是代码为 1.63.1 的 Windows 10,每个项目的设置位于项目根目录的 .vscode 文件夹中,文件本身为 settings.json

        对我有用的语法不包括“文件夹”和“设置”,而只是设置块的内容,如下所示:

        {
          "workbench.colorCustomizations": {
              "statusBar.background": "#7c0101",
              "statusBar.foreground": "#ffffff"
          }
        }
        

        【讨论】:

          【解决方案9】:

          打开vscode时按control+shift+p,输入open settings(UI),搜索window.titleBarStyle,将选项从native更改为custom,这样就可以将状态栏的颜色从white恢复为black.

          重要提示:此技术适用于 2019 年 2 月发布的 vscode 更新版本 1.32。请确保您已将 vscode 更新到最新版本 1.32 或更多最新版本,因为它可能不适用于旧版本。

          【讨论】:

          • 不回答问题,与状态栏无关
          • 就像Gal上面说的,标题栏不是状态栏——前者在顶部,后者在底部
          【解决方案10】:

          如果您使用 vimvscode 插件,根据模式更改状态栏颜色的最佳方法是转到设置,搜索“状态栏颜色”并选中“允许 vscode 根据模式更改颜色”

          这是 vimvscode 的插件状态颜色控制的快照:

          【讨论】:

            猜你喜欢
            • 2021-05-10
            • 2018-01-30
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2019-11-25
            相关资源
            最近更新 更多