Custom UI Style installs statistics

<p align="center"> <img height="128" src="https://github.com/subframe7536/vscode-custom-ui-style/raw/HEAD/res/icon.png"></img> <h1 align="center">Custom UI Style</h1> <p align="center"> <a href="https://marketplace.visualstudio.com/items?itemName=subframe7536.custom-ui-style" target="__blank"><img src="https://img.shields.io/visual-studio-marketplace/v/subframe7536.custom-ui-style.svg?color=eee&amp;label=VS%20Code%20Marketplace&logo=visual-studio-code" alt="Visual Studio Marketplace Version" /></a> </p> </p>

Custom UI Style is a VSCode extension that allows you to customize the editor's appearance and behavior by injecting custom CSS and JavaScript. You can unify the global font family, set a background image, modify Electron BrowserWindow options, add your own custom styles and scripts, and even patch files in other VSCode extensions.

• Works with VSCode 1.120! (Tested on Windows and MacOS)
• Support Agents window

[!warning]

This extension works by modifying the VSCode's source css and js files.

❗CLAIM

Untested on Linux and VSCode forks (like Cursor, WindSurf, etc.), and I currently lack the energy to adapt them. If this extension causes issues in your editor, please consider using these more mature alternative extensions

Features

• Unify the global font family for the editor and webviews.
• Set a background image for the editor window.
• Apply custom stylesheets to both the editor and webviews.
• Configure Electron BrowserWindow options.
• Support for restarting VSCode to apply changes.
• Suppress the "Your Code installation is corrupt" message.
• Load external CSS and JavaScript files.
• Patch files in other extensions.

Usage

1. Backup: When you first install the extension or after a VSCode update, you'll be prompted to create a backup of the original files. This is important for rollback.
2. Configure: Add your customizations to your settings.json file. See the Example and Configurations sections for details.
3. Apply: Open the Command Palette (<kbd>Ctrl+Shift+P</kbd> or <kbd>Cmd+Shift+P</kbd>) and run Custom UI Style: Reload to apply your changes.
4. Rollback: To revert all changes and restore the original VSCode files, run Custom UI Style: Rollback from the Command Palette.

Example

Available CSS Variables:

• --cus-mono: Target monospace font family
• --cus-sans: Target sans-serif font family

Deprecated variables:

• --cus-monospace-font: Target monospace font family
• --cus-sans-font: Target sans-serif font family

{
  // Electron BrowserWindow options
  //  - https://www.electronjs.org/docs/latest/api/base-window
  //  - https://www.electronjs.org/docs/latest/api/browser-window
  "custom-ui-style.electron": {
    // Frameless window (no title bar, no MacOS traffic light buttons)
    //  - "A frameless window removes all chrome applied by the OS, including window controls"
    //  - https://www.electronjs.org/docs/latest/api/base-window#new-basewindowoptions
    //  - https://www.electronjs.org/docs/latest/tutorial/custom-window-styles#frameless-windows
    //  - https://www.electronjs.org/docs/latest/tutorial/custom-title-bar
    "frame": false,
    // Disable rounded corners (MacOS)
    //  - https://www.electronjs.org/docs/latest/api/base-window#new-basewindowoptions
    //  - "Whether frameless window should have rounded corners on MacOS"
    //  - "Setting this property to false will prevent the window from being fullscreenable"
    "roundedCorners": false,
  },
  "custom-ui-style.font.sansSerif": "Maple UI, -apple-system",
  "custom-ui-style.background.url": "file:///D:/image/ide-bg.jpg",
  "custom-ui-style.webview.monospaceSelector": [".codeblock", ".prism [class*='language-']"],
  // Custom stylesheet, support native nest selectors
  "custom-ui-style.stylesheet": {
    "kbd, .statusbar": {
      "font-family": "var(--cus-mono)",
    },
    ".chat-question-carousel-container code": {
      "font-family": "var(--cus-mono) !important",
    },
    "span:not([class*='dyn-rule'])+span[class*='dyn-rule']": {
      "border-top-left-radius": "3px",
      "border-bottom-left-radius": "3px",
    },
    "span[class*='dyn-rule']:has(+span[class*='dyn-rule']+span:not([class*='dyn-rule']))": {
      "border-top-right-radius": "3px",
      "border-bottom-right-radius": "3px",
    },
    ".cdr": {
      "border-radius": "3px",
    },
    ".monaco-findInput .monaco-inputbox": {
      "width": "calc(100% + 6px)",
    },
    ".monaco-workbench .activitybar .monaco-action-bar": {
      "& .action-label": {
        "font-size": "21px !important",
        "&::before": {
          "position": "absolute",
          "z-index": 2,
        },
        "&::after": {
          "content": "''",
          "width": "75%",
          "height": "75%",
          "position": "absolute",
          "border-radius": "6px",
        },
      },
      "& .action-item:hover .action-label": {
        "color": "var(--vscode-menu-selectionForeground) !important",
        "&::after": {
          "background-color": "var(--vscode-menu-selectionBackground)",
        },
      },
      "& .active-item-indicator:before": {
        "border": "none !important",
        "width": "3px !important",
        "height": "calc(100% - 12px) !important",
        "top": "6px !important",
        "border-radius": "4px",
      },
      "& .action-item.checked .active-item-indicator:before": {
        "background": "var(--vscode-activityBar-activeBorder)",
      },
    },
    ".basepanel .composite-bar-container .actions-container > .action-item": {
      "height": "24px",
      "padding": "0 8px !important",
      "border-radius": "4px",
      "align-items": "center",
      "justify-content": "center",
      "&.checked": {
        "background": "color-mix(in srgb, var(--vscode-foreground) 12%, transparent)",
      },
      "& .active-item-indicator:before": {
        "content": "none !important",
      },…