Custom CSS for to style VSCode for Laravel.

custom.css

* {
    outline: none !important;
}

/* find widget */
.editor-widget {
    border-radius: 6px !important;
    box-shadow: 0 0px 8px rgba(var(--vscode-widget-shadow), .45) !important;
}

/* side panels */
.part.sidebar {
    box-shadow: 0px 0px 20px rgba(var(--vscode-widget-shadow) .25) !important;
    background-color: var(--vscode-editor-background) !important;
}

.part.sidebar ::before {
    outline: none !important;
}

.part.sidebar .composite.title {
    background-color: var(--vscode-editor-background) !important;
}

/* input box */
.monaco-inputbox {
    border-radius: 6px !important;
    padding: 4px !important;
    border: none !important;
    font-size: 14px !important;
    outline: none !important;
}

.input-box .controls {
    top: 6px !important;
}

.replace-input .controls {
    top: 7px !important;
}

.replace-container .actions-container {
    padding-top: 3px !important;
}

/* tooltips */
.monaco-editor-hover,
.monaco-hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .45) !important;
    padding: 5px !important;
    background-image: linear-gradient(var(--vscode-editor-selectionBackground) 0, var(--vscode-editorStickyScroll-background) 100%) !important;
    border-radius: 5px !important;
    backdrop-filter: blur(3px) !important;
    border: none !important;
}

/* activity bar */
.part.activitybar {
    background-color: var(--vscode-editor-background) !important;
}

/* titlebar */
.monaco-workbench .part.titlebar {
    background-color: var(--vscode-editorStickyScroll-background) !important;
}

.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center
{
    padding-left: 50px !important;
    border: none !important;
    background: transparent !important;
    width: auto;
}

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

.search-label {
    color: #fff !important;
    display: block !important;
    font-size: 14px !important;
}

.search-icon,
.codicon-search::before,
.codicon-arrow-right,
.codicon-arrow-left,
.titlebar-right > *,
.titlebar-left > *
{
    display: none !important;
}

/* command dialog */
.quick-input-widget {
    transform: translateY(-50%) !important;
    top: 50% !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45) !important;
    padding: 10px 10px 18px 10px !important;
    background-image: linear-gradient(var(--vscode-editor-selectionBackground) 0, var(--vscode-editorStickyScroll-background) 100%) !important;
    backdrop-filter: blur(3px) !important;
    border-radius: 12px !important;
}

.monaco-list-rows {
    background: transparent !important;
}

.quick-input-filter .monaco-inputbox {
    border-radius: 12px !important;
    padding: 8px !important;
    border: none !important;
    font-size: 14px !important;
    margin-bottom: 16px !important;
    outline: none !important;
}

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

/* welcome image */
.editor-group-watermark {
    max-width: 40% !important;
}

