Skip to content

VSCode extension that custom ui css style in both editor and webview, unify global font family, setup background image and Electron BrowserWindow options

License

Notifications You must be signed in to change notification settings

subframe7536/vscode-custom-ui-style

Repository files navigation

Custom UI Style

Visual Studio Marketplace Version Made with reactive-vscode

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

  • Works with VSCode 1.96!

Warning

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

So, a warning appears while the first time to install or VSCode update. You can click the [never show again] to avoid it. From V0.4.0, the warning will no longer prompt. #11

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

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

FAQ

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.

RangeError: Maximum call stack size exceeded

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

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

See #6

Notice

Please make sure the VSCode is totally replaced while upgrading.

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 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, support protocol: 'https://', 'file://', 'data:' string ``
custom-ui-style.background.opacity Background image opacity 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.stylesheet Custom css for editor, support nest selectors object {}
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

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-ui-style.stylesheet": {
    "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"
    },
    ".quick-input-widget": {
      "top": "25vh !important"
    },
    ".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)"
        }
      }
    }
  }
}

Credit

License

MIT

About

VSCode extension that custom ui css style in both editor and webview, unify global font family, setup background image and Electron BrowserWindow options

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •