Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/drcika/apc-extension
https://github.com/drcika/apc-extension
Last synced: 14 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/drcika/apc-extension
- Owner: drcika
- License: mit
- Created: 2023-05-26T11:04:04.000Z (over 1 year ago)
- Default Branch: production
- Last Pushed: 2024-08-13T19:28:07.000Z (3 months ago)
- Last Synced: 2024-08-14T07:44:31.885Z (3 months ago)
- Language: JavaScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension
- Size: 1.5 MB
- Stars: 554
- Watchers: 4
- Forks: 25
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Apc Customize UI++ Extension README
The Successor to iocave/Customize UI
    
## Overview
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](https://github.com/drcika/apc-extension/blob/production/demo/settings.json)
## Getting Started
- Open Visual Studio Code
- Disable any similar extensions
- Install this extension (auto-enabled on first install)
- Add configurations to your user [settings.json](https://code.visualstudio.com/docs/getstarted/settings#_settingsjson) to customize
## Enabling and Disabling
- Open the Command Palette (Mac: ⌘+Shift+P, Windows: Ctrl+Shift+P)
- Type `Enable Apc extension` to enable or `Disable Apc extension` to disable
## Troubleshooting Extension Issues
### Extension stopped functioning after an update
- To re-enable, go to the Command Palette and type `Enable Apc extension`
### Windows Users
- **Single-user** installs: No admin rights required.
- **All-user** installs: Run VSCode or VSCodium in Administrator mode.
### Mac and Linux Users
To ensure the extension works, allow VSCode or [VSCodium](https://github.com/VSCodium/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.
#### macOS
```sh
sudo chown -R $(whoami) $(which code)
```
#### Linux
```sh
sudo chown -R $(whoami) /usr/share/code
```
#### Common Software Installation Paths
| 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` |
## Disclaimer
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](https://github.com/drcika/apc-extension/issues)
---
## Supported Configuration Options
### `apc.electron`
Configures the Electron window. For detailed info, see the [Electron BrowserWindow documentation](https://www.electronjs.org/docs/latest/api/browser-window#new-browserwindowoptions)
> [!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!
#### frameless title bar
```jsonc
"apc.electron": {
"frame": false,
}
```
#### inline title bar
```jsonc
"apc.electron": {
"titleBarStyle": "hidden",
},
"window.titleBarStyle": "native",
"window.customTitleBarVisibility": "never",
```
#### inline title bar with traffic light position
```jsonc
"apc.electron": {
"titleBarStyle": "hiddenInset",
"trafficLightPosition": {
"x": 7,
"y": 5
}
}
```
custom title bar
```jsonc
"apc.electron": {
"titleBarStyle": "hidden",
"titleBarOverlay": {
"color": "#2f3241",
"symbolColor": "#74b1be",
"height": 60
}
}
```
vibrancy setting
```jsonc
// 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
```jsonc
"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.
### `font.family`
Customize font family for any part of VS Code
Defaults in vscode
```jsonc
"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.
```jsonc
"apc.font.family": "Roboto Mono",
"apc.monospace.font.family": "Roboto Mono",
```
Change default font family for individual sections
```jsonc
"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.stylesheet`
Override the default CSS of VS Code
```jsonc
"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
}
}
```
### `apc.imports`
Customize VS Code's Look and Feel with Real-time CSS & JS Imports
```jsonc
"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"
}
]
```
### `apc.menubar.compact`
Move Menu bar to Activity bar for a compact design
```jsonc
"apc.menubar.compact": true
```
### `apc.header`
Adjust the height and font size of the header bar
```jsonc
"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.activityBar`
Set the position and dimensions of the activity bar
```jsonc
"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
```jsonc
apc.activityBar.position: 'top'
apc.activityBar.hideSettings
```
Alternative
```jsonc
"workbench.activityBar.location": "top",
"window.customTitleBarVisibility": "never",
```
### `apc.sidebar.titlebar`
Define the height and font size of the sidebar title bar
```jsonc
"apc.sidebar.titlebar": {
"height": number,
"fontSize": number
}
```
### `apc.statusBar`
Set the position and height of the status bar
```jsonc
"apc.statusBar": {
"position": "top" | "bottom" | "editor-top" | "editor-bottom",
"height": number,
"fontSize": number
}
```
### `apc.listRow`
Specify the height and font size of list rows
```jsonc
// 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;"
}
```
### `apc.iframe.style`
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.
```jsonc
"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
## ⚠️ Important Notice
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.
## Inspirations
- [iocave/customize-ui](https://github.com/iocave/customize-ui)
- [iocave/monkey-patch](https://github.com/iocave/monkey-patch)