Skip to content

Instantly share code, notes, and snippets.

Last active Jul 12, 2020
What would you like to do?
A script to make VSCode load CSS from a custom URI

A script to make VSCode load CSS from a custom URI.

I've added some known vscode resource dir paths (for code/vscodium-bin for manjaro/arch and one path from some .deb package).

Patch contents are in the middle of the script. Yes, it literally inserts just one line :) If the patch fails, just adapt it for your version of workbench.html. Or rewrite it with grep+sed, it will be shorter and won't be so dependent on the exact content of unrelated lines. Something like this:

grep -q "$link" "$file" || sed -i 's|\(\t</head>\)|\t\t'"$link"'\n\1|' "$file"
# update hash...

Example css:

.linux {
    --monaco-monospace-font: "Iosevka", "Fantasque Sans Mono",
        "Fira Sans Compressed", "Droid Sans Mono", "Inconsolata", "Courier New",
        monospace, "Droid Sans Fallback";

    font-family: var(--monaco-monospace-font);
.monaco-pane-view .pane > .pane-header h3.title {
    font-size: 14px !important;
.monaco-workbench .part > .title > .title-label h2,
.monaco-list-row {
    font-size: 16px !important;
# patch vscode to load custom css
# the script optionally accepts a list of paths to vscode resource directories
# (they should contain product.json). only the first valid path is patched.
set -eu
# URI to load CSS from
info() { echo "$@" >&2; }
abort() { echo "$@" >&2 && exit 1; }
main() {
# check deps
for app in jq openssl; do
command -v "$app" >/dev/null || abort "This script requires '$app' to be installed."
# find vscode resources dir
for dir in "$@" \
/usr/lib/code \
/usr/share/code/resources/app \
/usr/share/vscodium-bin/resources/app \
/Applications/; do
[ -f "$dir/product.json" ] || continue
[ -d "${CODE_DIR:-}" ] || abort "No VSCode dir found."
info "Detected VSCode in: $CODE_DIR"
# prepare patch
diff --git a/workbench.html b/workbench.html
index 693082b..dc8634b 100644
@@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data: blob: vscode-remote-resource:; media-src 'none'; frame-src 'self' vscode-webview: https://*; object-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https: vscode-remote-resource:;">
+ <link rel="stylesheet" type="text/css" href="$CSS_URL"/>
<body aria-label="">
# exit if patch is already applied (prevents sudo prompt on noop runs)
echo "$PATCH_CONTENT" | patch -d/ -p0 -t -N -r - --dry-run -s \
|| abort "Seems like VSCode is already patched (or you have an older version
of it and the patch doesn't apply). Stopping."
# apply patch (to undo, just remove `-N` and comment out the check above)
echo "$PATCH_CONTENT" | sudo patch -d/ -p0 -t -N -r -
# and update hash so vscode doesn't complain
new_html_hash=$(openssl dgst -md5 -binary "$HTML_FULL_PATH" | openssl enc -base64 | tr -d '=')
new_product_json=$(jq 'setpath(["checksums", "'"$HTML_SHORT_PATH"'"]; "'"$new_html_hash"'")' "$PRODUCT_JSON_PATH")
echo "$new_product_json" | sudo tee "$PRODUCT_JSON_PATH" >/dev/null
info "VSCode will now load CSS from: $CSS_URL"
main "$@"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment