custom-css.css

* {
    font-family: Dank Mono, monospace;
}

.actions-container.highlight-toggled {
    display: none !important;
}

.editor .title .actions-container .action-item a {
    visibility: hidden;
}

.editor .title .actions-container {
    flex-direction: row-reverse;
}

.monaco-workbench .part>.header-or-footer, .monaco-workbench .part>.title {
    height: 28px !important;
    padding-left: 0px !important;
}

.monaco-workbench .part>.title>.title-label {
    line-height: 30px !important;
}

/* Code canvas top shadow */
.monaco-editor .scroll-decoration {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, .75) !important;
    top: -6px !important;
}

.monaco-workbench .part.titlebar>.titlebar-container {
    background-color: #2b2e3c !important;
}

/* Project title's style at the top. */
.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item.command-center-center {
    border: none !important;
    background: transparent !important;
}


/* File Explorer Selected Item */
.monaco-list.list_id_1 .monaco-list-row.selected {
    background-color: #4f5971 !important;
    opacity: 1 !important;
    border-top: 1px #727b90 solid;
    border-bottom: 1px #727b90 solid;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions {
    display: none !important;
}


.monaco-editor-hover,
.monaco-hover {
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.45) !important;
    padding: 10px !important;
    background-color: #2b2e3c !important;
    backdrop-filter: blur(3px) !important;
    background-color: #2b2e3c !important;
    margin: 6px !important;
    border-radius: 6px !important;
    border: 1px solid #63697355 !important;
}

/* Project Title */
.titlebar-left {
    justify-content: flex-start !important;
    flex-grow: 0 !important;
    width: auto !important;
}

.monaco-split-view2.horizontal>.monaco-scrollable-element>.split-view-container>.split-view-view {
    background-color: rgb(49, 52, 69) !important;
}
.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item.command-center-center {
    width: 200px !important;
}

/* Search Label */
.search-label {
    font-family: 'Dank Mono' !important;
    font-size: 11px !important;
    color: rgb(198, 208, 245) !important;
}

/* Search icon */
.search-icon {
    display: none !important;
}

.codicon-search::before {
    display: none !important;
}

.codicon-arrow-right,
.codicon-arrow-left {
    display: none !important;
}

.titlebar-right>* {
    display: none !important;
}

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

.monaco-workbench .activitybar {
    display: none !important;
}

.monaco-workbench .sidebar .title-actions {
    display: none !important;
}

.monaco-editor .cursor {
    background: linear-gradient(to bottom, #7f00ff, #e100ff) !important;
    color: #292D3E !important;
}

.quick-input-widget {
    transform: translateY(-50%) !important;
    top: 50% !important;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.45) !important;
    padding: 10px 10px 18px 10px !important;
    background-color: #2b2e3c !important;
    border-radius: 6px !important;
    border: 1px solid #63697355 !important;
    z-index: 1000000 !important;
}

.monaco-workbench::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    visibility: hidden;
}

.quick-input-widget:not(:empty)~.monaco-workbench::after {
    opacity: 1;
    visibility: visible;
}

.quick-input-list {
    max-height: calc(50vh - 60px) !important;
    overflow-y: auto !important;
}

.quick-input-list .monaco-list {
    background-color: #2b2e3c !important;
}

.quick-input-list .monaco-list-row {
    color: #C6D0F5 !important;
    background-color: #2b2e3c !important;
}

.quick-input-list .monaco-list-row.focused {
    background-color: #414660 !important;
}

.quick-input-list .monaco-list-row:hover:not(.focused) {
    background-color: #363a4f !important;
}

.monaco-scrollable-element .shadow.top {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .75) !important;
    top: -3px !important;
}

.scrollbar.vertical .slider {
    width: 2px !important;
    background: #c494df !important;
    border-radius: 5px !important;
    margin-left: 10px !important;
}

.scrollbar.horizontal .slider {
    background: #c494df !important;
    border-radius: 5px !important;
    height: 2px !important;
}

.scrollbar.horizontal {
    position: absolute !important;
    height: 2px !important;
    bottom: 3px !important;
    left: 0px !important;
}

.quick-input-title {
    color: #C6D0F5 !important;
}

.monaco-inputbox {
    background-color: #2b2e3c !important;
}

.monaco-inputbox input {
    background-color: #2b2e3c !important;
    color: #C6D0F5 !important;
}

.quick-input-list .monaco-list:not(.mouse-support) {
    border: none !important;
}

.decorationsOverviewRuler {
    display: none !important;
}

.quick-input-list .monaco-list:not(.mouse-support) .monaco-list-row:hover:not(.focused) {
    background-color: #2b2e3c !important;
}

custom-js.js

document.addEventListener('DOMContentLoaded', function() {
    const checkElement = setInterval(() => {
        const commandDialog = document.querySelector(".quick-input-widget");
        if (commandDialog) {
          // Apply the blur effect immediately if the command dialog is visible
          if (commandDialog.style.display !== "none") {
            runMyScript();
          }
            // 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();
        }
    }
});