Logo
Project Icon

apc-extension

功能强大的Visual Studio Code界面定制扩展

VS Code自定义扩展界面样式Github开源项目

APC-extension是一款专为Visual Studio Code设计的界面定制扩展。它提供了丰富的选项,可以修改Electron窗口、字体、样式表、菜单栏、标题栏、活动栏、侧边栏和状态栏等多个UI元素。通过简单配置,用户能够灵活调整VSCode的外观和行为,打造个性化的编辑环境。该扩展不包含预设,为用户提供了充分的自由度来创建理想的界面。

访问官网访问官网GithubGithub文档文档论文论文
介绍相关项目

Apc 自定义 UI++ 扩展说明

iocave/Customize UI 的继任者

Visual Studio Marketplace 版本（包括预发布版） Visual Studio Marketplace 下载量 Visual Studio Marketplace 安装量 许可证 GitHub 仓库星标数

概述

此扩展允许在 VS Code 通常范围之外进行自定义。

与其前身不同，它不附带任何默认设置，让您完全掌控自定义过程。

查看我的设置以获取灵感：查看设置

入门指南

  • 打开 Visual Studio Code
  • 禁用任何类似的扩展
  • 安装此扩展（首次安装时自动启用）
  • 在用户 settings.json 中添加配置以进行自定义

启用和禁用

  • 打开命令面板（Mac: ⌘+Shift+P，Windows: Ctrl+Shift+P）
  • 输入 启用 Apc 扩展 以启用或 禁用 Apc 扩展 以禁用

排除扩展问题

更新后扩展停止工作

  • 要重新启用，请转到命令面板并输入 启用 Apc 扩展

Windows 用户

  • 单用户安装：无需管理员权限。
  • 所有用户安装：以管理员模式运行 VSCode 或 VSCodium。

Mac 和 Linux 用户

为确保扩展正常工作，允许 VSCode 或 VSCodium 修改自身，修复只读代码文件和权限问题。

[!重要] 如果您使用包管理器，请在执行这些命令之前确认自定义安装路径。

macOS

sudo chown -R $(whoami) $(which code)

Linux

sudo chown -R $(whoami) /usr/share/code

常见软件安装路径

操作系统软件安装路径
🍎 macOSVSCode/Applications/Visual Studio Code.app/Contents/Resources/app/out
VSCode Insiders/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out
VSCodium/Applications/VSCodium.app/Contents/Resources/app/out
🐧 Linux (大多数发行版)VSCode/usr/share/code
🐧 Arch LinuxVSCode/opt/visual-studio-code
VSCodium/usr/share/vscodium

免责声明

这是一个实验性扩展，会修改某些 VSCode / VSCodium 文件。

请自行承担风险

🚀 如遇问题，禁用扩展可恢复原始文件。
🔄 每次 VSCode / VSCodium 更新后，修补程序会自动重新应用。如果没有，请重新启用扩展。
🐞 发现 bug？请在我们的 GitHub 仓库 上报告

支持的配置选项

apc.electron

配置 Electron 窗口。详细信息请参见 Electron BrowserWindow 文档

[!注意] 不正确的 "apc.electron" 设置可能会导致 VSCode 或 VSCodium 无法启动。

[!注意] 以下是我们介绍的内容。选择您喜欢的样式，或创建自己的样式！

无边框标题栏

    "apc.electron": {
      "frame": false,
    }

内嵌标题栏

    "apc.electron": {
      "titleBarStyle": "hidden",
    },
    "window.titleBarStyle": "native",
    "window.customTitleBarVisibility": "never",

带有红绿灯按钮位置的内嵌标题栏

    "apc.electron": {
      "titleBarStyle": "hiddenInset",
      "trafficLightPosition": {
        "x": 7,
        "y": 5
      }
    }
自定义标题栏 
    "apc.electron": {
      "titleBarStyle": "hidden",
      "titleBarOverlay": {
        "color": "#2f3241",
        "symbolColor": "#74b1be",
        "height": 60
      }
    }
毛玻璃效果设置 
    // 要使用 `vibrancy` 选项，请确保其他面板是透明的。
    // 演示：https://github.com/drcika/apc-extension/blob/production/demo/vibrancy.settings.json
    "apc.electron": {
      "vibrancy": "ultra-dark"
    }
背景颜色，透明度 
    "apc.electron": {
      "backgroundColor": "rgba(123, 123, 123, 0.5)",
      "frame": false,
      "transparent": true,
      "titleBarStyle": "hiddenInset",
      "vibrancy": "ultra-dark",
      "opacity": 0.98,  // 范围：0-1（要完全透明，请设置为 0）
      "visualEffectState": "active"
    }

