2024-12-14发表Tools / VSCode9 分钟读完 (约1361字)Views:

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
}

Other 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 相似

: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; /* Lazyvim */
	--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: #3b4261; /* Lazyvim */
}

/* 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(--blue) !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);
}
#status\.editor\.selection {
	background: var(--status_label_background) !important;
	color: var(--lavender) !important;
}

#RoscoP\.ActiveFileInStatusBar {
	order: 999 !important; /* right most */
}

.statusbar-item.right.__CUSTOM_CSS_JS_INDICATOR_CLS {
	display: none !important;
}

#GitHub\.copilot\.status {
	background: var(--green) !important;
	color: var(--base) !important;
}

#status\.notifications {
	background: var(--red) !important;
	color: var(--base) !important;
}

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

https://vluv.space/Tools/VSCode/custom_vscode_css/

作者

GnixAij

发布于

2024-12-14

更新于

2025-01-14

许可协议

VSCode Ricing

About Theme

Custom CSS

Custom Animations

Further Steps

Credits

作者

发布于

更新于

许可协议

评论

目录