Apc 自定义 UI++ 扩展说明

iocave/Customize UI 的继任者

Visual Studio Marketplace 版本（包括预发布版） Visual Studio Marketplace 下载量 Visual Studio Marketplace 安装量许可证

</div>

概述

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

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

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

入门指南

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

启用和禁用

打开命令面板（Mac: <kbd>⌘</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>，Windows: <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>）
输入 启用 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

常见软件安装路径

操作系统	软件	安装路径
🍎 macOS	VSCode	`/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 Linux	VSCode	`/opt/visual-studio-code`
	VSCodium	`/usr/share/vscodium`

免责声明

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

请自行承担风险

🚀 如遇问题，禁用扩展可恢复原始文件。<br> 🔄 每次 VSCode / VSCodium 更新后，修补程序会自动重新应用。如果没有，请重新启用扩展。<br> 🐞 发现 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
      }
    }

<details> <summary><b>自定义标题栏</b></summary>

    "apc.electron": {
      "titleBarStyle": "hidden",
      "titleBarOverlay": {
        "color": "#2f3241",
        "symbolColor": "#74b1be",
        "height": 60
      }
    }

</details> <details> <summary><b>毛玻璃效果设置</b></summary>

    // 要使用 `vibrancy` 选项，请确保其他面板是透明的。
    // 演示：https://github.com/drcika/apc-extension/blob/production/demo/vibrancy.settings.json
    "apc.electron": {
      "vibrancy": "ultra-dark"
    }

</details> <details> <summary><b>背景颜色，透明度</b></summary>

    "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"
    }

</details>

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

`font.family`

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

<details> <summary>VS Code 中的默认设置</summary>

  "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",

</details>

要调整 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;"
    }
}