.letterpress {
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 50 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1,0,0,1,0.165775,0.348109)"><path d="M49.626,11.564C49.644,11.632 49.654,11.702 49.654,11.773L49.654,22.745C49.654,23.031 49.5,23.297 49.252,23.439L40.043,28.741L40.043,39.25C40.043,39.536 39.891,39.8 39.643,39.944L20.42,51.01C20.376,51.035 20.328,51.051 20.28,51.068C20.262,51.074 20.245,51.085 20.226,51.09C20.092,51.125 19.95,51.125 19.816,51.09C19.794,51.084 19.774,51.072 19.753,51.064C19.709,51.048 19.663,51.034 19.621,51.01L0.402,39.944C0.154,39.801 0,39.536 -0,39.25L0,6.334C0,6.262 0.01,6.192 0.028,6.124C0.034,6.101 0.048,6.08 0.056,6.057C0.071,6.015 0.085,5.972 0.107,5.933C0.122,5.907 0.144,5.886 0.162,5.862C0.185,5.83 0.206,5.797 0.233,5.769C0.256,5.746 0.286,5.729 0.312,5.709C0.341,5.685 0.367,5.659 0.4,5.64L0.401,5.64L10.011,0.107C10.258,-0.035 10.564,-0.035 10.811,0.107L20.421,5.64L20.423,5.64C20.455,5.66 20.482,5.685 20.511,5.708C20.537,5.728 20.566,5.746 20.589,5.768C20.617,5.797 20.637,5.83 20.661,5.862C20.678,5.886 20.701,5.907 20.715,5.933C20.738,5.973 20.751,6.015 20.767,6.057C20.775,6.08 20.789,6.101 20.795,6.125C20.813,6.193 20.823,6.263 20.823,6.334L20.823,26.893L28.831,22.282L28.831,11.772C28.831,11.702 28.841,11.631 28.859,11.564C28.866,11.54 28.879,11.519 28.887,11.496C28.903,11.454 28.917,11.411 28.939,11.372C28.954,11.346 28.976,11.325 28.993,11.301C29.017,11.269 29.037,11.236 29.065,11.208C29.088,11.185 29.117,11.168 29.143,11.148C29.173,11.124 29.199,11.098 29.231,11.079L29.232,11.079L38.843,5.546C39.09,5.403 39.396,5.403 39.643,5.546L49.253,11.079C49.287,11.099 49.313,11.124 49.343,11.147C49.368,11.167 49.397,11.185 49.42,11.207C49.448,11.236 49.468,11.269 49.492,11.301C49.51,11.325 49.532,11.346 49.546,11.372C49.569,11.411 49.582,11.454 49.598,11.496C49.607,11.519 49.62,11.54 49.626,11.564ZM48.052,22.282L48.052,13.158L44.689,15.094L40.043,17.769L40.043,26.893L48.053,22.282L48.052,22.282ZM38.442,38.787L38.442,29.657L33.872,32.267L20.822,39.715L20.822,48.931L38.442,38.787ZM1.602,7.719L1.602,38.787L19.22,48.93L19.22,39.716L10.016,34.507L10.013,34.505L10.009,34.503C9.978,34.485 9.952,34.459 9.923,34.437C9.898,34.417 9.869,34.401 9.847,34.379L9.845,34.376C9.819,34.351 9.801,34.32 9.779,34.292C9.759,34.265 9.735,34.242 9.719,34.214L9.718,34.211C9.7,34.181 9.689,34.145 9.676,34.111C9.663,34.081 9.646,34.053 9.638,34.021L9.638,34.02C9.628,33.982 9.626,33.942 9.622,33.903C9.618,33.873 9.61,33.843 9.61,33.813L9.61,12.33L4.965,9.654L1.602,7.72L1.602,7.719ZM10.412,1.725L2.405,6.334L10.41,10.943L18.416,6.333L10.41,1.725L10.412,1.725ZM14.576,30.489L19.221,27.815L19.221,7.719L15.858,9.655L11.212,12.33L11.212,32.426L14.576,30.489ZM39.243,7.164L31.237,11.773L39.243,16.382L47.248,11.772L39.243,7.164ZM38.442,17.769L33.796,15.094L30.433,13.158L30.433,22.282L35.078,24.956L38.442,26.893L38.442,17.769ZM20.02,38.33L31.763,31.626L37.633,28.276L29.633,23.67L20.422,28.973L12.027,33.806L20.02,38.33Z" style="fill:url(%23_Linear1);"/></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(41.0176,34.7107,-34.7107,41.0176,-0.273791,5.34318)"><stop offset="0" style="stop-color:black;stop-opacity:0.1"/><stop offset="0.43" style="stop-color:black;stop-opacity:0.15"/><stop offset="1" style="stop-color:black;stop-opacity:0.25"/></linearGradient></defs></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: fill !important;
}

/* editor */
.monaco-editor .scroll-decoration,
.monaco-editor .sticky-widget {
    border-bottom: 1px solid var(--vscode-scrollbar-shadow) !important;
    box-shadow: var(--vscode-scrollbar-shadow) 0 0 8px -2px !important;
    background-color: var(--vscode-editorStickyScroll-background) !important;
    /* width: 100% !important; */
}

/* scrollbar */
.scrollbar.vertical .slider {
    border-radius: 5px !important;
    width: 50% !important;
    left: 25% !important;
}

.scrollbar.horizontal .slider {
    border-radius: 5px !important;
    height: 50% !important;
    bottom: 25% !important;
}

.decorationsOverviewRuler {
    background-color: #00000013 !important;
    opacity: 1 !important;
}

custom.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();
        }
    }
});

hello is it possible to change suggestion icons？

hello is it possible to change suggestion icons？

I'm not sure, I don't think so.