VSCode Custom CSS
这个 VSCode 插件允许你自定义 VSCode 的样式。你可以修改 VSCode 的任何界面元素的样式,包括但不限于:
- 编辑器背景色
- 字体样式
- 侧边栏样式
- 状态栏样式
- 等等
功能
- 启用/禁用自定义样式
- 通过配置文件添加自定义 CSS 规则
- 实时预览样式更改(需要重启 VSCode)
使用方法
- 在 VSCode 的设置中添加你的自定义样式规则:
{
"vscode-custom-css.styles": [
"/* 修改中文字体 */",
".mac:lang(zh-Hans), .shadow-root-host { font-family: 本墨字语 !important; }",
"/* 修改活动栏指示器 */",
".monaco-workbench .activitybar>.content :not(.monaco-menu)>.monaco-action-bar .action-item.checked .active-item-indicator:before { border-left-color: transparent !important; }",
"/* 修改标签页底部边框 */",
".tab.tab-actions-right.sizing-fit.has-icon.tab-border-bottom.active { --tab-border-bottom-color: transparent !important; }",
"/* 修改标签页顶部边框 */",
".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit { --tab-border-top-color: [#141414](https://github.com/yourusername/vscode-custom-css/issues/141414) !important; }"
]
}
使用命令面板(Cmd/Ctrl + Shift + P)执行以下命令:
启用自定义样式 - 应用你的自定义样式
禁用自定义样式 - 移除自定义样式
重启 VSCode 以使更改生效
注意事项
- 修改 VSCode 的样式需要管理员权限
- 每次修改样式后都需要重启 VSCode
- 请谨慎修改样式,确保不会影响 VSCode 的正常使用
- 建议在修改前备份原始样式
示例样式
以下是一些常用的自定义样式示例:
/* 修改中文字体 */
.mac:lang(zh-Hans), .shadow-root-host {
font-family: 本墨字语 !important;
}
/* 修改活动栏指示器 */
.monaco-workbench .activitybar>.content :not(.monaco-menu)>.monaco-action-bar .action-item.checked .active-item-indicator:before {
border-left-color: transparent !important;
}
/* 修改标签页底部边框 */
.tab.tab-actions-right.sizing-fit.has-icon.tab-border-bottom.active {
--tab-border-bottom-color: transparent !important;
}
/* 修改标签页顶部边框 */
.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit {
--tab-border-top-color: [#141414](https://github.com/yourusername/vscode-custom-css/issues/141414) !important;
}
/* 其他常用样式示例 */
/* 修改编辑器背景色 */
.monaco-editor {
background-color: #f5f5f5;
}
/* 修改行号颜色 */
.line-numbers {
color: [#666](https://github.com/yourusername/vscode-custom-css/issues/666);
}
/* 修改状态栏样式 */
.statusbar {
background-color: #007acc;
color: white;
}
问题反馈
如果你在使用过程中遇到任何问题,请提交 issue。
许可证
MIT
| |