Custom UI Style

VSCode extension that custom ui css style in both editor and webview

• Works with VSCode 1.98! (Tested on Windows and MacOS)

Warning

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

❗CLAIM

Untested on Linux and VSCode forks (Cursor, WindSurf, etc.) and currently I have no energy to adapte them.

So if this extension breaks your editor, you can use these more mature alternative extension

Features

• Unified global font family
• Setup background image
• Custom nest stylesheet for both editor and webview
• Custom Electron BrowserWindow options
• [From V0.4.0] Support total restart
• [From V0.4.0] Suppress corrupt message
• [From V0.4.2] Load external CSS or JS file

Usage

When first installed or new VSCode version upgraded, the plugin will prompt to dump backup file.

After changing the configuration, please open command panel and run Custom UI Style: Reload to apply the configuration.

To rollback or uninstall the plugin, please open command panel and run Custom UI Style: Rollback to restore the original VSCode file.

See details

Example

Avaiable CSS 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-monospace-font)",
    },
    "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:not([class*='dyn-rule']))": {
      "border-top-right-radius": "3px",
      "border-bottom-right-radius": "3px"
    },
    ".cdr": {
      "border-radius": "3px"
    },
    // No longer needed since v1.97.0 allows to move the command palette position
    // ".quick-input-widget": {
    //   "top": "25vh !important"
    // },
    ".monaco-findInput .monaco-inputbox": {
      "width": "calc(100% + 6px)"
    },
    ".overlayWidgets .editorPlaceholder": {
      "line-height": "unset !important"
    },
    ".monaco-workbench .activitybar .monaco-action-bar": {
      "& .action-label": {
        "font-size": "20px !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)"
        }
      }
    }
  }
}

External Resources (CSS or JS File)

From v0.4.2, the extension supports loading external CSS or JS file from local file or remote URL. This operation may introduce security issue or runtime crash, use it with caution!

All resources will be applied in editor instead of webview.

All resources will be fetched, merged and persist according to resource type during reload, so there is no watcher support.

{
  "custom-ui-style.external.imports": [
    // assume the script is ESM format
    "file://D:/data/test.js",
    "file:///Users/yourname/test.js",

    // Variable supports:
    // Load from user home dir
    "file://${userHome}/test.css",
    // Load from environment variable (with optional fallback value)
    "file://${env:your_env_name:optional_fallback_value}/other.js",

    // Remote resources will be downloaded
    {
      // <link rel="stylesheet" href="./external.css"></link>
      // will load before `custom-ui-style.stylesheet`
      "type": "css",
      "url": "https://fonts.googleapis.com/css?family=Sofia",
    },
    {
      // <script src="./external.js"></script>
      "type": "js",
      "url": "https://example.com/test.js",
    },
    {
      // <script src="./external.module.js" type="module"></script>
      "type": "js-module",
      "url": "https://example.com/test.module.js",
    }
  ]
}

Load Strategy

By default, all resources will be refetched during every reload. Failed fetch will be skipped.

To skip refetching resources if there is nothing changed on custom-ui-style.external.imports and all resources are successfully fetched before, setup:

{
  "custom-ui-style.external.loadStrategy": "cache"
}

To disable all external resources, setup:

{
  "custom-ui-style.external.loadStrategy": "disable"
}

FAQ

What is modified

ALL modifications are located in VSCode's installation directory, and modified files are backed up with custom-ui-style suffix in same directory. See all file paths in path.ts

When reload config, the extension will check backup file first, then read content from backup file and overwrite the original file with patches. Finally try to reload window or restart APP.

No Effect

If you are using Windows or Linux, make sure you have closed all the VSCode windows and then restart.

If you are using MacOS, press Command + Q first, then restart VSCode.

There are guide and video (MacOS) of the process.

EROFS: read-only file system

This extension need to modify VSCode's source code but VSCode runs on read-only filesystem (snap, AppImage...). Maybe you need to choose another way to install VSCode.

RangeError: Maximum call stack size exceeded

Due to system permission restrictions, maybe you will receive RangeError: Maximum call stack size exceeded prompt when you reload the configuration. You need to fully close VSCode first (press Command + Q on MacOS), then run:

# MacOS
sudo chown -R $(whoami) "/Applications/Visual Studio Code.app"

# Linux
sudo chown -R $(whoami) "/usr/local/code"

See in #6

Fail to render panel

According to #34, in Cursor (close source VSCode's fork), the extension detail panel will not show by default due to the violation of iframe's CSP. Currently the way to fix it is just skip patch on webview, so please set:

{
  "custom-ui-style.webview.enable": false
}

Configurations

Key	Description	Type	Default
custom-ui-style.preferRestart	Prefer to restart vscode after update instead of reload window only (ALWAYS true when VSCode version >= 1.95.0)	boolean	false
custom-ui-style.reloadWithoutPrompting	Reload/restart immediately, instead of having to click 'Reload Window' in the notification	boolean	false
custom-ui-style.watch	Watch configuration changes and reload window automatically (ignore imports)	boolean	true
custom-ui-style.electron	Electron BrowserWindow options	object	{}
custom-ui-style.font.monospace	Global monospace font family that apply in both editor and webview, fallback to editor's font family	string	``
custom-ui-style.font.sansSerif	Global sans-serif font family that apply in both editor and webview	string	``
custom-ui-style.background.url	Full-screen background image url (will not sync), support protocol: 'https://', 'file://', 'data:'	string	``
custom-ui-style.background.syncURL	Full-screen background image url (will sync), support variable: [${userHome}, ${env:your_env_name:optional_fallback_value}], has lower priority than 'Url', support protocol: 'https://', 'file://', 'data:'	string	``
custom-ui-style.background.opacity	Background image opacity (0 ~ 1)	number	0.9
custom-ui-style.background.size	Background image size	string	"cover"
custom-ui-style.background.position	Background image position	string	"center"
custom-ui-style.external.loadStrategy	Load strategy for external CSS or JS resources	string	"refetch"
custom-ui-style.external.imports	External CSS or JS resources, support variable: [${userHome}, ${env:your_env_name:optional_fallback_value}], support protocol: 'https://', 'file://'	array	``
custom-ui-style.stylesheet	Custom css for editor, support nest selectors	object	{}
custom-ui-style.webview.enable	Enable style patch in webview	boolean	true
custom-ui-style.webview.monospaceSelector	Custom monospace selector in webview	array	``
custom-ui-style.webview.sansSerifSelector	Custom sans-serif selector in webview	array	``
custom-ui-style.webview.stylesheet	Custom css for webview, support nest selectors	object	{}

Commands

Command	Title
custom-ui-style.reload	Custom UI Style: Reload
custom-ui-style.rollback	Custom UI Style: Rollback

Credit

• APC for my previous usage
• Background for my previous usage
• vscode-sync-settings for fully restart logic
• vscode-fix-checksums for checksum patch logic (Prevent corrupt warning notice on startup)
• Custom CSS and JS Loader for external resource logic

License

MIT