VSCode Ricing
About Theme
| Category | Extensions |
|---|---|
| Themes | Catppuccin for VScode |
| File Icon Theme | Material Icon Theme |
| Product Icons Theme | Fluent Icons |
// =================================================================================// * 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目录下{ "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 相似
Custom Animations
Require VSCode Animations and Custom CSS and JS Loader
该插件为 VSCode 提供了更丝滑的动画效果，其中的一个 feature 是 Trail Cursor Effect
My Settings
{ "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
VSCode Ricing