---
title: VSCode Status Bar Ricing
date: 2025-10-06
cover: https://assets.vluv.space/cover/vsc_status_bar.avif
tags: [CSS, Ricing, Catppuccin, VSCode, Vim]
excerpt: 近期重新美化了VSCode的状态栏(Status Bar)，记录一下
---

## Install

主要使用到Custom UI Style插件，通过该插件为VSCode插入自定义CSS

个人编写的CSS中使用了部分非内置的字体，需自行安装，包括SF Pro(San Francisco)和Maple Mono NF CN；

- **Font**: SF Pro, Maple Mono NF CN
- **Extension**: [custom-ui-style](https://marketplace.visualstudio.com/items?itemName=subframe7536.custom-ui-style)


[下载css文件](https://github.com/Efterklang/dotfiles/blob/main/application/vscode/custom.css)，打开VSCode配置文件（`Ctrl+Shift+P`后输入`Preference: Open User Settings (JSON)`，添加以下内容：

```json settings.json
{
  "custom-ui-style.external.imports": [
	// Method1: Local file, 注意替换路径
	"file:///Users/gjx/Projects/dotfiles/application/vscode/custom.css"
	// Method2: Remote file, 直接引用我的GitHub仓库中的css文件
	{
      "type": "css",
      "url": "https://raw.githubusercontent.com/Efterklang/dotfiles/refs/heads/main/application/vscode/custom.css",
    }
  ],
}
```

## Preview

![vsc_status_bar_ricing](https://assets.vluv.space/vsc_status_bar_ricing.avif)

## Customization Tutorial

> [!TIPS]- Developer Tools
>
> VSCode作为Electron应用，内置了Chromium的DevTools，对调试css很有帮助; 可通过在Command Palette运行`Developer: Toggle Developer Tools`命令打开
### Items

CSS中，主要对status bar中以下item进行了调整

**左侧**

- `Remote Host`: 显示当前连接的远程主机
- `SCM`: 显示当前版本控制系统的状态，git branch e.g.
- `Vim Mode`: 安装VSCodeVim后，通过该组件显示当前Vim Mode，包括`NORMAL/INSERT/VISUAL` etc.
- `Problems`: 显示当前文件/项目中的问题数量，包括`Error/Warning/Info` etc.

**右侧**

- `Editor Selection`: 显示当前Cursor所在的行列数(Line&Column)
- `Copilot Status`: 显示Copilot的状态
- `Notifications`: 显示当前的通知数量

![vsc_status_items](https://assets.vluv.space/vsc_status_items.avif)

上述组件的显示顺序可以通过`order`属性控制:

- 位于status bar左侧的组件`order`值越小，显示越靠左
- 位于status bar右侧的组件`order`值越小，显示越靠右

```css custom.css
/* 状态栏左侧 */
#status\.host {
	order: -999 !important;
}

#status\.scm\.0,
#status\.scm\.1 {
	order: -998 !important;
}

/* 状态栏右侧 */
div#chat\.statusBarEntry {  /* copilot */
	order: -998 !important;
}

#status\.notifications {
	order: -999 !important;
}
```

### Font

设置status bar的字体为`Maple Mono NF CN`

```css custom.css
:root {
	--font-status-bar: "Maple Mono NF CN"; /* [!code ++] */
}

.statusbar {
	font-family: var(--font-status-bar) !important;
}
```

### VSCodeVim

主要是两处修改

- 使用 `var(--vscode-button-foreground)` 等变量自定义组件颜色
- 移除Vim Mode中分隔符，例如将`-- INSERT --`替换`INSERT`

```css custom.css
#vscodevim\.vim\.primary {
    order: -997 !important;
    background: var(--vscode-terminal-ansiBrightBlue) !important;
    font-weight: 600 !important;
    color: var(--vscode-button-foreground);
}

.statusbar-item-label[aria-label*="-- "] {
	font-size: 0 !important;
}

.statusbar-item-label[aria-label*="-- "]::before {
	font-size: 13px !important;
	font-weight: bold !important;
}

.statusbar-item-label[aria-label="-- NORMAL --"]::before {
	content: "NORMAL";
}

.statusbar-item-label[aria-label="-- INSERT --"]::before {
	content: "INSERT";
}

.statusbar-item-label[aria-label="-- VISUAL --"]::before,
.statusbar-item-label[aria-label="-- VISUAL LINE --"]::before,
.statusbar-item-label[aria-label="-- VISUAL BLOCK --"]::before {
	content: "VISUAL";
}

.statusbar-item-label[aria-label="-- VIM: DISABLED --"]::before {
	content: "DISABLED";
}

#vscodevim\.vim\.primary[aria-label="-- INSERT --"] {
	background: var(--green) !important;
}

#vscodevim\.vim\.primary[aria-label="-- VISUAL --"],
#vscodevim\.vim\.primary[aria-label="-- VISUAL BLOCK --"],
#vscodevim\.vim\.primary[aria-label="-- VISUAL LINE --"] {
	background: var(--mauve) !important;
}

#vscodevim\.vim\.primary[aria-label="-- VIM: DISABLED --"] {
	background: var(--red) !important;
}

#vscodevim\.vim\.showcmd[aria-label="<ExtensionDisable>"] {
	display: none !important;
}
```

### Error/Warning Icons

原先的Problems等图标比较单调，这里替换其配色，并替换icon

> [!error]
>
> 为使icon正常显示，需安装`SF Pro`字体

```css custom.css
.codicon-error:before,
.codicon-warning:before,
.codicon-info:before {
    font-family: "SF Pro" !important;
    font-size: 13px;
    vertical-align: text-top !important;
}

.codicon-error:before {
    content: "􀁑" !important;
    color: var(--vscode-problemsErrorIcon-foreground);
}

.codicon-warning:before {
    content: "􀇿" !important;
    color: var(--vscode-problemsWarningIcon-foreground);
}

.codicon-info:before {
    content: "􀅵" !important;
    color: var(--vscode-problemsInfoIcon-foreground);
}
```

### MISC

其余组件，如Remote Host, Editor Selection, Copilot Status等，主要就是颜色方面的调整:

```css custom.css
#status\.notifications {
    background: var(--vscode-terminal-ansiRed) !important;
    color: var(--vscode-button-foreground);
    order: -999 !important;
    margin-right: 0 !important;
    padding-right: 2px !important;
}

/* 其他组件... */
```