apc-extension

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

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 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 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

sudo chown -R $(whoami) $(which code)

Linux

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

---

Supported Configuration Options

apc.electron

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!

frameless title bar

    "apc.electron": {
      "frame": false,
    }

inline title bar

    "apc.electron": {
      "titleBarStyle": "hidden",
    },
    "window.titleBarStyle": "native",
    "window.customTitleBarVisibility": "never",

inline title bar with traffic light position

    "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.

font.family

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"
  },

apc.stylesheet

Override the default CSS of VS Code

…

apc.imports

Customize VS Code's Look and Feel with Real-time CSS & JS Imports

…

apc.menubar.compact

Move Menu bar to Activity bar for a compact design

    "apc.menubar.compact": true

apc.header

Adjust 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.activityBar

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.hideSettings

Alternative

  "workbench.activityBar.location": "top",
  "window.customTitleBarVisibility": "never",

apc.sidebar.titlebar

Define the height and font size of the sidebar title bar

    "apc.sidebar.titlebar": {
      "height": number,
      "fontSize": number
    }

apc.statusBar

Set the position and height of the status bar

    "apc.statusBar": {
      "position": "top" | "bottom" | "editor-top" | "editor-bottom",
      "height": number,
      "fontSize": number
    }

apc.listRow

Specify the height and font size of list rows

…

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.

  "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
• iocave/monkey-patch