This extension allows customization outside vscode scoop.
Unlike its predecessor, it ships with no default settings, granting you full customization control.
Explore my setup for inspiration: View Settings
- Open Visual Studio Code
- Disable similar extensions
- Install this extension (auto-enabled on first install)
- Customize by adding configurations to your
user settings.json
💡 Troubleshooting Extension Issues!
- To re-enable, go to the Command Palette and type
Enable Apc extension
- Single-user installs: No admin rights required.
- All-user installs: Run VSCode or VSCodium in Administrator mode.
To 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 (alternate) | VSCode | /opt/visual-studio-code |
- Open the Command Palette (Mac: ⌘+Shift+P, Windows: Ctrl+Shift+P)
- Type
Enable Apc extensionto enable orDisable Apc extensionto disable
This extension is experimental and tweaks certain VSCode / VSCodium files.
Proceed at your own risk
🚀 Disable to back up original files in case of issues.
🔄 Auto-reapplies patches after each VSCode / VSCodium update. If not, re-enable it.
🐞 Report bugs on our GitHub repository
Configures the Electron window. For detailed info, see the Electron BrowserWindow documentation
Warning Incorrect "apc.electron" configuration can disrupt VSCode or VSCodium startup.
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.
Customize 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"
},Override the default CSS of VS Code
"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": {
// Other panels have to be transparent for this. See "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", // transparent
"editor.background": "#00000000"
...etc
}
}Customize VS Code's Look and Feel with Real-time CSS & JS Imports
"apc.imports": [
"/Users/some/path/style.css",
"/Users/some/path/script.js",
"/C:/Users/path/style.css", // Windows path
"${userHome}/path/style.css", // Only supports ${userHome}
// Local file imports like this are not watched in real time
// Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
{
"rel": "stylesheet",
"href": "https://fonts.googleapis.com/css?family=Sofia"
},
// Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
{
"async":"async",
"type":"text/javascript",
"src": "https://some/path.js"
}
]Move Menu bar to Activity bar for a compact design
"apc.menubar.compact": trueAdjust the height and font size of the header bar
"apc.header": {
"default": number, // Applied with "window.density.editorTabHeight": "default"
"compact": number, // Applied wtih "window.density.editorTabHeight": "compact"
"height": number, // Applied when neither "default" nor "compact" is specified
"fontSize": number
}Set the position and dimensions of the activity bar
"apc.activityBar": {
"position": "bottom" | "top", // top: above sidebar, bottom: below sidebar (default: 'left' if unspecified)
"size": number, // Height (when top/bottom) or width (in default position)
"itemSize": number, // Size of items within the bar (default: size)
"itemMargin": number // Margin between two items (default: 3)
}Define the height and font size of the sidebar title bar
"apc.sidebar.titlebar": {
"height": number,
"fontSize": number
}Set the position and height of the status bar
"apc.statusBar": {
"position": "top" | "bottom" | "editor-top" | "editor-bottom",
"height": number,
"fontSize": number
}Specify the height and font size of list rows
// 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"], // dafault if height or fontSize are provided ['customview-tree', 'results', 'open-editors', 'explorer-folders-view', 'outline-tree', 'scm-view', 'debug-view-content', 'debug-breakpoints', 'tree']
"height": number,
"fontSize": number,
// by individual list
"parts" : {
"extensions-list" : {
"height": number,
"fontSize": number,
},
"scm-view": {
"height": number,
"fontSize": number,
"actionButton": number, // only for scm-view
"input": number // only for scm-view
}
}
},
// if additional styling needed
"stylesheet": {
".explorer-folders-view.custom-list-row .monaco-list-row": "font-weight: bold; color: red;"
}Apply custom CSS to iframes (Notebook, Extension view, etc)
important When you start VSCode and have a tab open with an iframe, you must reopen that tab for the styles to take effect.
"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.
I haven't developed anything nor provided support for potential bugs, but consider me your bridge to tailor Electron and VS Code just the way you like.