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
- Open Visual Studio Code
- Disable any similar extensions
- Install this extension (auto-enabled on first install)
- Add configurations to your user settings.json to customize
- Open the Command Palette (Mac: ⌘+Shift+P, Windows: Ctrl+Shift+P)
- Type
Enable Apc extensionto enable orDisable Apc extensionto disable
- 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 | 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
Configures 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.electron will 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, // For "window.density.editorTabHeight": "default"
"compact": number, // For "window.density.editorTabHeight": "compact"
"height": number, // When neither "default" nor "compact" is specified
"fontSize": number
}Set 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",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"], // Default lists if height or fontSize are specified ['customview-tree', 'results', 'open-editors', 'explorer-folders-view', 'outline-tree', 'scm-view', 'debug-view-content', 'debug-breakpoints', 'tree']
"height": number,
"fontSize": number,
// Customize 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
}
}
},
// Additional styling
"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
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.