Customize VS code Interface

vs_code_customization.md

First Install Custom CSS and JS Loader

"vscode_custom_css.imports": [
  "file:///home/ds/vscode.css",
  "file:///home/ds/vscode.js"
]

sudo chown -R $(whoami) /usr/share/code
sudo chown -R $(whoami) "$(which code)"

https://bloggerpilot.com/tools/svg-to-css/

vscode.css

/* Sidebar title */
.composite.title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-items: center !important;
}

.composite.title h2 {
    font-weight: bold !important;
    font-size: 12px !important;
    text-transform: uppercase;
}

.composite.title h2::before {
    display: inline-block;
    margin-right: 6px;
    font-size: 1.1rem;
    content: '';
}

/* Scroll Bar */
.slider {
    position: absolute !important;
    right: 1px !important;
    width: 1px !important;
    background: #bc9abc !important;
    left: auto !important;
}

.codicon-toolbar-more,
.codicon-word-wrap {
    display: block !important;
}

/* Tooltip box style */
.monaco-editor-hover,
.monaco-hover {
    box-shadow: 0px 8px 32px rgba(0, 0, 0, .45) !important;
    padding: 10px !important;
    background-image: linear-gradient(#21252b 0%, #282c34 100%) !important;
    -webkit-backdrop-filter: blur(1px) !important;
            backdrop-filter: blur(1px) !important;
    border-radius: 20px !important;
    border: none !important
}

/* Command Palette */
.quick-input-widget {
    transform: translateY(-50%) !important;
    top: 50% !important;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, .45) !important;
    padding: 10px 10px 18px 10px !important;
    background-image: linear-gradient(#21252b 0%, #282c34 100%) !important;
    -webkit-backdrop-filter: blur(1px) !important;
            backdrop-filter: blur(1px) !important;
    border-radius: 20px !important;
}

/* Remove background for lists */
.monaco-list-rows {
    background: transparent !important;
}

/* List hover */
.monaco-list-row:hover {
    background: rgba(0, 0, 0, .2) !important;
}

.notifications-toasts .monaco-list-row:hover {
    background: none !important;
}

/* Command palette text input */
.quick-input-filter .monaco-inputbox {
    border-radius: 12px !important;
    padding: 8px !important;
    border: none !important;
    background-color: rgba(34, 34, 34, .40) !important;
    font-family: 'Fira Code' !important;
    font-size: 14px !important;
    margin-bottom: 16px !important;
}

#command-blur {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .15);
    top: 0;
    left: 0;
    -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
}

/* Command palette's input box placeholder. */
.monaco-inputbox input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, .3) !important;
}
.monaco-inputbox input::-moz-placeholder {
    color: rgba(255, 255, 255, .3) !important;
}
.monaco-inputbox input:-ms-input-placeholder {
    color: rgba(255, 255, 255, .3) !important;
}
.monaco-inputbox input::-ms-input-placeholder {
    color: rgba(255, 255, 255, .3) !important;
}
.monaco-inputbox input::placeholder {
    color: rgba(255, 255, 255, .3) !important;
}


/* Container that holds the VS Code home icon. */
.editor-group-watermark {
    max-width: none !important;
}

.command-center-center {
    width: auto !important;
}

.letterpress {
    background-image: url("data:image/svg+xml,%3Csvg width='964' height='165' viewBox='0 0 964 165' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E .primary-color%7B fill: %230d1117; %7D .secondary-color%7B fill: %23fff; %7D%0A%3C/style%3E%3Cg clip-path='url(%23clip0_3_4)'%3E%3Cpath d='M939.26 0.730002C940.64 0.680002 942.02 0.690001 943.39 0.780001C950.9 1.24 958.92 4.28 962.18 11.57C965.14 18.19 963.3 26.83 957.4 31.2C950.2 36.54 939.82 35.25 931.41 36.44C925.74 37.24 920.17 38.85 915.19 41.72C901.2 49.76 896.48 65.25 895.41 80.45C894.76 89.69 895.19 99.01 895.28 108.27C895.28 114.98 895.41 121.68 895.47 128.39C895.53 134.96 895.99 141.84 894.83 148.33C894.1 152.44 892.5 156.5 889.63 159.53C886.82 162.5 882.83 164.35 878.74 164.51C870.36 164.83 864.26 158.5 862.32 150.82C860.48 143.55 861.42 135.94 861.51 128.54C861.51 111.21 861.56 93.76 862.5 76.46C863.91 58.82 868.74 41.53 880.26 27.72C891.05 14.79 905.93 7 922.22 3.39C927.73 2.15 933.51 0.930002 939.26 0.730002Z' class='primary-color'/%3E%3Cpath d='M846.74 78.02C846.86 68.76 847.23 59.77 844.41 50.8C837.04 27.35 814.08 11.69 791.77 4.23C766.99 -4.06 738.36 1.52 717.8 17.44C697.54 33.13 686.37 57.95 686.23 83.34C686.14 98.61 690.5 113.89 698.69 126.79C713.11 149.51 739.02 163.51 765.82 164.1C772.3 164.24 778.71 163.56 785.01 162.06C795.21 159.63 804.68 154.92 813.48 149.31C815.2 154.53 817.11 159.89 822.37 162.54C826.44 164.58 832.18 164.5 836.4 163.01C849.93 158.23 846.9 140.69 847.05 129.61C847.25 114.59 846.76 99.55 846.7 84.55C846.68 82.38 846.71 80.2 846.74 78.02ZM813.4 83.45C813.38 84.29 813.34 85.12 813.27 85.95C813.21 86.79 813.13 87.62 813.02 88.45C812.92 89.28 812.79 90.11 812.65 90.93C812.5 91.76 812.34 92.58 812.15 93.39C811.97 94.21 811.76 95.02 811.54 95.82C811.32 96.63 811.07 97.43 810.81 98.22C810.54 99.02 810.26 99.81 809.96 100.59C809.66 101.37 809.34 102.14 809 102.9C808.66 103.67 808.3 104.42 807.92 105.17C807.55 105.92 807.15 106.65 806.74 107.38C806.33 108.11 805.9 108.83 805.45 109.53C805 110.24 804.54 110.93 804.05 111.62C803.57 112.3 803.07 112.97 802.56 113.63C794.34 124.02 782.22 128.3 769.43 129.7C758.46 129.47 748.88 127.81 739.81 121.26C729.35 113.7 722.85 102.42 720.97 89.69C720.85 88.89 720.75 88.1 720.68 87.3C720.6 86.49 720.54 85.69 720.5 84.89C720.47 84.09 720.45 83.28 720.45 82.48C720.45 81.67 720.47 80.87 720.51 80.06C720.56 79.26 720.62 78.46 720.7 77.66C720.78 76.86 720.88 76.06 721 75.26C721.12 74.47 721.26 73.68 721.42 72.89C721.58 72.1 721.76 71.32 721.96 70.54C722.16 69.76 722.38 68.98 722.62 68.22C722.86 67.45 723.11 66.68 723.39 65.93C723.66 65.17 723.96 64.42 724.27 63.68C724.58 62.94 724.91 62.21 725.26 61.48C725.61 60.76 725.98 60.04 726.36 59.34C726.74 58.63 727.15 57.93 727.56 57.24C727.98 56.56 728.42 55.88 728.87 55.22C729.32 54.55 729.79 53.9 730.28 53.26C739 41.75 751.84 37.11 765.75 35.27C765.92 35.24 766.09 35.21 766.27 35.19C776.24 34.24 788.05 38.81 795.86 44.79C805.53 52.22 811.58 63.92 813.05 75.94C813.15 76.77 813.23 77.6 813.29 78.43C813.35 79.27 813.39 80.1 813.41 80.94C813.43 81.78 813.42 82.61 813.4 83.45Z' class='primary-color'/%3E%3Cpath d='M646.97 147.61C618.73 169.17 578.42 169.45 549.6 148.86C535.81 139.01 526.01 124.72 520.64 108.75C526.45 113.12 533.67 115.71 541.49 115.71C548.43 115.71 554.9 113.67 560.34 110.14C563.18 113.57 566 116.99 569.4 119.9C578.64 127.86 590.4 130.49 602.35 129.47C614.95 128.4 626.52 122.43 634.35 112.37C641.96 102.59 644.94 89.81 643.86 77.58C642.99 67.72 639.22 58.06 632.7 50.55C622.79 39.15 607.8 33.92 592.9 35.42C579.59 36.76 570.84 43.2 562.61 53.29C556.75 48.8 549.43 46.13 541.49 46.13C533.7 46.13 526.52 48.7 520.72 53.03C520.71 53.03 520.71 53.03 520.71 53.03C523.41 45.54 526.75 38.81 531.79 32.41C546.59 13.63 569.51 2.55 593.01 1.2C604.3 0.550001 615.72 2.14 626.44 6.19C649.13 14.76 667.21 34.15 674.73 57.15C674.83 57.47 674.94 57.79 675.04 58.11C685.11 90.05 673.64 127.24 646.97 147.61Z' class='primary-color'/%3E%3Cpath d='M541.51 105.44C555.124 105.44 566.16 94.4038 566.16 80.79C566.16 67.1762 555.124 56.14 541.51 56.14C527.896 56.14 516.86 67.1762 516.86 80.79C516.86 94.4038 527.896 105.44 541.51 105.44Z' class='primary-color'/%3E%3Cpath d='M549.3 65.31L546.38 74.35L539.31 96.28H533.71V96.26L536.62 87.23L543.7 65.31H549.3Z' class='secondary-color'/%3E%3Cpath d='M549.3 65.31L546.38 74.35L539.31 96.28H533.71V96.26L536.62 87.23L543.7 65.31H549.3Z' class='secondary-color'/%3E%3Cpath d='M520.9 83.46V78.13C527.97 78.13 533.71 72.38 533.71 65.32H539.04C539.04 75.32 530.9 83.46 520.9 83.46Z' class='secondary-color'/%3E%3Cpath d='M535.52 86.88L533.4 93.46C532.11 87.74 527 83.46 520.9 83.46V78.13C524.36 78.13 527.6 79.11 530.36 80.8C532.52 82.12 534.38 83.89 535.82 85.97L535.52 86.88Z' class='secondary-color'/%3E%3Cpath d='M562.11 78.13V83.46C558.65 83.46 555.41 82.48 552.65 80.79C550.49 79.46 548.63 77.7 547.19 75.62L549.61 68.12C550.9 73.84 556.01 78.13 562.11 78.13Z' class='secondary-color'/%3E%3Cpath d='M549.3 96.27H543.97C543.97 86.26 552.11 78.12 562.12 78.12V83.45C555.05 83.46 549.3 89.21 549.3 96.27Z' class='secondary-color'/%3E%3Cpath d='M372.82 0.149999C376.4 -0.120001 380.2 0.0999986 383.36 1.99C388.34 4.97 389.73 10.24 391.11 15.47C397.59 9.54 406.22 5.43 414.65 3.15C440.23 -3.76 469.45 2.55 487.45 22.61C507.3 44.74 506.39 74.82 506.59 102.65C506.68 115.75 507.27 128.86 506.42 141.93C506.01 148.34 505.01 155.25 500.49 159.82C497.25 163.09 492.44 164.67 487.87 164.09C483.31 163.51 479.09 160.8 476.54 156.98C473.02 151.7 472.78 144.96 472.86 138.62C473.09 119.02 475.24 99.38 473.55 79.85C472.55 68.3 469.92 56.27 462.22 47.61C456.02 40.63 446.92 36.5 437.62 35.74C425.35 34.74 411.79 39 403.68 48.53C396.34 57.16 393.5 68.76 392.65 79.81C391.12 99.74 393.12 119.83 392.63 139.79C392.48 145.81 391.59 152.01 388.48 157.18C384.99 162.98 378.01 165.39 371.49 163.91C368.37 163.2 365.52 161.54 363.38 159.16C361.04 156.56 359.81 153.11 359.31 149.64C358.24 142.15 359.09 134.03 359.02 126.47C358.95 118.35 358.85 110.23 358.74 102.11C358.53 85.86 358.3 69.62 358.32 53.37C358.32 51.91 358.33 50.45 358.33 48.98C358.36 40.21 358.48 31.44 358.72 22.67C358.86 17.71 359.04 11.76 361.45 7.29C363.79 2.98 368.35 1.37 372.82 0.149999Z' class='primary-color'/%3E%3Cpath d='M221.07 153.2C224.07 155.25 236.56 159.05 238.27 159.59C243.88 161.39 249.6 162.79 255.46 163.48C267.56 164.9 280.04 163.59 291.46 159.3C293.33 158.6 310.42 151.13 309.98 149.82C311.8 155.22 314 160.1 319.44 162.75C327.32 166.59 336.81 163.46 340.94 155.78C343.5 151.02 344.05 145.44 344.01 140.04C343.89 124.87 343.8 109.7 343.32 94.53C342.83 78.94 343.02 63.4 336.87 48.81C330.69 34.15 319.96 21.43 306.52 13.11C292.26 4.29 275.49 0.220002 259.02 1.03C241.03 1.91 223.4 8.61 209.81 21.31C216.17 34.74 220.55 46.65 221.43 61.61C226.46 53.53 232.47 45.39 240.98 40.69C250.03 35.68 261.06 34.03 271.22 35.79C292.31 39.43 307.41 56.94 309.07 78.01C310.62 97.51 300.7 117.51 282.34 125.49C280.86 126.14 279.34 126.7 277.79 127.19C263.99 131.55 248.51 129.8 236.44 121.69C229.89 117.29 225.26 111.53 221.07 104.95V153.2Z' class='primary-color'/%3E%3Cpath d='M56.91 0.269996C57.5 0.159996 57.28 0.189996 58.02 0.139996C75.92 -0.960004 91.03 4.55 104.47 16.15C115.16 5.64 128.83 0.919996 143.65 0.139996C159.61 -0.710004 175.23 4.5 187.04 15.37C201.29 28.49 205.96 47 206.7 65.78C207.31 81.19 206.88 96.78 206.86 112.21C206.85 123.89 207.92 137.95 205.67 149.29C203.7 159.18 194.72 167 184.25 163.97C163.77 158.05 171.39 123.04 171.46 107.87C171.53 94.06 171.39 80.24 170.26 66.47C169.02 51.27 164.44 34.66 145.86 34.99C132.06 35.24 123.83 46.5 121.95 59.26C119.21 77.8 122.21 96.09 123.1 114.62C123.66 126.24 123.68 143.49 111.11 149.14C96.18 155.84 86.54 140 85.56 127.4C84.83 117.98 86.03 108.46 86.08 99.05C86.18 80.16 92.17 40.09 65.79 35.13C50.35 32.26 39.48 44.72 36.7 58.53C33.96 72.12 36.26 86 36.5 99.69C36.74 113.48 36.81 127.37 36.34 141.15C36.02 150.35 33.45 161.08 23.48 164.06C9.83002 168.14 1.04002 154.86 0.790023 142.89C0.240023 116.17 -0.879977 89.14 1.21002 62.47C2.45002 46.7 5.84002 32.45 16.42 20.36C27.01 8.25 41.09 2.4 56.91 0.269996Z' class='primary-color'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3_4'%3E%3Crect width='963.56' height='164.82' class='secondary-color'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") !important;
    background-repeat: no-repeat no-repeat !important;
    background-position: center center !important;
    width: 60% !important;
}

