Readme.md

Preview

Description

This is my customization to make vscode's visual interface minimalistic. It should work fine with other themes but not guaranteed.

Requirements

• Apc Cusmoize UI++
• VSCode Animations
• Material Icon Theme
• PurpleSchool Theme

vscode-config.json

{
  "editor.accessibilitySupport": "off",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.fontFamily": "Dank Mono",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.75,
  "editor.suggestFontSize": 14,
  "editor.suggestLineHeight": 28,
  "editor.formatOnSave": true,
  "editor.lightbulb.enabled": "off",
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.renderWhitespace": "boundary",
  "editor.overviewRulerBorder": false,
  "editor.scrollbar.verticalScrollbarSize": 4,
  "editor.scrollbar.horizontalScrollbarSize": 4,
  "breadcrumbs.enabled": false,
  "explorer.confirmDragAndDrop": false,
  "editor.cursorBlinking": "solid",
  "extensions.ignoreRecommendations": true,
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.renderLineHighlight": "all",
  "editor.renderControlCharacters": true,
  "editor.tabSize": 2,
  "editor.detectIndentation": true,
  "editor.rulers": [80, 100, 120],
  "explorer.autoReveal": false,
  "files.insertFinalNewline": true,
  "security.workspace.trust.untrustedFiles": "newWindow",
  "terminal.external.osxExec": "iTerm2.app",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontFamily": "Dank Mono, Hack Nerd Font",
  "scm.diffDecorations": "none",
  "terminal.integrated.tabs.enabled": false,
  "terminal.integrated.lineHeight": 1.25,
  "terminal.integrated.fontSize": 12,
  "terminal.integrated.tabs.location": "left",
  "workbench.colorCustomizations": {
    "terminalCursor.foreground": "#C45DFF",
    "terminal.background": "#00000000",
    "editorGroupHeader.tabsBackground": "#00000000",
    "sideBar.background": "#00000000",
    "sideBarSectionHeader.background": "#00000000",
    "peekViewEditor.background": "#00000000",
    "peekViewEditorGutter.background": "#00000000",
    "peekViewTitle.background": "#00000000",
    "peekViewResult.background": "#00000000",
    "tab.activeBackground": "#00000000",
    "tab.inactiveBackground": "#00000000",
    "statusBar.debuggingBackground": "#00000000",
    "statusBar.noFolderBackground": "#00000000",
    "statusBarItem.activeBackground": "#00000000",
    "activityBar.background": "#00000000"
  },
  "telemetry.telemetryLevel": "off",
  "workbench.editor.pinnedTabSizing": "compact",
  "workbench.editor.tabSizing": "shrink",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.sideBar.location": "right",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.tree.renderIndentGuides": "none",
  "workbench.layoutControl.enabled": false,
  "workbench.editor.enablePreview": false,
  "workbench.panel.defaultLocation": "left",
  "zenMode.fullScreen": false,
  "zenMode.hideLineNumbers": true,
  "zenMode.centerLayout": false,
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1",
    "CW_NEW_SESSION": "1"
  },
  "apc.imports": [
    "file://${userHome}/.vscode/extensions/brandonkirbyson.vscode-animations-2.0.2/dist/updateHandler.js"
  ],
  "apc.sidebar.titlebar": {
    "height": 36,
    "fontSize": 12
  },
  "apc.font.family": "Dank Mono",
  "apc.electron": {
    "backgroundColor": "#00000000",
    "vibrancy": "fullscreen-ui",
    "frame": false,
    "visualEffectState": "active",
    "backgroundMaterial": "acrylic",
    "titleBarStyle": "hiddenInset",
    "transparent": true,
    "trafficLightPosition": {
      "x": 15,
      "y": 14
    }
  },
  "window.zoomLevel": 1,
  "apc.stylesheet": {
    /**
     * You can change transparency amount here
     */
    "body": "--al-transparency-percent: 25%; --al-pane-split-color: rgba(255,255,255,0.025); --al-tab-height: 35px; --al-tab-y-offset: 7px;",

    /**
     * Customize on own risk :)
     */
    "body .monaco-workbench": "--vscode-tab-inactiveBackground: rgba(255, 255, 255, 0.05); --vscode-tab-activeBackground: var(--vscode-tab-activeBorderTop, rgba(255, 255, 255, 0.12)); --vscode-editor-background-proxy:  color-mix(in srgb, var(--vscode-editor-background) calc(100% - var(--al-transparency-percent)), transparent) !important; --titlebar-height: var(--al-tab-height)",
    // style(editor): hide title actions
    ".monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions": "display: none !important",
    // style(sidebar): hide explorer actions
    ".monaco-workbench .part>.composite.title>.title-actions": "display: none !important",
    // fix(search): file icon positions
    ".filematch .monaco-icon-label:before, .custom-list-row.results .monaco-list-row .monaco-icon-label:before": "background-position: 0 bottom !important",
    // fix(search) file badge inset text position
    ".filematch .monaco-count-badge": "padding: 5px 6px 0 6px !important",
    // fix(sidebar): title position
    ".sidebar .title-label": "padding: 0 !important",
    // style(sidebar): remove focus outline
    ".monaco-workbench .monaco-list:not(.element-focused):focus:before": "outline: none !important",
    // style(cursor)
    ".monaco-editor .cursors-layer .cursor": "background: #C45DFF",
    // fix(quick-search) icons position
    ".quick-input-list-row div": "display: flex !important; align-items: center !important",
    // style(left-sidebar) adjust terminal padding and headers
    ".panel:has(.terminal-outer-container) .composite.title": "visibility: hidden",
    ".panel .composite.title": "padding-left: 3.5rem",
    ".fullscreen .panel .composite.title": "padding-left: 0",
    ".fullscreen .panel:has(.terminal-outer-container) .composite.title": "display: none;",
    ".fullscreen.monaco-workbench .xterm": "padding-top: 1rem !important; padding-left: 1rem !important",
    // style(sidebar) sm bg with editor
    ".monaco-workbench .part.statusbar": "background-color: transparent !important",
    ".monaco-editor-background, .monaco-editor .margin": "background-color: transparent !important",
    ".monaco-editor .sticky-widget, .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container": "background-color: color-mix(in srgb, var(--vscode-editorStickyScroll-background) 90%, transparent) !important;",
    ".monaco-workbench": "--vscode-sideBarStickyScroll-background: transparent; --vscode-terminal-background: var(--vscode-editor-background-proxy); --vscode-panelSectionHeader-background: var(--vscode-editor-background-proxy); --vscode-sideBarTitle-background: var(--vscode-editor-background-proxy); --vscode-sideBar-background: var(--vscode-editor-background-proxy) !important; --vscode-editorRuler-foreground: rgba(255,255,255,0.04) !important; --vscode-editorGutter-background: rgba(0,0,0,0);",
    ".editor-container, .monaco-workbench .part>.content, .monaco-editor, .monaco-list.list_id_1 .monaco-list-rows, .terminal-outer-container, .monaco-workbench .part.sidebar>.title, .monaco-editor .sticky-widget-lines-scrollable, .monaco-editor .sticky-widget-line-numbers, .monaco-list .monaco-list-rows": "background-color: transparent !important",
    // ".monaco-workbench .part>.content:has(.editor-group-container.empty.active .editor-group-watermark)": "background-color: var(--vscode-editor-background-proxy) !important",
    ".monaco-workbench .part.sidebar>.title>.title-label h2": "color: white !important;",
    // style(sidebar-title)
    // ".monaco-workbench .part.editor>.content:not(.empty) .editor-group-container>.title.tabs": "background-color: var(--vscode-editor-background-proxy) !important",
    ".monaco-workbench > .monaco-grid-view > .monaco-grid-branch-node > .monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view": "background-color: var(--vscode-editor-background-proxy) !important",
    ".monaco-workbench .sidebar, .monaco-workbench .part.panel": "background-color: transparent !important",
    ".monaco-workbench .sidebar, .monaco-workbench .part.panel.left": "border-color: var(--al-pane-split-color) !important",
    ".monaco-workbench:not(.reduce-motion) .part.statusbar": "--status-border-top-color: var(--al-pane-split-color) !important",
    // style(tabs)
    ".monaco-icon-label>.monaco-icon-label-container>.monaco-icon-name-container>.label-name": "text-shadow: 0px 2px 4px rgba(0,0,0,.15)",
    ".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink>.tab-label>.monaco-icon-label-container:after": "display: none",
    ".monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container": "--tabs-border-bottom-color: var(--al-pane-split-color) !important",
    ".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container": "--editor-group-tab-height: calc(var(--al-tab-height) - (var(--al-tab-y-offset) * 2)); padding: var(--al-tab-y-offset) 0px var(--al-tab-y-offset) 5px; gap: 8px;",
    ".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab": "border-radius: 4px; overflow: hidden; border-right: none !important; --tab-border-bottom-color: transparent !important",
    ".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active": "outline: 2px dashed var(--vscode-tab-activeBackground) !important; outline-offset: 2px !important;",
    ".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active .monaco-icon-name-container": "color: var(--vscode-tab-activeForeground) !important",
    ".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-border-top-container": "display: none !important",
    ".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label a, .monaco-workbench .part.editor>.content .editor-group-container>.title .title-label a": "font-size: 14px",
    // fix(tabs) remove traffic offset when no sidebar
    ".monaco-workbench:not(.nopanel), .monaco-workbench.fullscreen": "--traffic-X: 0 !important;"
  },
  "editor.minimap.enabled": false,
  "editor.glyphMargin": false,
  "editor.folding": true,
  "editor.lineNumbers": "on",
  "editor.guides.indentation": false,
  "window.nativeFullScreen": true,
  "window.titleBarStyle": "native",
  "window.commandCenter": false,
  "workbench.editor.customLabels.enabled": true,
  "workbench.editor.customLabels.patterns": {
    "**/src/**/index.ts": "${dirname}/${filename}"
  },
  "workbench.activityBar.location": "hidden",
  "editor.unicodeHighlight.ambiguousCharacters": false,
  "workbench.editor.tabActionCloseVisibility": false,
  // "[vue]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  // "[typescript]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  "animations.CursorAnimation": true,
  "animations.CursorAnimationOptions": {
    "Color": "#C45DFF",
    "TrailLength": 4
  },
  "animations.Scrolling": "Fade",
  "animations.Default-Duration": 250,
  "animations.Tabs": "None",
  "animations.Smooth-Mode": false,
  "animations.Install-Method": "Apc Customize UI++",
  "animations.Enabled": true,
  "workbench.colorTheme": "PurpleSchool Theme"
}