kustomisasi tampilan vscode dengan custom css dan javascript

customisasi tampilan dari vs code dengan custom css dan js dengan menggunakan plugin Custom CSS and Js Loader

copy
custom-vscode.css
 
/*tab size styling*/
/* .tabs-container, */
.tab,
.tab .monaco-icon-label,
.tab .monaco-icon-label-container,
.tab .monaco-icon-name-container {
  height: 26px !important;
}
 
.tab .monaco-icon-label-container .label-name {
  font-size: 11px !important;
  height: 26px !important;
  letter-spacing: 1px !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 10px !important;
}
 
.tab .monaco-icon-label::before {
  height: 26px !important;
}
 
.tab .monaco-icon-label::after {
  visibility: hidden !important;
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
 
.tab-actions,
.tab-actions .monaco-action-bar {
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
  display: none !important;
}
 
/* Command palette text input */
.quick-input-filter .monaco-inputbox {
  border-radius: 12px !important;
  padding: 8px !important;
  border: none !important;
  font-size: 14px !important;
  margin-bottom: 16px !important;
}
 
#command-blur {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  top: 0;
  left: 0;
  backdrop-filter: blur(8px);
}
 
/* Command palette's input box placeholder. */
.monaco-inputbox input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}
 
/* homescreen vs code when there is no file opened*/
.menubar {
  margin-left: 50px !important;
}
 
.editor-group-watermark > .shortcuts {
  width: 100vw !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
}
 
.letterpress {
  height: 50px !important;
  margin-bottom: 10px !important;
  width: auto !important;
  visibility: hidden !important;
}
 
.watermark-box {
  top: -200px !important;
  background: transparent !important;
}
 
.watermark-box::before {
  position: absolute;
  left: 0;
  right: 0;
  top: -80px;
  content: "zanccode";
  text-align: center;
  font-size: 95px;
  font-weight: bold;
  font-style: italic;
  color: #d8dee9;
  margin: auto 0 !important;
}
 
/* Container that holds the VS Code home icon. */
.editor-group-watermark {
  max-width: none !important;
}
 
.command-center-center {
  width: auto !important;
}
 
.line-numbers {
  position: relative !important;
  width: 15px !important;
  font-size: 11px !important;
  opacity: 0.7;
}
 
/* Code canvas top shadow */
.monaco-editor .scroll-decoration {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75) !important;
  top: -6px !important;
}
 
/* Toolbars when tabs are enabled. */
.monaco-workbench
  .part.editor
  > .content
  .editor-group-container
  > .title
  .editor-actions {
  display: none !important;
}
 
/* Side bar */
.part.sidebar {
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.25);
}
 
/* File Explorer Selected Item */
.monaco-list.list_id_1 .monaco-list-row.selected {
  opacity: 1 !important;
}
 
/* List item label name */
.monaco-list.list_id_1 .monaco-list-row.selected .label-name {
  opacity: 1 !important;
}
 
/* File explorer action buttons */
.monaco-workbench .part.sidebar .title-actions .actions-container {
  display: none;
}
 
/* File Explorer Item Label */
.monaco-tree .monaco-tree-row .label-name,
.monaco-list .monaco-list-row .monaco-icon-label .label-name {
  font-size: 13px !important;
  font-family: "FiraCode Nerd Font Mono", Verdana, sans-serif;
  font-weight: 400 !important;
}
 
/* Sidebar top shadow */
.monaco-scrollable-element > .shadow.top {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75) !important;
  top: -3px !important;
}
 
/* Sidebar title */
.composite.title {
  display: flex !important;
  flex: 1 !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-items: center !important;
  margin-bottom: 10px !important;
}
 
.composite.title h2 {
  color: #fefefe !important;
  font-weight: bold !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
}
 
.composite.title h2::before {
  display: inline-block;
  margin-right: 4px;
  font-weight: bold !important;
  text-transform: uppercase;
  font-size: 14px;
  content: "zancc's ";
}
 
.composite.title h2::after {
  display: inline-block;
  margin-left: 8px;
  font-size: 15px;
  content: " 🔥";
}
 
/* Scroll Bar */
.slider {
  position: absolute !important;
  right: 1px !important;
  width: 1px !important;
  left: auto !important;
}
 
.codicon-toolbar-more,
.codicon-word-wrap {
  display: block !important;
}
 
/* Tooltip box style */
.monaco-editor-hover,
.monaco-hover {
  padding: 10px !important;
  backdrop-filter: blur(3px) !important;
  border-radius: 8px !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;
}
 
.titlebar-container > .titlebar-center > .window-title {
  display: hidden !important;
  opacity: 0 !important;
}
 
.titlebar-left > .window-appicon {
  visibility: hidden !important;
}
 
.titlebar-left > .window-appicon::after {
  /* content: "🐼"; */
  content: "zancc";
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  color: #d8dee9;
  visibility: visible !important;
  position: absolute;
  left: 20px;
  z-index: 999;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}
 
/* Project Title */
.titlebar-left {
  justify-content: flex-start !important;
  flex-grow: 0 !important;
  width: auto !important;
}
 
/* Search Label */
.search-label {
  font-size: 14px !important;
  display: block;
}
 
/* 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 Palette */
.quick-input-widget {
  position: fixed !important;
  top: 25% !important;
  padding: 10px 10px 18px 10px !important;
  border-radius: 8px !important;
  background-image: url("https://kpopping.com/documents/bf/1/1536/220821-NewJeans-Minji-documents-8.jpeg?v=95233") !important;
  background-size: cover !important;
  background-position: center !important;
}
 
.quick-input-titlebar {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.7) !important;
}
 
/* Remove background for lists */
.monaco-list-rows {
  background: transparent !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;
  font-size: 14px !important;
  margin-bottom: 16px !important;
}
 
#command-blur {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  top: 0;
  left: 0;
  backdrop-filter: blur(8px);
}
 
/* Command palette's input box placeholder. */
.monaco-inputbox input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}
 
.editor-group-watermark {
  max-width: none !important;
}
 
.command-center-center {
  width: auto !important;
} 
 

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