---
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: Customize the VS Code status bar with custom CSS, fonts, item ordering, Vim mode colors, and replacement problem icons.
updated: 2026-07-08 08:14:09
lang: en
i18n:
  cn: /vscode_status_bar
  translation: 2
---

## Install

This mainly uses the Custom UI Style extension, which injects custom CSS into VS Code.

The CSS I wrote uses some non-built-in fonts, which need to be installed manually, including SF Pro (San Francisco) and 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)


[Download the CSS file](https://github.com/Efterklang/dotfiles/blob/main/application/vscode/custom.css), open the VS Code settings file (`Ctrl+Shift+P`, then enter `Preference: Open User Settings (JSON)`), and add the following:

```json settings.json
{
  "custom-ui-style.external.imports": [
	// Method1: Local file, replace the path
	"file:///Users/gjx/Projects/dotfiles/application/vscode/custom.css"
	// Method2: Remote file, directly reference the CSS file from my GitHub repository
	{
      "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
>
> VS Code is an Electron app and includes Chromium DevTools, which is very helpful for debugging CSS. You can open it by running `Developer: Toggle Developer Tools` from the Command Palette.
### Items

In the CSS, I mainly adjusted the following status bar items.

**Left side**

- `Remote Host`: shows the currently connected remote host.
- `SCM`: shows current version control status, such as the git branch.
- `Vim Mode`: after installing VSCodeVim, this component shows the current Vim mode, including `NORMAL/INSERT/VISUAL`, etc.
- `Problems`: shows the number of problems in the current file/project, including `Error/Warning/Info`, etc.

**Right side**

- `Editor Selection`: shows the current cursor line and column.
- `Copilot Status`: shows Copilot status.
- `Notifications`: shows the current notification count.

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

The display order of the components above can be controlled with the `order` property:

- For components on the left side of the status bar, smaller `order` values appear farther left.
- For components on the right side of the status bar, smaller `order` values appear farther right.

```css custom.css
/* Left side of the status bar */
#status\.host {
	order: -999 !important;
}

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

/* Right side of the status bar */
div#chat\.statusBarEntry {  /* copilot */
	order: -998 !important;
}

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

### Font

Set the status bar font to `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

There are two main changes:

- Use variables such as `var(--vscode-button-foreground)` to customize component colors.
- Remove separators from Vim Mode, for example replacing `-- INSERT --` with `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

The original Problems icons were rather plain, so I replaced their colors and icons.

> [!error]
>
> To display these icons correctly, install the `SF Pro` font.

```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

For other components, such as Remote Host, Editor Selection, and Copilot Status, the changes are mainly color adjustments:

```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;
}

/* Other components... */
```