VSCode Status Bar Ricing

Install

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

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

如果是MacOS系统，SF Pro应该是自带的

• Font: SF Pro, Maple Mono NF CN
• Extension: custom-ui-style

下载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

Customization Tutorial

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: 显示当前的通知数量

上述组件的显示顺序可以通过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";}.statusbar {	font-family: var(--font-status-bar) !important;}

VSCodeVim

主要是两处修改

• 背景色使用Catppuccin Mocha Theme
• 移除Vim Mode中分隔符，例如将-- INSERT --替换INSERT

CSS

custom.css

:root {	--mauve: #cba6f7;	--red: #f38ba8;	--green: #a6e3a1;	--blue: #82aaff;}#vscodevim\.vim\.primary {	order: -997 !important;	background: var(--blue) !important;	color: var(--base) !important;	font-weight: 600 !important;}.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;}

Problems

原先的Problems图标比较单调，这里替换成Catppuccin Mocha风格的配色，并替换icon

Warning

为使icon正常显示，需安装SF Pro字体

CSS

custom.css

:root {	--mauve: #cba6f7;	--red: #f38ba8;	--green: #a6e3a1;	--blue: #82aaff;}.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(--red);}.codicon-warning:before {	content: "􀇿" !important;	color: var(--yellow);}.codicon-info:before {	content: "􀅵" !important;	color: var(--blue);}

MISC

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

CSS

custom.css

:root {	--mauve: #cba6f7;	--red: #f38ba8;	--green: #a6e3a1;	--blue: #82aaff;}#status\.notifications {	background: var(--red) !important;	color: var(--base) !important;	order: -999 !important;	margin-right: 0 !important;	padding-right: 2px !important;}/* 其他组件... */