Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>VSCode/Cursor Custom CSSNew to Visual Studio Code? Get it now.
VSCode/Cursor Custom CSS

VSCode/Cursor Custom CSS

YUYUMOE

|
11 installs
| (0) | Free
为 VSCode 和 Cursor 提供自定义样式功能的插件
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

VSCode Custom CSS

这个 VSCode 插件允许你自定义 VSCode 的样式。你可以修改 VSCode 的任何界面元素的样式,包括但不限于:

  • 编辑器背景色
  • 字体样式
  • 侧边栏样式
  • 状态栏样式
  • 等等

功能

  • 启用/禁用自定义样式
  • 通过配置文件添加自定义 CSS 规则
  • 实时预览样式更改(需要重启 VSCode)

使用方法

  1. 在 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; }"
    ]
}
  1. 使用命令面板(Cmd/Ctrl + Shift + P)执行以下命令:

    • 启用自定义样式 - 应用你的自定义样式
    • 禁用自定义样式 - 移除自定义样式
  2. 重启 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

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft