{"id":13476227,"url":"https://github.com/drcika/apc-extension","last_synced_at":"2025-10-20T21:48:06.335Z","repository":{"id":169726353,"uuid":"645753108","full_name":"drcika/apc-extension","owner":"drcika","description":null,"archived":false,"fork":false,"pushed_at":"2024-08-13T19:28:07.000Z","size":1574,"stargazers_count":728,"open_issues_count":48,"forks_count":32,"subscribers_count":7,"default_branch":"production","last_synced_at":"2025-10-20T21:48:00.635Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drcika.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-26T11:04:04.000Z","updated_at":"2025-10-18T15:47:08.000Z","dependencies_parsed_at":"2023-10-21T19:26:39.960Z","dependency_job_id":"c88e8218-31d3-447f-9f2d-3ce2d180b366","html_url":"https://github.com/drcika/apc-extension","commit_stats":null,"previous_names":["drcika/apc-extension"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/drcika/apc-extension","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drcika%2Fapc-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drcika%2Fapc-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drcika%2Fapc-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drcika%2Fapc-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drcika","download_url":"https://codeload.github.com/drcika/apc-extension/tar.gz/refs/heads/production","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drcika%2Fapc-extension/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280166617,"owners_count":26283782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-20T02:00:06.978Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T16:01:27.829Z","updated_at":"2025-10-20T21:48:06.300Z","avatar_url":"https://github.com/drcika.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Apc Customize UI++ Extension README\n\nThe Successor to iocave/Customize UI\n\n![Visual Studio Marketplace Version (including pre-releases)](https://img.shields.io/visual-studio-marketplace/v/drcika.apc-extension?label=latest%20version\u0026\u0026color=dark-green) ![Visual Studio Marketplace Downloads](https://img.shields.io/visual-studio-marketplace/d/drcika.apc-extension?color=blue) ![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/drcika.apc-extension?color=yellow) ![License](https://img.shields.io/github/license/drcika/apc-extension?color=red) ![GitHub Repo stars](https://img.shields.io/github/stars/drcika/apc-extension?style=social)\n\n\u003c/div\u003e\n\n## Overview\n\nThis extension allows customization outside of vscode's usual scope.\n\nUnlike its predecessor, it ships with no default settings, granting you full customization control.\n\nExplore my setup for inspiration: [View Settings](https://github.com/drcika/apc-extension/blob/production/demo/settings.json)\n\n## Getting Started\n\n  - Open Visual Studio Code\n  - Disable any similar extensions\n  - Install this extension (auto-enabled on first install)\n  - Add configurations to your user [settings.json](https://code.visualstudio.com/docs/getstarted/settings#_settingsjson) to customize\n\n## Enabling and Disabling\n\n  - Open the Command Palette (Mac: \u003ckbd\u003e⌘\u003c/kbd\u003e+\u003ckbd\u003eShift\u003c/kbd\u003e+\u003ckbd\u003eP\u003c/kbd\u003e, Windows: \u003ckbd\u003eCtrl\u003c/kbd\u003e+\u003ckbd\u003eShift\u003c/kbd\u003e+\u003ckbd\u003eP\u003c/kbd\u003e)\n  - Type `Enable Apc extension` to enable or `Disable Apc extension` to disable\n\n## Troubleshooting Extension Issues\n\n### Extension stopped functioning after an update\n\n- To re-enable, go to the Command Palette and type `Enable Apc extension`\n\n### Windows Users\n\n- **Single-user** installs: No admin rights required.\n- **All-user** installs: Run VSCode or VSCodium in Administrator mode.\n\n### Mac and Linux Users\n\nTo 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.\n\n\u003e [!IMPORTANT]\n\u003e If you use a package manager, confirm the custom installation path before executing these commands.\n\n#### macOS\n  ```sh\n  sudo chown -R $(whoami) $(which code)\n  ```\n\n#### Linux\n  ```sh\n  sudo chown -R $(whoami) /usr/share/code\n  ```\n\n#### Common Software Installation Paths\n| Operating System       | Software        | Installation Path |\n|------------------------|-----------------|-------------------|\n| 🍎 **macOS**           | VSCode          | `/Applications/Visual Studio Code.app/Contents/Resources/app/out` |\n|                        | VSCode Insiders | `/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out` |\n|                        | VSCodium        | `/Applications/VSCodium.app/Contents/Resources/app/out` |\n| 🐧 **Linux** (most distros) | VSCode | `/usr/share/code` |\n| 🐧 **Arch Linux**  | VSCode | `/opt/visual-studio-code` |\n|| VSCodium | `/usr/share/vscodium` |\n\n\n\n## Disclaimer\n\nThis experimental extension tweaks certain VSCode / VSCodium files. \u003cbr\u003e\n\n\u003e Proceed at your own risk\n\n🚀 Disable the extension to revert to original files if you run into issues. \u003cbr\u003e\n🔄 Patchers are automatically reapplied after each VSCode / VSCodium update. If it doesn't, re-enable the extension. \u003cbr\u003e\n🐞 Found a bug? Report it on our [GitHub repository](https://github.com/drcika/apc-extension/issues)\n\n---\n\n## Supported Configuration Options\n\n### `apc.electron`\n\nConfigures the Electron window. For detailed info, see the [Electron BrowserWindow documentation](https://www.electronjs.org/docs/latest/api/browser-window#new-browserwindowoptions)\n\n\u003e [!CAUTION]\n\u003e Incorrect \"apc.electron\" settings might prevent VSCode or VSCodium from starting up.\n\n\u003e [!NOTE]\n\u003e Here's what we covered. Choose a style you like, or create your own!\n\n#### frameless title bar\n```jsonc\n    \"apc.electron\": {\n      \"frame\": false,\n    }\n```\n\n#### inline title bar\n```jsonc\n    \"apc.electron\": {\n      \"titleBarStyle\": \"hidden\",\n    },\n    \"window.titleBarStyle\": \"native\",\n    \"window.customTitleBarVisibility\": \"never\",\n```\n\n#### inline title bar with traffic light position\n```jsonc\n    \"apc.electron\": {\n      \"titleBarStyle\": \"hiddenInset\",\n      \"trafficLightPosition\": {\n        \"x\": 7,\n        \"y\": 5\n      }\n    }\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003ecustom title bar\u003c/b\u003e\u003c/summary\u003e\n\n```jsonc\n    \"apc.electron\": {\n      \"titleBarStyle\": \"hidden\",\n      \"titleBarOverlay\": {\n        \"color\": \"#2f3241\",\n        \"symbolColor\": \"#74b1be\",\n        \"height\": 60\n      }\n    }\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003evibrancy setting\u003c/b\u003e\u003c/summary\u003e\n\n```jsonc\n    // To utilize the `vibrancy` option, ensure other panels are transparent.\n    // Demo: https://github.com/drcika/apc-extension/blob/production/demo/vibrancy.settings.json\n    \"apc.electron\": {\n      \"vibrancy\": \"ultra-dark\"\n    }\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003ebackground color, transparency\u003c/b\u003e\u003c/summary\u003e\n\n```jsonc\n    \"apc.electron\": {\n      \"backgroundColor\": \"rgba(123, 123, 123, 0.5)\",\n      \"frame\": false,\n      \"transparent\": true,\n      \"titleBarStyle\": \"hiddenInset\",\n      \"vibrancy\": \"ultra-dark\",\n      \"opacity\": 0.98,  // Range: 0-1 (To go fully transparent, set it to 0)\n      \"visualEffectState\": \"active\"\n    }\n```\n\u003c/details\u003e\n\n\u003e [!NOTE]\n\u003e Multiple declarations of `apc.electron` will apply only the last declaration, ignoring previous ones.\n\n### `font.family`\n\nCustomize font family for any part of VS Code\n\n\u003cdetails\u003e\n\u003csummary\u003eDefaults in vscode\u003c/summary\u003e\n\n```jsonc\n  \"editor.fontFamily\": \"Roboto Mono\",\n  \"editor.inlayHints.fontFamily\": \"Roboto Mono\",\n  \"editor.codeLensFontFamily\": \"Roboto Mono\",\n  \"terminal.integrated.fontFamily\": \"Roboto Mono\",\n  \"scm.inputFontFamily\": \"Roboto Mono\",\n  \"chat.editor.fontFamily\": \"Roboto Mono\",\n  \"debug.console.fontFamily\": \"Roboto Mono\",\n  \"notebook.output.fontFamily\": \"Roboto Mono\",\n  \"markdown.preview.fontFamily\": \"Roboto Mono\",\n```\n\u003c/details\u003e\n\nTo adjust font family for `extension-editor`, install the font on your computer and restart vscode.\n\n```jsonc\n  \"apc.font.family\": \"Roboto Mono\",\n  \"apc.monospace.font.family\": \"Roboto Mono\",\n```\n\nChange default font family for individual sections\n\n```jsonc\n  \"apc.parts.font.family\": {\n    \"sidebar\": \"Roboto Mono\",\n    \"titlebar\": \"Roboto Mono\",\n    \"activityBar\": \"Roboto Mono\",\n    \"panel\": \"Roboto Mono\",\n    \"tabs\": \"Roboto Mono\",\n    \"statusbar\": \"Roboto Mono\",\n    \"settings-body\": \"Roboto Mono\",\n    \"extension-editor\": \"Roboto Mono\", // Install the font and restart vscode\n    \"monaco-menu\": \"Roboto Mono\"\n  },\n```\n\n### `apc.stylesheet`\n\nOverride the default CSS of VS Code\n\n```jsonc\n    \"apc.stylesheet\": {\n      \".monaco-workbench .part.editor\u003e.content .editor-group-container\u003e.title div.tabs-container\": \"border-radius: 5px; font-family: 'Times New Roman', Times, serif;\"\n      \n      \"body\": {\n        // Other panels have to be transparent for this. See \"workbench.colorCustomizations\"\n        \"background-image\": \"url(/Users/aleksandarpopovic/imgs/19.png), linear-gradient(to top,rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2))\",\n        \"background-size\": \"cover\",\n        \"background-blend-mode\": \"multiply\",\n        \"background-repeat\": \"no-repeat\"\n      },\n      \"workbench.colorCustomizations\": {\n        \"sideBar.background\": \"#00000000\", // transparent\n        \"editor.background\": \"#00000000\"\n      ...etc\n   \t  }\n    }\n```\n\n### `apc.imports`\n\nCustomize VS Code's Look and Feel with Real-time CSS \u0026 JS Imports\n\n```jsonc\n    \"apc.imports\": [\n      \"/Users/some/path/style.css\",\n      \"/Users/some/path/script.js\",\n      \"/C:/Users/path/style.css\", // Windows path\n      \"${userHome}/path/style.css\", // Only supports ${userHome}\n\n      // Local file imports like this are not watched in real time\n      // Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link\n      {\n        \"rel\": \"stylesheet\",\n        \"href\": \"https://fonts.googleapis.com/css?family=Sofia\"\n      },\n\n      // Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script\n      {\n        \"async\":\"async\",\n        \"type\":\"text/javascript\",\n        \"src\": \"https://some/path.js\"\n      }\n    ]\n```\n\n### `apc.menubar.compact`\n\nMove Menu bar to Activity bar for a compact design\n\n```jsonc\n    \"apc.menubar.compact\": true\n```\n\n### `apc.header`\n\nAdjust the height and font size of the header bar\n\n```jsonc\n    \"apc.header\": {\n      \"default\": number, // For \"window.density.editorTabHeight\": \"default\"\n      \"compact\": number, // For \"window.density.editorTabHeight\": \"compact\"\n      \"height\": number, // When neither \"default\" nor \"compact\" is specified\n      \"fontSize\": number\n    }\n```\n\n### `apc.activityBar`\n\nSet the position and dimensions of the activity bar\n\n```jsonc\n    \"apc.activityBar\": {\n      \"position\": \"bottom\", // Options: bottom, left (default). Works only with 'bottom' or default position.\n      \"size\": number, // Height (for bottom) or width (in default position)\n      \"itemSize\": number, // Size of items within the bar (default: size)\n      \"itemMargin\": number // Margin between two items (default: 3)\n    }\n```\n\nRemoved\n```jsonc\n  apc.activityBar.position: 'top'\n  apc.activityBar.hideSettings\n```\n\nAlternative \n```jsonc\n  \"workbench.activityBar.location\": \"top\",\n  \"window.customTitleBarVisibility\": \"never\",\n```\n\n### `apc.sidebar.titlebar`\n\nDefine the height and font size of the sidebar title bar\n\n```jsonc\n    \"apc.sidebar.titlebar\": {\n      \"height\": number,\n      \"fontSize\": number\n    }\n```\n\n### `apc.statusBar`\n\nSet the position and height of the status bar\n\n```jsonc\n    \"apc.statusBar\": {\n      \"position\": \"top\" | \"bottom\" | \"editor-top\" | \"editor-bottom\",\n      \"height\": number,\n      \"fontSize\": number\n    }\n```\n\n### `apc.listRow`\n\nSpecify the height and font size of list rows\n\n```jsonc\n    // knownlistViews = ['customview-tree', 'tabs-list', 'results', 'open-editors', 'explorer-folders-view', 'tree', 'outline-tree', 'scm-view', 'debug-view-content', 'debug-breakpoints',\n    // 'settings-toc-wrapper', 'settings-tree-container', 'quick-input-list', 'monaco-table', 'select-box-dropdown-list-container', 'extensions-list', 'notifications-list-container'];\n\n    \"apc.listRow\": {\n      \"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']\n      \"height\": number,\n      \"fontSize\": number,\n      // Customize individual list\n      \"parts\" : {\n        \"extensions-list\" : {\n          \"height\": number,\n          \"fontSize\": number,\n        },\n        \"scm-view\": {\n          \"height\": number,\n          \"fontSize\": number,\n          \"actionButton\": number, // only for scm-view\n          \"input\": number // only for scm-view\n        }\n      }\n    },\n\n    // Additional styling\n    \"stylesheet\": {\n      \".explorer-folders-view.custom-list-row .monaco-list-row\": \"font-weight: bold; color: red;\"\n    }\n```\n\n### `apc.iframe.style`\n\nApply custom CSS to iframes (Notebook, Extension view, etc)\n\n\u003e [!IMPORTANT]\n\u003e If you have an open iframe tab when starting VSCode, reopen it to apply the styles.\n\n```jsonc\n  \"apc.iframe.style\": \"/Users/path/style.css\",\n  \"apc.iframe.style\": \"C:\\\\Users\\\\path\\\\style.css\", // Windows\n\n  \"apc.iframe.style\": {\n    \"h1\": \"color: red; font-size: 2rem;\"\n  }\n\n  \"apc.iframe.style\": {\n    \"h1\": {\n      \"color\": \"red\",\n      \"font-size\": \"2rem;\"\n      }\n  }\n```\n\n## Demo\n\n\u003cdiv style=\"text-align:center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/drcika/apc-extension/production/demo.png\" alt=\"demo.png\"/\u003e\n\u003c/div\u003e\n\n## ⚠️ Important Notice\n\nThis extension is your go-to tool for customizing Electron and Visual Studio Code.\n\nWhile 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.\n\n## Inspirations\n\n  - [iocave/customize-ui](https://github.com/iocave/customize-ui)\n  - [iocave/monkey-patch](https://github.com/iocave/monkey-patch)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrcika%2Fapc-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrcika%2Fapc-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrcika%2Fapc-extension/lists"}