VSCode Ricing

About Theme

Category	Extensions
Themes	Catppuccin for VScode
File Icon Theme	Material Icon Theme
Product Icons Theme	Fluent Icons

JSON

// =================================================================================// *                                  Theme                                        *// ================================================================================={  "material-icon-theme.folders.color": "#9eb5f3",  "material-icon-theme.files.color": "#42a5f5",  "material-icon-theme.hidesExplorerArrows": true,  "material-icon-theme.folders.theme": "specific",  "materialTheme.accent": "Indigo",  "workbench.colorTheme": "Catppuccin Mocha",  "catppuccin.italicComments": true,  "catppuccin.accentColor": "lavender", // 设置 Catppuccin 的主题色，默认 mauve(淡紫色)  "catppuccin.bracketMode": "neovim",  "catppuccin.workbenchMode": "flat",  "catppuccin.boldKeywords": true,  "catppuccin.italicKeywords": true}

Recommendations

Other Theme

• Dark Space
• Material Theme
• Tokyo Night
• Tokyo Night Ported Nvim
• Tokyo Night Frameless
• Solarized Palenight
• Bearded Theme

---

Other File Icon Theme:

• Catppuccin Icons for VSCode

---

• CodeUI
• background

Custom CSS

Require Custom CSS and JS Loader

在配置项中引入 css 文件，这里我放在~/.config/vscode/custom.css目录下

DIFF

{  "vscode_custom_css.imports": [+   "file:///c:/Users/24138/.config/vscode/custom.css"  ]}

在自定义前，需要对关于 VSCode 的 UI 有一定的了解，详见Visual Studio Code Docs —— User Interface

该插件支持使用 CSS,JavaScript 重写 VSCode 的样式，个人 CSS 修改内容主要包括：

• 各部分字体，包括 sidebar,tabs, etc. 主要使用了 Maple Mono NF CN。Maple Mono是一款不错的 Nerd Font，支持中英文 1:2 等宽以及较为丰富的连字效果(Ligature)
  PS: 用了好久 VSCode，终于在 v1.96.0 支持在 Integrated Terminal 中启用连字效果了 🤓
• Status bar 给不同组件设置相应的背景色，类似于 LazyVim；可以设置元素的order属性调整排列顺序，后续有计划再调整。
• 给部分元素添加 border，包括 tabs, notifications, command palette, etc.
• Command Palette 设置居中显示，与 LazyVim 相似

CSS