[!注意] 多次声明 apc.electron 只会应用最后一次声明，忽略之前的声明。

font.family

自定义 VS Code 任何部分的字体系列

VS Code 中的默认设置 
  "editor.fontFamily": "Roboto Mono",
  "editor.inlayHints.fontFamily": "Roboto Mono",
  "editor.codeLensFontFamily": "Roboto Mono",
  "terminal.integrated.fontFamily": "Roboto Mono",
  "scm.inputFontFamily": "Roboto Mono",
  "chat.editor.fontFamily": "Roboto Mono",
  "debug.console.fontFamily": "Roboto Mono",
  "notebook.output.fontFamily": "Roboto Mono",
  "markdown.preview.fontFamily": "Roboto Mono",

要调整 extension-editor 的字体系列，请在计算机上安装字体并重启 VS Code。

  "apc.font.family": "Roboto Mono",
  "apc.monospace.font.family": "Roboto Mono",

更改各个部分的默认字体系列

  "apc.parts.font.family": {
    "sidebar": "Roboto Mono",
    "titlebar": "Roboto Mono",
    "activityBar": "Roboto Mono",
    "panel": "Roboto Mono",
    "tabs": "Roboto Mono",
    "statusbar": "Roboto Mono",
    "settings-body": "Roboto Mono",
    "extension-editor": "Roboto Mono", // 安装字体并重启 VS Code
    "monaco-menu": "Roboto Mono"
  },

apc.stylesheet

覆盖 VS Code 的默认 CSS

    "apc.stylesheet": {
      ".monaco-workbench .part.editor>.content .editor-group-container>.title div.tabs-container": "border-radius: 5px; font-family: 'Times New Roman', Times, serif;"
      
      "body": {
        // 其他面板必须透明才能生效。参见 "workbench.colorCustomizations"
        "background-image": "url(/Users/aleksandarpopovic/imgs/19.png), linear-gradient(to top,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2))",
        "background-size": "cover",
        "background-blend-mode": "multiply",
        "background-repeat": "no-repeat"
      },
      "workbench.colorCustomizations": {
        "sideBar.background": "#00000000", // 透明
        "editor.background": "#00000000"
      ...等
   	  }
    }

apc.imports

使用实时 CSS 和 JS 导入自定义 VS Code 的外观和功能

    "apc.imports": [
      "/Users/some/path/style.css",
      "/Users/some/path/script.js",
      "/C:/Users/path/style.css", // Windows 路径
      "${userHome}/path/style.css", // 仅支持 ${userHome}

      // 本地文件导入不会实时监视
      // 参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
      {
        "rel": "stylesheet",
        "href": "https://fonts.googleapis.com/css?family=Sofia"
      },

// 参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
{
  "async":"async",
  "type":"text/javascript", 
  "src": "https://some/path.js"
}
]

apc.menubar.compact

将菜单栏移至活动栏以实现紧凑设计

"apc.menubar.compact": true

apc.header

调整标题栏的高度和字体大小

"apc.header": {
  "default": 数值, // 适用于 "window.density.editorTabHeight": "default"
  "compact": 数值, // 适用于 "window.density.editorTabHeight": "compact"
  "height": 数值, // 当既未指定 "default" 也未指定 "compact" 时使用
  "fontSize": 数值
}

apc.activityBar

设置活动栏的位置和尺寸

"apc.activityBar": {
  "position": "bottom", // 选项：bottom、left（默认）。仅在 'bottom' 或默认位置时生效。
  "size": 数值, // 高度（底部位置）或宽度（默认位置）
  "itemSize": 数值, // 栏内项目大小（默认：size）
  "itemMargin": 数值 // 两个项目之间的间距（默认：3）
}

已移除

apc.activityBar.position: 'top'
apc.activityBar.hideSettings

替代方案

"workbench.activityBar.location": "top",
"window.customTitleBarVisibility": "never",

apc.sidebar.titlebar

定义侧边栏标题栏的高度和字体大小

"apc.sidebar.titlebar": {
  "height": 数值,
  "fontSize": 数值
}

apc.statusBar

设置状态栏的位置和高度

"apc.statusBar": {
  "position": "top" | "bottom" | "editor-top" | "editor-bottom",
  "height": 数值,
  "fontSize": 数值
}

apc.listRow

指定列表行的高度和字体大小

// knownlistViews = ['customview-tree', 'tabs-list', 'results', 'open-editors', 'explorer-folders-view', 'tree', 'outline-tree', 'scm-view', 'debug-view-content', 'debug-breakpoints',
// 'settings-toc-wrapper', 'settings-tree-container', 'quick-input-list', 'monaco-table', 'select-box-dropdown-list-container', 'extensions-list', 'notifications-list-container'];

