概述 此扩展允许在 vscode 的常规范围之外进行自定义。与其前身不同,它不包含默认设置,而是提供了一个可自定义的配置文件。
概述 此扩展允许在 vscode 的常规范围之外进行自定义。与其前身不同,它不包含默认设置,而是提供了一个可自定义的配置文件。
This extension allows customization outside of vscode's usual scope.
Unlike its predecessor, it ships with no default settings, granting you full customization control.
Explore my setup for inspiration: View Settings
Enable Apc extension to enable or Disable Apc extension to disableEnable Apc extensionTo ensure the extension works, allow VSCode or VSCodium to modify itself by fixing read-only code files and permission issues.
[!IMPORTANT] If you use a package manager, confirm the custom installation path before executing these commands.
sudo chown -R $(whoami) $(which code)sudo chown -R $(whoami) /usr/share/code| Operating System | Software | Installation Path |
|---|---|---|
| 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 (most distros) | VSCode | /usr/share/code |
| Arch Linux | VSCode | /opt/visual-studio-code |
| VSCodium | /usr/share/vscodium |
This experimental extension tweaks certain VSCode / VSCodium files.
Proceed at your own risk
Disable the extension to revert to original files if you run into issues.
Patchers are automatically reapplied after each VSCode / VSCodium update. If it doesn't, re-enable the extension.
Found a bug? Report it on our GitHub repository
apc.electronConfigures the Electron window. For detailed info, see the Electron BrowserWindow documentation
[!CAUTION] Incorrect "apc.electron" settings might prevent VSCode or VSCodium from starting up.
[!NOTE] Here's what we covered. Choose a style you like, or create your own!
"apc.electron": {
"frame": false,
} "apc.electron": {
"titleBarStyle": "hidden",
},
"window.titleBarStyle": "native",
"window.customTitleBarVisibility": "never", "apc.electron": {
"titleBarStyle": "hiddenInset",
"trafficLightPosition": {
"x": 7,
"y": 5
}
}custom title bar
"apc.electron": {
"titleBarStyle": "hidden",
"titleBarOverlay": {
"color": "#2f3241",
"symbolColor": "#74b1be",
"height": 60
}
}vibrancy setting
// To utilize the `vibrancy` option, ensure other panels are transparent.
// Demo: https://github.com/drcika/apc-extension/blob/production/demo/vibrancy.settings.json
"apc.electron": {
"vibrancy": "ultra-dark"
}background color, transparency
"apc.electron": {
"backgroundColor": "rgba(123, 123, 123, 0.5)",
"frame": false,
"transparent": true,
"titleBarStyle": "hiddenInset",
"vibrancy": "ultra-dark",
"opacity": 0.98, // Range: 0-1 (To go fully transparent, set it to 0)
"visualEffectState": "active"
}[!NOTE] Multiple declarations of
apc.electronwill apply only the last declaration, ignoring previous ones.
font.familyCustomize font family for any part of VS Code
Defaults in vscode
"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",To adjust font family for extension-editor, install the font on your computer and restart vscode.
"apc.font.family": "Roboto Mono",
"apc.monospace.font.family": "Roboto Mono",Change default font family for individual sections
"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", // Install the font and restart vscode
"monaco-menu": "Roboto Mono"
},apc.stylesheetOverride the default CSS of VS Code
…apc.importsCustomize VS Code's Look and Feel with Real-time CSS & JS Imports
…apc.menubar.compactMove Menu bar to Activity bar for a compact design
"apc.menubar.compact": trueapc.headerAdjust the height and font size of the header bar
"apc.header": {
"default": number, // For "window.density.editorTabHeight": "default"
"compact": number, // For "window.density.editorTabHeight": "compact"
"height": number, // When neither "default" nor "compact" is specified
"fontSize": number
}apc.activityBarSet the position and dimensions of the activity bar
"apc.activityBar": {
"position": "bottom", // Options: bottom, left (default). Works only with 'bottom' or default position.
"size": number, // Height (for bottom) or width (in default position)
"itemSize": number, // Size of items within the bar (default: size)
"itemMargin": number // Margin between two items (default: 3)
}Removed
apc.activityBar.position: 'top'
apc.activityBar.hideSettingsAlternative
"workbench.activityBar.location": "top",
"window.customTitleBarVisibility": "never",apc.sidebar.titlebarDefine the height and font size of the sidebar title bar
"apc.sidebar.titlebar": {
"height": number,
"fontSize": number
}apc.statusBarSet the position and height of the status bar
"apc.statusBar": {
"position": "top" | "bottom" | "editor-top" | "editor-bottom",
"height": number,
"fontSize": number
}apc.listRowSpecify the height and font size of list rows
…apc.iframe.styleApply custom CSS to iframes (Notebook, Extension view, etc)
[!IMPORTANT] If you have an open iframe tab when starting VSCode, reopen it to apply the styles.
"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;"
}
}This extension is your go-to tool for customizing Electron and Visual Studio Code.
While I haven't developed any features or provided support for bugs, think of me as your bridge to tailor Electron and VS Code just the way you like.
暂无开放 Issues，或尚未同步最近议题。