VSCode Ricing

VSCode Ricing

About Theme

CategoryExtensions
ThemesCatppuccin for VScode
File Icon ThemeMaterial Icon Theme
Product Icons ThemeFluent 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

VSCode UI

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

  • 各部分字体,包括 sidebar,tabs, etc. 主要使用了 Maple Mono NF CNMaple 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

showcase

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

作者

GnixAij

发布于

2024-12-14

更新于

2025-08-12

许可协议

评论