.mtk7 {
    font-family: 'Cascadia Code';
    font-style: italic;
}

.mtk3 {
    color: #e06c75;
    background-image: linear-gradient(45deg, #ff61d2, #fe908f);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 700;
}
.mtk5 {
    color: #d19a66;
    background-image: linear-gradient(45deg, #11998f, #38ef7d);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-weight: 700;
}

.mtk9 {
    color: #efdf62;
}

.monaco-editor .detected-link, .monaco-editor .detected-link-active {
    text-decoration: none;
    text-underline-position: under;
    border-bottom: 3px dashed;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active.tab-border-bottom>.tab-border-bottom-container {
    bottom: 0;
    height: 3px;
    z-index: 10;
    background-color: #11998f;
    background-image: linear-gradient(to right, #11998f, #d13abd, #efbd8a, #d13abd, #11998f);
    -webkit-animation: activeTabAnimate 4s linear infinite;
            animation: activeTabAnimate 4s linear infinite;
}

@-webkit-keyframes activeTabAnimate {
    from {
        background-position: 0%;
    }
    to {
        background-position: 200%;
    }
}

@keyframes activeTabAnimate {
    from {
        background-position: 0%;
    }
    to {
        background-position: 200%;
    }
}

vscode.js

document.addEventListener('DOMContentLoaded', function() {
    const checkElement = setInterval(() => {
        const commandDialog = document.querySelector(".quick-input-widget");
        if (commandDialog) {

            // Create an DOM observer to 'listen' for changes in element's attribute.
            const observer = new MutationObserver((mutations) => {
                mutations.forEach((mutation) => {
                    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                        if (commandDialog.style.display === 'none') {
                            handleEscape();
                        } else {
                            // If the .quick-input-widget element (command palette) is in the DOM
                            // but no inline style display: none, show the backdrop blur.
                            runMyScript();
                        }
                    }
                });
            });

            observer.observe(commandDialog, { attributes: true });

            // Clear the interval once the observer is set
            clearInterval(checkElement);
        } else {
            console.log("Command dialog not found yet. Retrying...");
        }
    }, 500); // Check every 500ms

    // Execute when command palette was launched.
    document.addEventListener('keydown', function(event) {
        if ((event.metaKey || event.ctrlKey) && event.key === 'p') {
            event.preventDefault();
            runMyScript();
        } else if (event.key === 'Escape' || event.key === 'Esc') {
            event.preventDefault();
            handleEscape();
        }
    });

    // Ensure the escape key event listener is at the document level
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape' || event.key === 'Esc') {
            handleEscape();
        }
    }, true);

    function runMyScript() {
        const targetDiv = document.querySelector(".monaco-workbench");

        // Remove existing element if it already exists
        const existingElement = document.getElementById("command-blur");
        if (existingElement) {
            existingElement.remove();
        }

        // Create and configure the new element
        const newElement = document.createElement("div");
        newElement.setAttribute('id', 'command-blur');

        newElement.addEventListener('click', function() {
            newElement.remove();
        });

        // Append the new element as a child of the targetDiv
        targetDiv.appendChild(newElement);
    }

    // Remove the backdrop blur from the DOM when esc key is pressed.
    function handleEscape() {
        const element = document.getElementById("command-blur");
        if (element) {
            element.click();
        }
    }
});

https://www.youtube.com/watch?v=9_I0bySQoCs
Source Video