"apc.listRow": {
  "lists": ["explorer-folders-view", "results"], // 如果指定了高度或字体大小，默认列表为 ['customview-tree', 'results', 'open-editors', 'explorer-folders-view', 'outline-tree', 'scm-view', 'debug-view-content', 'debug-breakpoints', 'tree']
  "height": 数值,
  "fontSize": 数值,
  // 自定义个别列表
  "parts" : {
    "extensions-list" : {
      "height": 数值,
      "fontSize": 数值,
    },
    "scm-view": {
      "height": 数值,
      "fontSize": 数值,
      "actionButton": 数值, // 仅适用于 scm-view
      "input": 数值 // 仅适用于 scm-view
    }
  }
},

// 额外样式
"stylesheet": {
  ".explorer-folders-view.custom-list-row .monaco-list-row": "font-weight: bold; color: red;"
}

apc.iframe.style

对 iframe（笔记本、扩展视图等）应用自定义 CSS

[!重要] 如果在启动 VSCode 时已有打开的 iframe 标签页，请重新打开它以应用样式。

"apc.iframe.style": "/Users/path/style.css",
"apc.iframe.style": "C:\\Users\\path\\style.css", // Windows

"apc.iframe.style": {
  "h1": "color: red; font-size: 2rem;"
}

"apc.iframe.style": {
  "h1": {
    "color": "red",
    "font-size": "2rem;"
    }
}

演示

demo.png

⚠️ 重要提示

这个扩展是你定制 Electron 和 Visual Studio Code 的得力工具。

虽然我没有开发任何功能或为 bug 提供支持，但你可以把我看作是帮助你按照自己喜好定制 Electron 和 VS Code 的桥梁。

灵感来源

相关项目
项目侧边栏1项目侧边栏2
推荐项目
Project Cover

豆包MarsCode

豆包 MarsCode 是一款革命性的编程助手，通过AI技术提供代码补全、单测生成、代码解释和智能问答等功能，支持100+编程语言，与主流编辑器无缝集成，显著提升开发效率和代码质量。

Project Cover

AI写歌

Suno AI是一个革命性的AI音乐创作平台，能在短短30秒内帮助用户创作出一首完整的歌曲。无论是寻找创作灵感还是需要快速制作音乐，Suno AI都是音乐爱好者和专业人士的理想选择。

Project Cover

有言AI

有言平台提供一站式AIGC视频创作解决方案，通过智能技术简化视频制作流程。无论是企业宣传还是个人分享，有言都能帮助用户快速、轻松地制作出专业级别的视频内容。

Project Cover

Kimi

Kimi AI助手提供多语言对话支持，能够阅读和理解用户上传的文件内容，解析网页信息，并结合搜索结果为用户提供详尽的答案。无论是日常咨询还是专业问题，Kimi都能以友好、专业的方式提供帮助。

Project Cover

阿里绘蛙

绘蛙是阿里巴巴集团推出的革命性AI电商营销平台。利用尖端人工智能技术，为商家提供一键生成商品图和营销文案的服务，显著提升内容创作效率和营销效果。适用于淘宝、天猫等电商平台，让商品第一时间被种草。

Project Cover

吐司

探索Tensor.Art平台的独特AI模型，免费访问各种图像生成与AI训练工具，从Stable Diffusion等基础模型开始，轻松实现创新图像生成。体验前沿的AI技术，推动个人和企业的创新发展。

Project Cover

SubCat字幕猫

SubCat字幕猫APP是一款创新的视频播放器，它将改变您观看视频的方式！SubCat结合了先进的人工智能技术，为您提供即时视频字幕翻译，无论是本地视频还是网络流媒体，让您轻松享受各种语言的内容。

Project Cover

美间AI

美间AI创意设计平台，利用前沿AI技术，为设计师和营销人员提供一站式设计解决方案。从智能海报到3D效果图，再到文案生成，美间让创意设计更简单、更高效。

Project Cover

AIWritePaper论文写作

AIWritePaper论文写作是一站式AI论文写作辅助工具，简化了选题、文献检索至论文撰写的整个过程。通过简单设定，平台可快速生成高质量论文大纲和全文，配合图表、参考文献等一应俱全，同时提供开题报告和答辩PPT等增值服务，保障数据安全，有效提升写作效率和论文质量。

使用协议隐私政策广告服务
投诉举报邮箱: service@vectorlightyear.com
@2024 懂AI·鲁ICP备2024100362号-6·鲁公网安备37021002001498号