:root {  --font-maple: "Maple Mono NF CN";  --font-mh: "Maple Hand";  --font-jb: "JetbrainsMono Nerd Font";  /* Catppuccin Color Scheme */  --rosewater: #f5e0dc;  --flamingo: #f2cdcd;  --pink: #f5c2e7;  --mauve: #cba6f7;  --red: #f38ba8;  --maroon: #eba0ac;  --peach: #fab387;  --yellow: #f9e2af;  --green: #a6e3a1;  --teal: #94e2d5;  --sky: #89dceb;  --sapphire: #74c7ec;  --blue: #82aaff;  --lavender: #b4befe;  --text: #cdd6f4;  --subtext1: #bac2de;  --subtext0: #a6adc8;  --overlay2: #9399b2;  --overlay1: #7f849c;  --overlay0: #6c7086;  --surface2: #585b70;  --surface1: #45475a;  --surface0: #282936;  --base: #1e1e2e;  --mantle: rgba(24, 24, 37, 0.5);  --crust: rgba(17, 17, 27, 0.5);  --focused_background: #2f334d;  --status_label_background: #313244;}/* command center palette */.quick-input-widget {  transform: translateY(-50%) !important;  top: 50% !important;  /* 50% of the parent container */  z-index: 100;  border: solid 2px var(--lavender) !important;  border-radius: 6px !important;  box-shadow: 0px 8px 32px var(--crust) !important;  padding: 8px !important;  font-family: var(--font-maple);}.quick-input-widget .monaco-inputbox {  border: solid 2px var(--blue) !important;  padding: 5px !important;  border-radius: 3px !important;}.monaco-inputbox input::placeholder {  color: var(--overlay2) !important;}.label-name {  font-family: var(--font-maple) !important;}.windows {  font-family: var(--font-maple) !important;}/* Code canvas top shadow */.monaco-editor .scroll-decoration {  box-shadow: 0px 0px 20px var(--crust) !important;  top: -6px !important;}/* Tabs */.monaco-workbench  .part.editor  > .content  .editor-group-container  > .title  .tabs-container  > .tab.selected.tab-border-top  > .tab-border-top-container {  display: none;}.tab.active {  font-weight: 600 !important;  border: 1px solid var(--lavender) !important;}.tab {  border-radius: 3px !important;  margin-left: 2px !important;  margin-right: 2px !important;  padding-top: 2px !important;  height: 30px !important;  border: 1px solid #313244 !important;  background-color: var(--base) !important;  align-items: center !important;}.tab .monaco-icon-label {  height: 100% !important;  align-items: center;}.tab .tab-label {  line-height: 27px !important;}.tabs-container {  height: auto !important;  padding: 3px !important;  padding-bottom: 5px !important;}/* Sidebar title */.composite.title {  display: flex !important;  flex-direction: row !important;  align-items: center !important;  border-bottom: 1px solid var(--lavender) !important;}.composite.title h2 {  font-weight: bold !important;  font-size: 12px !important;  color: var(--flamingo) !important;}/* Button */.monaco-button.monaco-text-button {  font-family: var(--font-maple) !important;}/* Incoming Outgoing line */[aria-label="Incoming and outgoing changes"].monaco-list-row {  border-top: 1px solid #fff !important;}/* File explorer action buttons */.monaco-workbench .part.sidebar .title-actions .actions-container {  display: none;}/* File Explorer Item Label */.monaco-tree .monaco-tree-row .label-name,.monaco-list .monaco-list-row .monaco-icon-label .label-name {  font-family: var(--font-maple), monospace !important;}/* Sidebar top shadow */.monaco-scrollable-element > .shadow.top {  box-shadow: 0px 0px 10px var(--mantle) !important;}/* Scroll Bar */.slider {  position: absolute !important;  right: 2px !important;  width: 4px !important;  background: #bc9abc !important;  left: auto !important;}.decorationsOverviewRuler {  width: 5px !important;}.codicon-toolbar-more,.codicon-word-wrap {  display: block !important;}/* Tooltip box style */.monaco-editor-hover,.monaco-hover {  z-index: 100;  border: solid 1px var(--blue) !important;  border-radius: 3px !important;  box-shadow: 0px 8px 16px var(--crust) !important;  padding: 8px !important;}.monaco-tokenized-source {  margin-bottom: 10px !important;}/* Suggestion widget box style */.suggest-widget {  z-index: 100;  border: solid 1px var(--blue) !important;  border-radius: 3px !important;  box-shadow: 0px 8px 16px var(--crust) !important;  padding: 8px !important;}.suggest-widget .monaco-list-row.focused {  background: #4f5971 !important;}.suggest-details {  z-index: 100;  border: solid 1px var(--blue) !important;  border-radius: 3px !important;  box-shadow: 0px 8px 16px var(--crust) !important;  padding: 8px !important;}.editor-widget {  z-index: 100;  border: solid 1px var(--blue) !important;  border-radius: 3px !important;  box-shadow: 0px 8px 16px var(--crust) !important;  padding: 8px !important;}/* Project title's style at the top. */.monaco-workbench  .part.titlebar  > .titlebar-container  > .titlebar-center  > .window-title  > .command-center  .action-item.command-center-center {  border: none !important;  background: transparent !important;}/* Project Title */.titlebar-left {  justify-content: flex-start !important;  flex-grow: 0 !important;  width: auto !important;}/* Search Label */.search-label {  font-family: var(--font-maple) !important;  font-size: 14px !important;  color: #fff;  display: block;}/* Search icon */.search-icon {  display: none !important;}.codicon-search::before {  display: none !important;}.codicon-arrow-right,.codicon-arrow-left {  display: none !important;}.titlebar-right > * {  display: none !important;}/* Editor Search */.editor-widget.find-widget.visible {  height: fit-content !important;  align-content: center !important;  border: solid 1px var(--blue) !important;  border-radius: 3px !important;  box-shadow: 0px 8px 24px var(--crust) !important;  padding: 8px !important;}.find-part {  margin-right: 25px !important;}.button.codicon.codicon-widget-close {  margin-top: auto !important;  margin-bottom: auto !important;  top: 12px !important;}/* Remove background for lists */.monaco-list-rows {  background: transparent !important;}.notifications-toasts .monaco-list-row:hover {  background: none !important;}/* status bar */.statusbar {  font-family: var(--font-mh) !important;}#status\.scm\.0,#status\.scm\.1 {  background: var(--status_label_background) !important;  color: var(--lavender);}/* .codicon-error:before {    color: var(--red);}.codicon-warning:before {    color: var(--yellow);} */#RoscoP\.ActiveFileInStatusBar {  order: 999 !important;  /* right most */}.statusbar-item.right.__CUSTOM_CSS_JS_INDICATOR_CLS {  display: none !important;}#status\.editor\.selection {  background: var(--status_label_background) !important;  color: var(--lavender) !important;  order: -997 !important;}div#chat\.statusBarEntry {  background: var(--green) !important;  color: var(--base) !important;  order: -998 !important;}#status\.notifications {  background: var(--red) !important;  color: var(--base) !important;  order: -999 !important;  margin-right: 0 !important;  padding-right: 2px !important;}/* debug console font; 新版本vscode可以在settings.json中配置字体 */.mtk1 {  font-family: var(--font-maple);}

Custom Animations

Require VSCode Animations and Custom CSS and JS Loader

该插件为 VSCode 提供了更丝滑的动画效果，其中的一个 feature 是 Trail Cursor Effect

My Settings

JSON

{  "animations.Active": "Indent",  "animations.Enabled": true,  "animations.CursorAnimation": true,  "animations.Install-Method": "Custom CSS and JS",  "animations.CursorAnimationOptions": {    "Color": "#6d8be0",    "TrailLength": 8,    "CursorStyle": "block"  },  "animations.Command-Palette": "Scale",  "animations.Durations": {    "Active": 200,    "Scrolling": 200,    "Tabs": 200  }}

Further Steps

Use Developer: Toggle Developer Tools to inspect the elements and find the corresponding CSS classes.

Credits

https://www.reddit.com/r/vscode/comments/1gsz7fh/my_vscode_w_custom_css
https://www.reddit.com/r/vscode/comments/1hdb5ul/turned_vs_code_to_neovimish