---
title: VSCode Ricing
date: 2024-12-14
thumbnail: https://assets.vluv.space/cover/ToolChain/vscode_vim.webp
cover: https://assets.vluv.space/cover/ToolChain/custom_vscode_style.webp
tags: [VSCode, CSS, Font, Ricing, Catppuccin]
excerpt: VSCode深度定制指南：使用Custom CSS和Animations插件自定义界面样式、添加动画效果，打造个性化编辑器外观
---

## About Theme

| Category            | Extensions                                                                                             |
| ------------------- | ------------------------------------------------------------------------------------------------------ |
| Themes              | [Catppuccin for VScode](https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc) |
| File Icon Theme     | [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)   |
| Product Icons Theme | [Fluent Icons](https://marketplace.visualstudio.com/items?itemName=miguelsolorio.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](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css)

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

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

在自定义前，需要对关于 VSCode 的 UI 有一定的了解，详见[Visual Studio Code Docs —— User Interface](https://code.visualstudio.com/docs/getstarted/userinterface)

![VSCode UI](https://assets.vluv.space/Tools/vscode_rice/vscode_user_interface.webp)

该插件支持使用 CSS,JavaScript 重写 VSCode 的样式，[个人 CSS](https://github.com/Efterklang/dotfiles/blob/main/application/vscode/custom.cs) 修改内容主要包括：

- 各部分字体，包括 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 相似

## Custom Animations

Require [VSCode Animations](https://marketplace.visualstudio.com/items?itemName=BrandonKirbyson.vscode-animations) and [Custom CSS and JS Loader](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css)

该插件为 VSCode 提供了更丝滑的动画效果，其中的一个 feature 是 [Trail Cursor Effect](https://github.com/qwreey/dotfiles/tree/master/vscode/trailCursorEffect)

![showcase](https://github.com/BrandonKirbyson/VSCode-Animations/raw/HEAD/static/gifs/Demo.gif)

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