Giter VIP home page Giter VIP logo

Comments (36)

avatar commented on August 25, 2024 6

Long ago, I completed Caleb Porzio's MakeVSCodeAwesome course and found the Customize UI and Monkey Patch tools to be incredibly useful in my daily workflow. However, I've been struggling to achieve the desired "full-bleed window" effect since the recent updates (mangling stuff with VSCode).

But guess what? I finally did it!

@drcika, your extension is absolutely breathtaking! Thank you for creating such an amazing tool. We appreciate your hard work ;)

Output (on Windows 10)

Settings.json

  "workbench.editor.showTabs": false,

  "apc.electron": {
    "titleBarStyle": "hidden"
  },
  "window.titleBarStyle": "native",

  "apc.stylesheet": {
      // Change cursor color
      ".monaco-editor .cursor": "background: linear-gradient(to bottom, #ee0979, #ff6a00) !important; box-shadow: 0 0 42px 5px #ee0979, #ff6a00 0px 0px 34px 1px; color: #161616 !important",
  },

from apc-extension.

aexvir avatar aexvir commented on August 25, 2024 5

found out just today about this extension as I finally opened vscode after a long while and I was cleaning out unused extensions, so I had to remove customize ui

@drcika thanks a ton for bringing this functionality back up! I just can't stand vscode's default ui stiffness

I've managed to pretty much replicate my setup from customize ui in just a couple lines of config, which is awesome, but I still had a bunch of custom css that I need to fix before being able to use it as it seems a bunch of stuff changed since the last time I used vscode

Screenshot 2023-07-16 at 00 35 11 
"window.titleBarStyle": "native",
  "apc.electron": {
    "titleBarStyle": "hiddenInset",
    "trafficLightPosition": {
      "x": 12,
      "y": 8
    }
  },
  "apc.font.family": "JetBrains Mono",
  "apc.stylesheet": {
    // remove overview ruler completely
    ".editor .decorationsOverviewRuler": "display: none !important",
    // make sticky widget fill the space left by the overview ruler
    ".editor .sticky-widget": "padding-right: 14px !important",
    // make sidebar titles and statusbar lowercase
    ".monaco-workbench .part.sidebar>.title>.title-label *": "text-transform: lowercase !important",
    ".monaco-pane-view .pane>.pane-header>.title": "text-transform: lowercase !important",
    ".statusbar *": "text-transform: lowercase !important"
  },

from apc-extension.

Yukaii avatar Yukaii commented on August 25, 2024 4

Jebrains Mono everywhere with vibrancy!

スクリーンショット 2023-08-17 午後5 33 07 
  "apc.electron": {
    "frame": false,
    "backgroundColor": "rgba(0,0,0,0.95)",
    "vibrancy": "ultra-dark",
    "visualEffectState": "active",
  },
  "apc.font.family": "Jetbrains Mono",
  "apc.monospace.font.family": "Jetbrains Mono",
  "apc.menubar.compact": true,
  "window.titleBarStyle": "native",
  "workbench.colorTheme": "Expo Dark",
  "workbench.iconTheme": "file-icons",



  "workbench.colorCustomizations": {
    "editorGroupHeader.tabsBackground": "#00000000",
    "sideBar.background": "#00000000",
    "sideBarSectionHeader.background": "#00000000",
    "editor.background": "#00000000",
    "peekViewEditor.background": "#00000000",
    "peekViewEditorGutter.background": "#00000000",
    "peekViewTitle.background": "#00000000",
    "peekViewResult.background": "#00000000",
    "tab.inactiveBackground": "#00000000",
    "statusBar.background": "#00000000",
    "panel.background": "#00000000",
    "sash.hoverBorder": "#ffffff3e",
    "sideBar.border": "#ffffff23"
  },

from apc-extension.

sackboy19 avatar sackboy19 commented on August 25, 2024 4

Xcode inspired <3

Active:

image

Inactive:

image

Config:

Theme

Color theme

(Xcode Default Dark Customized Version)
https://marketplace.visualstudio.com/items?itemName=MateoCERQUETELLA.xcode-12-theme

File icon theme

(Monokai Pro Icons)
https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode

Product icon theme

(MacOS Modern)
https://marketplace.visualstudio.com/items?itemName=davidbwaters.macos-modern-theme

Settings

{
	"editor.fontFamily": "SF Mono",
	"editor.fontSize": 11,
	"editor.fontWeight": 550,
	"editor.bracketPairColorization.enabled": true,
	"editor.indentSize": 2,
	"editor.roundedSelection": true,
	"editor.smoothScrolling": true,
	"editor.cursorSmoothCaretAnimation": "on",
	"editor.cursorWidth": 1,
	"editor.cursorBlinking": "phase",
	"editor.inlayHints.enabled": "off",
	"editor.glyphMargin": false,
	"editor.inlayHints.padding": true,
	"editor.scrollbar.verticalScrollbarSize": 9,
	"editor.scrollbar.vertical": "visible",
	"editor.scrollbar.horizontalScrollbarSize": 9,
	"window.autoDetectColorScheme": true,
	"workbench.fontAliasing": "default",
	"window.titleBarStyle": "native",
	"editor.padding.top": 6,
	"breadcrumbs.filePath": "on",
	"editor.guides.indentation": true,

	"apc.statusBar": {
		"height": 32
	},
	"apc.electron": {
		"titleBarStyle": "hiddenInset",
		"trafficLightPosition": {
			"x": 18,
			"y": 17
		},
		"backgroundColor": "#00000000",
		"transparent": true,
		"vibrancy": "sidebar"
	},
	"apc.header": {
		"height": 24
	},
	"apc.sidebar.titlebar": {
		"height": 46,
		"fontSize": 12
	},
	"apc.activityBar": {
		"size": 40,
		"itemSize": 36,
		"itemMargin": 8,
		"position": "bottom",
		"hideSettings": true
	},
	"apc.stylesheet": {
		".custom-sidebar-titlebar .sidebar .composite.title .title-label": "visibility: hidden;",
		".custom-sidebar-titlebar .sidebar .composite.title .title-actions": "padding-left: -100px; padding-top: 2px;",
		".monaco-workbench .part.statusbar>.items-container>.statusbar-item.left.first-visible-item": "padding-left: 0;",
		".statusbar #status\\.host": "display: block !important; width: calc(var(--activity-bar-action-size) - 1px); background: [#555](https://github.com/lehni/vscode-titlebar-less-macos/issues/555) !important;",
		".statusbar #status\\.host .codicon": "margin: 0 auto;",
		"div.invisible.scrollbar.vertical.fade .slider": "border-radius: 10px !important;",
		"div.visible.scrollbar.vertical .slider": "border-radius: 10px !important;",
		"div.invisible.scrollbar.horizontal.fade .slider": "border-radius: 10px !important;",
		"div.visible.scrollbar.horizontal .slider": "border-radius: 10px !important;",
		".monaco-editor .cursors-layer.cursor-block-style .cursor": "transform: translateX(-1px); width: 9px !important; color: transparent; border-width: 1px; border-color: #ffffff8b; border-style: solid; border-radius: 2px; background: #ffffff4b",
		".breadcrumbs-control": "height: 18px",
		".monaco-breadcrumbs": "font-size: 11px; transform: translateY(0px);",
		"body": "border: 1px solid #ffffff1f; border-radius: 10px; box-sizing: border-box;",
		".monaco-workbench .part.statusbar": "border-bottom: 2px solid #ffffff1f; border-radius: 9px; border-bottom-right-radius: 13.5px",
		".monaco-workbench .part.editor[role=main]": "border-right: 1.5px solid #ffffff1f; border-top-right-radius: 12px",
		".monaco-workbench .part.panel.basepanel.bottom": "border-right: 2px solid #ffffff1f; border-right-color: #ffffff1f !important;",
	},

	"workbench.colorCustomizations": {
		"editorCursor.foreground": "#ffffff8d",
		"editorBracketMatch.border": "#d9d9d9",
		"editor.lineHighlightBackground": "#00000000",
		"editor.lineHighlightBorder": "#00000000",
		"editorIndentGuide.background1": "#ffffff10",
		"editorIndentGuide.activeBackground1": "#b4b4b437",
		"focusBorder": "#00000000",
		"statusBar.background": "#23232300",
		"statusBarItem.remoteBackground": "#ffffff00",
		"statusBar.border": "#ffffff1e",
		"sash.hoverBorder": "#afafaf00",
		"editorGroupHeader.border": "#ffffff00",
		"activityBar.background": "#27272700",
		"sideBar.background": "#1f1f1f00",
		"activityBar.border": "#ffffff00",
		"list.inactiveSelectionBackground": "#ffffff11",

		"[Xcode Default Dark Customized Version]": {
			"editorCursor.foreground": "#357bff",
			"scrollbar.shadow": "#00000000",
			"editorGroupHeader.border": "#ffffff1c"
		}
	}
}

from apc-extension.

ricewind012 avatar ricewind012 commented on August 25, 2024 4

it's more of a thing of its own, but the extension largely helps in some parts: https://github.com/ricewind012/win95-themes/blob/master/docs/vscode.md
preview:
image

from apc-extension.

muhammadfaruq72 avatar muhammadfaruq72 commented on August 25, 2024 3

Screenshot 2023-06-15 at 7 49 39 PM

from apc-extension.

drcika avatar drcika commented on August 25, 2024 3

vibrancy
Screenshot 2023-06-18 at 21 44 23

from apc-extension.

phen0menon avatar phen0menon commented on August 25, 2024 2
Screenshot 2023-09-12 at 00 00 41

from apc-extension.

Aratmany avatar Aratmany commented on August 25, 2024 2

"workbench.colorCustomizations": {
"editorGroupHeader.tabsBackground": "#00000000",
"sideBar.background": "#00000000",
"sideBarSectionHeader.background": "#00000000",
"editor.background": "#0000001a",
"peekViewEditor.background": "#00000000",
"peekViewEditorGutter.background": "#00000000",
"peekViewTitle.background": "#00000000",
"peekViewResult.background": "#00000000",
"tab.activeBackground": "#00000000",
"tab.inactiveBackground": "#00000000",
"statusBar.background": "#00000000",
"statusBar.debuggingBackground": "#00000000",
"statusBar.noFolderBackground": "#00000000",
"statusBarItem.activeBackground": "#00000000",
"panel.background": "#00000000",
"activityBar.background": "#00000000"
},
"window.nativeTabs": true,
"editor.minimap.autohide": true,
"window.titleBarStyle": "native"
"workbench.colorTheme": "Theme Mix",
"apc.electron": {
"vibrancy": "ultra-dark",
"frame": false,
"transparent": true,
"titleBarStyle": "hiddenInset",
"opacity": 0.98,
"visualEffectState": "active",
"backgroundColor": "#00000000",
}

Screen Shot 2024-03-26 at 18 08 03
Screen Shot 2024-03-26 at 18 08 25
Screen Shot 2024-03-26 at 18 09 43

from apc-extension.

avatar commented on August 25, 2024 1

@jsonkenyon Sheer brilliance!
Btw, how did you remove all the buttons from Explorer panel?

PS: here's my most used stylesheet code.

      // Hide editor top-right buttons, except for the dirty file indicator and settings goto icon
      ".editor .title .actions-container .action-item a:not(.codicon-close-dirty):not(.codicon-preferences-open-settings)": "display: none !important;",

from apc-extension.

xesrevinu avatar xesrevinu commented on August 25, 2024 1

Like Apple Vision Pro but VSCode, thank you @drcika Apc Customize UI++ and customize-ui
image

Config 
{
  "workbench.colorCustomizations": {
    "scrollbar.shadow": "#ffffff00",
    "[One Monokai Dark]": {
      "scrollbar.shadow": "#ffffff00",
      "editorInlayHint.typeBackground": "#ffffff00",
      "editorInlayHint.foreground": "#adadadcc",
      "editorGroupHeader.tabsBackground": "#00000000",
      "sideBar.background": "#3635351d",
      "sideBarSectionHeader.background": "#00000000",
      "editor.background": "#3635351d",
      "peekViewEditor.background": "#00000000",
      "peekViewEditorGutter.background": "#00000000",
      "peekViewTitle.background": "#00000000",
      "peekViewResult.background": "#00000000",
      "editorSuggestWidget.background": "#5e5e5ec5",
      "editorSuggestWidget.border": "#e3e3e37d",
      "editorSuggestWidget.selectedBackground": "#b5b4b440",
      "editorSuggestWidget.highlightForeground": "#f1f1f1e2",
      "editorSuggestWidget.focusHighlightForeground": "#f1f1f1e2",
      "editorSuggestWidget.foreground": "#cccccce2",
      "editorSuggestWidget.selectedForeground": "#f1f1f1e2",
      "tab.activeBackground": "#00000000",
      "tab.inactiveBackground": "#00000000",
      "statusBar.background": "#00000000",
      "statusBar.debuggingBackground": "#00000000",
      "statusBar.noFolderBackground": "#00000000",
      "statusBarItem.activeBackground": "#00000000",
      "editor.selectionBackground": "#00000000",
      "panel.background": "#00000000",
      "activityBar.background": "#00000000",
      "editor.selectionHighlightBackground": "#565e616f",
      "editor.lineHighlightBackground": "#b5b5b530",
      "editor.lineHighlightBorder": "#ffffff00"
    }
  },
  "apc.activityBar": {
    "position": "bottom",
    "hideSettings": true,
    "size": 24
  },
  "apc.statusBar": {
    "position": "editor-bottom",
    "height": 20,
    "fontSize": 11
  },
  "apc.electron": {
    "titleBarStyle": "hiddenInset",
    "trafficLightPosition": {
      "x": 7,
      "y": 8
    },
    "frame": false,
    "transparent": true,
    "vibrancy": "ultra-dark",
    "backgroundColor": "#3635351d",
    "visualEffectState": "active"
  },
  "apc.header": {
    "height": 28,
    "fontSize": 13
  },
  "apc.font.family": "JetBrainsMono-Regular",
  "apc.monospace.font.family": "JetBrainsMono-Regular",
  "apc.stylesheet": {
    // remove overview ruler completely
    ".editor .decorationsOverviewRuler": "display: none !important",
    // make sticky widget fill the space left by the overview ruler
    ".editor .sticky-widget": "padding-right: 14px !important",
    // make sidebar titles and statusbar lowercase
    ".monaco-workbench .part.sidebar>.title>.title-label *": "text-transform: lowercase !important",
    ".monaco-pane-view .pane>.pane-header>.title": "text-transform: lowercase !important"
  }
}

from apc-extension.

bushaev-denis avatar bushaev-denis commented on August 25, 2024 1

Untitled

Full

☀️ Light

Screen Shot 2023-07-27 at 22 57 18

🌑 Dark

Screen Shot 2023-07-27 at 22 57 05

Manual

Theme

VSCode / VSCodium

Font

https://github.com/supercomputra/SF-Mono-Font

Settings

{
  "workbench.layoutControl.enabled": false,
  "editor.minimap.enabled": false,
  "window.autoDetectColorScheme": true,
  "workbench.colorTheme": "MacOS Modern Dark - Ventura Xcode",
  "workbench.preferredLightColorTheme": "MacOS Modern Light - Ventura Xcode Default",
  "workbench.preferredDarkColorTheme": "MacOS Modern Dark - Ventura Xcode",
  "workbench.iconTheme": null,
  "window.titleBarStyle": "native",
  "workbench.editor.decorations.badges": false,
  "workbench.editor.showIcons": false,
  "workbench.editor.tabCloseButton": "off",
  "breadcrumbs.enabled": false,
  "editor.rulers": [120],
  "apc.electron": {
    "titleBarStyle": "hiddenInset",
    "frame": false,
    "apc.font.family": "SF Mono",
    "apc.monospace.font.family": "SF Mono",
    "vibrancy": "sidebar",
    "visualEffectState": "active",
    "transparent": true,
    "backgroundColor": "rgba(0,0,0,0)"
  },
  "apc.stylesheet": {
    "#workbench\\.parts\\.sidebar > .composite.title": "opacity: 0; pointer-events: none",
    ".title.tabs.title-border-bottom .tabs-container": "cursor: default; -webkit-app-region: no-drag;",
    ".editor-actions": "display: none;",
    ".monaco-list-rows": "background-color: transparent !important;",
    ".nosidebar .tabs": "padding-left: 80px;",
    ".scrollbar": " width: 10px !important",
    ".scrollbar .slider": "border-radius: 6px; width: calc(100% - 2px) !important;"
  },
  "workbench.colorCustomizations": {
    "focusBorder": "#ff000000",
    "[*Light*]": {
      "sideBar.background": "#F8F8F7aa",
      "sideBarSectionHeader.background": "#F8F8F7aa",
      "statusBar.background": "#F8F8F7aa",
      "list.hoverBackground": "#CEDEEF88"
    },
    "[*Dark*]": {
      "sideBar.background": "#363333aa",
      "sideBarSectionHeader.background": "#363333aa",
      "statusBar.background": "#363333aa",
      "list.hoverBackground": "#46464699"
    }
  },

  // font
  "editor.fontLigatures": true,
  "editor.fontFamily": "SF Mono, Menlo, Monaco, 'Courier New', monospace",
  "editor.glyphMargin": false,
}

from apc-extension.

wfern avatar wfern commented on August 25, 2024 1

Not much different from the original, most changes are spacing-related. With this, I can open two windows side by side on a 1920x1080 monitor without word wrapping or shrinking panels.

Settings:

{
    "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
    "editor.fontSize": 11.75,
    "workbench.colorCustomizations": {
        "tab.activeBackground": "#1e1e1e",
        "tab.hoverBackground": "#2c2c2c"
    },
    "workbench.colorTheme": "GitHub Dark Default",
    "window.titleBarStyle": "native",
    "apc.electron": {
        "titleBarStyle": "hidden",
        "trafficLightPosition": {
            "x": 12,
            "y": 10
        }
    },
    "apc.activityBar": {
        "position": "bottom",
        "size": 32
    },
    "apc.header": {
        "fontSize": 11,
    },
    "apc.listRow": {
        "fontSize": 11.25,
        "height": 18
    },
    "apc.statusBar": {
        "fontSize": 11,
        "height": 22,
        "position": "bottom"
    },
    "apc.sidebar.titlebar": {
        "fontSize": 12,
    },
    "apc.stylesheet": {
        // activity bar
        ".activitybar .action-item.checked .active-item-indicator:before": "bottom: 0px !important;",
        ".activitybar .action-label": "font-size: 20px !important;",
        ".activitybar .badge .badge-content": "top: 3px !important; padding: 0 3px !important; font-size: 9px !important; height: 12px !important; line-height: 12px !important;",
        // explorer: align right icons, the line height must match apc.listRow.height
        ".explorer-folders-view .explorer-item::after": "line-height: 18px !important;",
        // explorer: remove extra padding from the tree view
        ".explorer-folders-view .monaco-list-row": "padding-left: 0 !important;",
        // sidebar tree views: set and adjust font
        ".sidebar .monaco-icon-label > .monaco-icon-label-container": "font-family: 'JetBrains Mono'; letter-spacing: -0.750px;",
        // sidebar title: adjust padding and add border
        ".sidebar > .title": "border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border) !important;",
        ".sidebar .title .title-label": "display: none !important;",
        ".sidebar .title .title-actions": "flex: 1 !important;",
        ".sidebar .content": "height: 100% !important;",
        // base panel (terminal, etc...): decrease height
        ".basepanel .title": "height: 30px !important;",
        ".basepanel .title .monaco-action-bar": "height: 30px !important;",
        ".basepanel .title .title-actions": "height: 30px !important;",
    }
}

from apc-extension.

phen0menon avatar phen0menon commented on August 25, 2024 1

Sharing my new VS Code!
image

Config 

{
  "editor.fontFamily": "'jetbrains mono', 'Helvetica Neue', monospace",
  "editor.mouseWheelZoom": false,
  "javascript.validate.enable": false,
  "workbench.startupEditor": "none",
  "editor.wordWrap": "on",
  "editor.fontLigatures": true,
  "editor.fastScrollSensitivity": 10,
  "editor.mouseWheelScrollSensitivity": 3,
  "editor.smoothScrolling": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "workbench.statusBar.feedback.visible": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "files.simpleDialog.enable": true,
  "emmet.triggerExpansionOnTab": true,
  "workbench.editor.showTabs": true,
  "workbench.editor.enablePreviewFromQuickOpen": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "workbench.activityBar.visible": true,
  "editor.renderControlCharacters": false,
  "git.confirmSync": false,
  "editor.fontWeight": "400",
  "files.associations": {
    "*.html": "html"
  },
  "window.title": "${dirty}${activeEditorShort}${separator}${rootName}${separator} ${appName}",
  "editor.letterSpacing": -0.3,
  "git.autofetch": true,
  "editor.folding": false,
  "editor.lineHeight": 26,
  "editor.matchBrackets": "always",
  "editor.scrollbar.horizontal": "hidden",
  "explorer.openEditors.visible": 1,
  "workbench.editor.showIcons": false,
  "sync.autoUpload": false,
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": false
  },
  "editor.quickSuggestionsDelay": 50,
  "explorer.confirmDragAndDrop": false,
  "editor.tabCompletion": "on",
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.cursorWidth": 3,
  "editor.minimap.enabled": false,
  "editor.fontSize": 11,
  "git.ignoreMissingGitWarning": true,
  "explorer.confirmDelete": false,
  "editor.bracketPairColorization.enabled": true,
  "security.workspace.trust.untrustedFiles": "open",
  "editor.unicodeHighlight.ambiguousCharacters": false,
  "extensions.ignoreRecommendations": true,
  "editor.guides.indentation": true,
  "editor.inlayHints.fontSize": 14,
  "javascript.inlayHints.enumMemberValues.enabled": true,
  "editor.inlayHints.padding": true,
  "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
  "javascript.inlayHints.parameterTypes.enabled": true,
  "javascript.inlayHints.propertyDeclarationTypes.enabled": true,
  "javascript.inlayHints.variableTypes.enabled": true,
  "typescript.inlayHints.enumMemberValues.enabled": true,
  "typescript.inlayHints.parameterTypes.enabled": true,
  "update.mode": "manual",
  "editor.inlineSuggest.enabled": true,
  "vscode_custom_css.imports": [],
  "html.autoClosingTags": true,
  "html.autoCreateQuotes": true,
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true,
  "editor.autoClosingBrackets": "languageDefined",
  "editor.autoClosingDelete": "auto",
  "editor.autoClosingOvertype": "auto",
  "editor.autoClosingQuotes": "languageDefined",
  "workbench.productIconTheme": "icons-carbon",
  "workbench.iconTheme": "Monokai Pro (Filter Octagon) Icons",
  "apc.stylesheet": {
    ":root": "--header-height: 26px",
    "body.inline-title-bar .monaco-workbench:not(.fullscreen) .sidebar .composite.title": "background: rgba(0, 0, 0, 0) !important;",
    ".monaco-workbench .part > .title": "background: rgba(0, 0, 0, 0) !important;",
    "body.inline-title-bar:not(.activity-bar-at-bottom) .monaco-workbench:not(.fullscreen) .activitybar:not(.right) .activity-bar-placeholder": "background: rgba(0, 0, 0, 0) !important;",
    ".monaco-list .monaco-list-row": "border-radius: 6px !important;",
    ".monaco-workbench .part.panel": "box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;",
    "#workbench.parts.editor > .content": "border-bottom-left-radius: 6px !important;",
    ".monaco-workbench .part.panel.bottom .composite.title": "border-top-color: rgba(128, 128, 128, 0) !important;",
    ".part.editor.has-watermark": "box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;",
    ".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .monaco-icon-label": "font-size: 8px",
    ".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label": "line-height: unset;",
    ".monaco-icon-label-container .label-name": "font-family: 'SF Pro Display', sans-serif; letter-spacing: -0.5px;",
    ".tab .monaco-icon-label-container .label-name": "font-family: 'JetBrains Mono', Menlo, monospace; letter-spacing: -0.35px;",
    ".monaco-list-row .monaco-tl-row .monaco-icon-label-container .label-name": "font-family: 'JetBrains Mono', Menlo, monospace; letter-spacing: -0.1px; font-size: 11px;",
    ".monaco-pane-view .pane>.pane-header h3.title": "font-weight: 500",
    ".statusbar .items-container": "font-family: 'JetBrains Mono', sans-serif; letter-spacing: -0.2px; font-size: 8px;",
    ".monaco-icon-label.italic>.monaco-icon-label-container>.monaco-icon-description-container>.label-description, .monaco-icon-label.italic>.monaco-icon-label-container>.monaco-icon-name-container>.label-name": "font-style: initial;",
    ".monaco-workbench .part.sidebar .title-actions .action-item": "margin-right: 0px;",
    "body.inline-title-bar .part>.title>.title-actions .action-label": "min-width: 0px !important; font-size: 12px;",
    ".monaco-workbench .part > .title > .title-label h2": "display: none",
    ".monaco-scrollable-element > .shadow.top": "box-shadow: #040606 0 6px 1px -6px inset;",
    ".monaco-list-row[aria-level='1'] .monaco-tl-twistie.collapsible.collapsed.codicon.codicon-tree-item-expanded": "padding-left: 0px !important",
    ".monaco-workbench .part.statusbar>.items-container>.statusbar-item.left.first-visible-item": "padding-left: 0;",
    "body": "border: 1px solid #ffffff1f; border-bottom-left-radius: 10px; box-sizing: border-box;",
    ".monaco-workbench .part.statusbar": "border-bottom: 2px solid #ffffff1f; border-bottom-left-radius: 9px; border-bottom-right-radius: 10px",
    ".custom-statusbar .monaco-workbench .part.statusbar .statusbar-item-label": "font-size: 10px;",
    ".activitybar-bottom.inline-title-bar .monaco-workbench.mac:not(.sidebar-right):not(.fullscreen) .inline-titlebar-placeholder, .inline-title-bar .monaco-workbench.mac.no-activity-bar .inline-titlebar-placeholder": " min-width: 40px;",
    ".custom-header .monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label": "line-height: initial; margin: auto 0; padding: 0 12px;",
    ".custom-header .monaco-workbench .part.editor>.content .editor-group-container>.title div.tabs-container>div.tab": "padding: 0px 4px; opacity: 0.7;",
    ".custom-header .monaco-workbench .part.editor>.content .editor-group-container>.title div.tabs-container>div.tab.active": "opacity: 1;",
    ".custom-header .monaco-workbench .part.panel>.composite.title>.panel-switcher-container>div.monaco-action-bar, .custom-header .monaco-workbench .part.editor>.content .editor-group-container>.title div.tabs-container": "padding: 0px",
    ".custom-header .monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions": "padding: 0px",
    ".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:before": "width: 16px;",
    ".monaco-workbench .codicon[class*=codicon-]": "font-size: 10px;",
    ".codicon-breadcrumb-separator:before": "font-size: 10px; opacity: 0.6",
    ".monaco-editor .ced-1-TextEditorDecorationType6-4::after": "font-size: 10px;",
    ".code-hover-contents .rendered-markdown p img": "display: none;",
    ".custom-statusbar .monaco-workbench .part.statusbar>.items-container>div.statusbar-item span.codicon": "font-size: calc(var(--status-bar-font-size) * 1);",
    ".monaco-workbench .part.statusbar>.items-container>.statusbar-item>.statusbar-item-label": "padding: 0 8px;",
    ".editor .decorationsOverviewRuler": "opacity: 0.2",
    ".monaco-editor .cursor": "background: linear-gradient(to bottom, #ee0979, #ff6a00) !important; box-shadow: 0 0 42px 5px #ee0979, #ff6a00 0px 0px 34px 1px; color: #161616 !important",
  },
  "window.titleBarStyle": "native",
  "terminal.external.osxExec": "Iterm.app",
  "animations.Enabled": true,
  "animations.Install-Method": "Apc Customize UI++",
  "apc.imports": [
    "file:///Users/phen0menon/.vscode/extensions/brandonkirbyson.vscode-animations-2.0.1/dist/updateHandler.js",
    "/Users/phen0menon/Development/config/custom-js-vscode.js"
  ],
  "apc.electron": {
    "titleBarStyle": "hiddenInset",
    "trafficLightPosition": {
      "x": 12,
      "y": 12
    }
  },
  "apc.statusBar": {
    "position": "bottom",
    "height": 26,
  },
  "apc.activityBar": {
    "position": "bottom",
    "size": 28
  },
  "apc.listRow": {
    "height": 20
  },
  "apc.header": {
    "fontSize": 10,
    "height": 30
  },
  "editor.overviewRulerBorder": false,
  "color-highlight.markRuler": false,
  "animations.CursorAnimation": true,
  "window.restoreFullscreen": true,
  "window.newWindowDimensions": "maximized",
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
  "editor.unicodeHighlight.invisibleCharacters": false,
  "window.zoomLevel": 1,
  "git.openRepositoryInParentFolders": "never",
  "workbench.colorTheme": "Monokai Pro (Filter Octagon)",
}

from apc-extension.

sackboy19 avatar sackboy19 commented on August 25, 2024 1

@mv-stns Yes, just set: "workbench.preferredLightColorTheme": "Xcode Default (Dark Customized Version)" in your settings.json

scrnsht_22-01 -2024at 11 52 14@2x

Not working unfortunately

Try this:

"apc.electron": {
	"vibrancy": "dark"
},

instead of vibrancy: "sidebar"

from apc-extension.

jsonkenyon avatar jsonkenyon commented on August 25, 2024

I was in the same boat as @backermanbd used Caleb Porzio's "Make VSCode Awesome", thanks to this extension I was able to get back and then some of the style that I wanted!

MacOS

Screenshot 2023-06-28 at 1 01 10 AM

Settings.json that was updated to work with this extension:

    "window.titleBarStyle": "native",
    "apc.electron": {
        // hide trafficlights unless hovered
        "titleBarStyle": "customButtonsOnHover",
        "trafficLightPosition": {
            "x": 7,
            "y": 5
          }
    },
    "apc.stylesheet": {
        ".editor .title": "background: transparent !important;",
        ".editor .title-border-bottom": "visibility: hidden !important;",
    }
    // Hide scrollbar shadow.
    "workbench.colorCustomizations": {
        "scrollbar.shadow": "#22212C",
    },

from apc-extension.

avatar commented on August 25, 2024

@jsonkenyon Instead of this chunk

    // Hide scrollbar shadow.
    "workbench.colorCustomizations": {
        "scrollbar.shadow": "#22212C",
    },

You can use this code in apc.stylesheet.

     // Only show the scrollbar on hover
     ".editor .scrollbar .slider": "visibility: hidden",
     ".editor .scrollbar:hover .slider": "visibility: initial",

from apc-extension.

jsonkenyon avatar jsonkenyon commented on August 25, 2024

@jsonkenyon Instead of this chunk

    // Hide scrollbar shadow.
    "workbench.colorCustomizations": {
        "scrollbar.shadow": "#22212C",
    },

You can use this code in apc.stylesheet.

     // Only show the scrollbar on hover
     ".editor .scrollbar .slider": "visibility: hidden",
     ".editor .scrollbar:hover .slider": "visibility: initial",

@backermanbd Hey, thanks, indeed I have that also. Though on MacOS, it looks like there is a new shadow introduced on the title. Which is what that one is taking care of.

Without that chunk:
Screenshot 2023-06-28 at 1 31 44 PM

With the chunk:
Screenshot 2023-06-28 at 1 32 46 PM

Though, I'm sure there is a better way of getting it with just the css, I just haven't taken a look deeper yet.

EDIT
Found it and replaced with just this CSS which does the trick:

        ".editor .scroll-decoration": "visibility: hidden;",

from apc-extension.

jsonkenyon avatar jsonkenyon commented on August 25, 2024

@backermanbd - I didn't actually do anything in this case, it just hides automatically unless I hover over the explorer panel or select something, then the buttons appear. Though took a look and I'm thinking the following would do the trick for you.

".monaco-toolbar": "visibility: hidden !important;",

from apc-extension.

HeyProtagonist avatar HeyProtagonist commented on August 25, 2024

In CustomizeUI I had emojis for the OS Window Actions Icons... Somehow it didn't work on APC..! But I'm okay with the tradeoff ❤️‍🔥

image

from apc-extension.

dalsvk avatar dalsvk commented on August 25, 2024

found out just today about this extension as I finally opened vscode after a long while and I was cleaning out unused extensions, so I had to remove customize ui

@drcika thanks a ton for bringing this functionality back up! I just can't stand vscode's default ui stiffness

I've managed to pretty much replicate my setup from customize ui in just a couple lines of config, which is awesome, but I still had a bunch of custom css that I need to fix before being able to use it as it seems a bunch of stuff changed since the last time I used vscode

Screenshot 2023-07-16 at 00 35 11 ```json "window.titleBarStyle": "native", "apc.electron": { "titleBarStyle": "hiddenInset", "trafficLightPosition": { "x": 12, "y": 8 } }, "apc.font.family": "JetBrains Mono", "apc.stylesheet": { // remove overview ruler completely ".editor .decorationsOverviewRuler": "display: none !important", // make sticky widget fill the space left by the overview ruler ".editor .sticky-widget": "padding-right: 14px !important", // make sidebar titles and statusbar lowercase ".monaco-workbench .part.sidebar>.title>.title-label *": "text-transform: lowercase !important", ".monaco-pane-view .pane>.pane-header>.title": "text-transform: lowercase !important", ".statusbar *": "text-transform: lowercase !important" }, ```

Hi, which theme is this? Looks very calm and comfy. Thanks

from apc-extension.

h-jia avatar h-jia commented on August 25, 2024 
        ".basepanel .title": "height: 30px !important;",
        ".basepanel .title .monaco-action-bar": "height: 30px !important;",
        ".basepanel .title .title-actions": "height: 30px !important;",

Thanks for the configs! for the last three lines:

when using light theme it will cause a black area at the bottom of panel area (and cannot be right clicked):
image

Any suggestions for this? Thanks

from apc-extension.

wfern avatar wfern commented on August 25, 2024 
        ".basepanel .title": "height: 30px !important;",
        ".basepanel .title .monaco-action-bar": "height: 30px !important;",
        ".basepanel .title .title-actions": "height: 30px !important;",

Thanks for the configs! for the last three lines:

when using light theme it will cause a black area at the bottom of panel area (and cannot be right clicked): image

Any suggestions for this? Thanks

Unfortunately not. In some parts of the panel, when we reduce the size of one, there is space left over in others and the width or height of these parts that remain are dynamic and in "px" not "%", so there is no way... Example, if change the size of the sidebar's "titlebar", the bottom of the sidebar will also have space left over.

@drcika any ideas?

from apc-extension.

KiligFei avatar KiligFei commented on August 25, 2024

今天才发现这个扩展，因为我在很长一段时间后终于打开了 vscode，并且正在清理未使用的扩展，所以我不得不删除自定义 ui

@drcika非常感谢您恢复此功能！我只是无法忍受 vscode 默认的 ui 僵硬

我已经成功地在几行配置中从自定义 ui 复制了我的设置，这非常棒，但是我仍然有一堆自定义 css，我需要在能够使用它之前修复它们，因为它看起来一堆自从我上次使用 vscode 以来，有些东西发生了变化

屏幕截图 2023-07-16 00 35 11 ```json "window.titleBarStyle": "native", "apc.electron": { "titleBarStyle": "hiddenInset", "trafficLightPosition": { "x": 12, "y": 8 } }, "apc.font.family": "JetBrains Mono", "apc.stylesheet": { // remove overview ruler completely ".editor .decorationsOverviewRuler": "display: none !important", // make sticky widget fill the space left by the overview ruler ".editor .sticky-widget": "padding-right: 14px !important", // make sidebar titles and statusbar lowercase ".monaco-workbench .part.sidebar>.title>.title-label *": "text-transform: lowercase !important", ".monaco-pane-view .pane>.pane-header>.title": "text-transform: lowercase !important", ".statusbar *": "text-transform: lowercase !important" }, ```

Hello, your theme looks very comfortable and peaceful, can you tell me the name? thank you.

from apc-extension.

mv-stns avatar mv-stns commented on August 25, 2024

@dannylol19 is it somehow possible to stay dark mode when system is light? the custom dark theme doesnt seem to stay on my end as soon as i switch and looks like this...
scrnsht_20-01 -2024at 17 43 12@2x
which hurts my eyes bad

from apc-extension.

sackboy19 avatar sackboy19 commented on August 25, 2024

@mv-stns
Yes, just set:
"workbench.preferredLightColorTheme": "Xcode Default (Dark Customized Version)"
in your settings.json

from apc-extension.

mv-stns avatar mv-stns commented on August 25, 2024

@mv-stns Yes, just set: "workbench.preferredLightColorTheme": "Xcode Default (Dark Customized Version)" in your settings.json

scrnsht_22-01 -2024at 11 52 14@2x

Not working unfortunately

from apc-extension.

mv-stns avatar mv-stns commented on August 25, 2024

Yes @dannylol19 ! It indeed worked with this one 😂 should have thought of this one

from apc-extension.

markomitranic avatar markomitranic commented on August 25, 2024

This extension was the most fun I've had since Myspace!

For some reason that eludes me, I've always been a fan of the old school JetBrains look and color balance, so I tried pursuing that. (Although the settings work mighty fine with other themes as well)

I've also taken some inspiration from the minimalism of Zed and Fleet.

P.S. I couldn't get vibrancy working at all on Sonoma. The opacity works just fine but there is no blur effect applied.

JetBrains Darcula Theme:
Screenshot 2024-01-30 at 23 09 11

Copilot and Terminal screenshots: Screenshot 2024-01-30 at 22 59 13 Screenshot 2024-01-30 at 22 59 25

Some other popular or built-in themes I've tried with these same settings:

JetBrains Fleet:
Screenshot 2024-01-30 at 23 06 47

Solarized Light:
Screenshot 2024-01-30 at 23 04 11

Visual Studio Dark:
Screenshot 2024-01-30 at 23 07 39

GitHub Light High Contrast:
Screenshot 2024-01-30 at 23 00 02

GitHub Dark Dimmed:
Screenshot 2024-01-30 at 23 08 07

XCode Classic Light:
Screenshot 2024-01-30 at 23 19 22

XCode Classic Dark:
Screenshot 2024-01-30 at 23 18 35

settings.json 
{
// Behaviour START
"diffEditor.ignoreTrimWhitespace": false,
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"security.workspace.trust.untrustedFiles": "open",
"terminal.integrated.allowChords": false,
"terminal.integrated.macOptionIsMeta": true,
"terminal.integrated.defaultProfile.osx": "bash",
"workbench.editor.highlightModifiedTabs": true,
"outline.collapseItems": "alwaysCollapse",
"outline.showVariables": false,
"outline.showProperties": false,
"typescript.updateImportsOnFileMove.enabled": "never",
"javascript.updateImportsOnFileMove.enabled": "never",
"explorer.confirmDelete": false,
"workbench.editorAssociations": { "git-rebase-todo": "default" },
"explorer.confirmDragAndDrop": false,
"workbench.startupEditor": "readme",
"editor.inlineSuggest.enabled": true,
"terminal.integrated.enableMultiLinePasteWarning": false,
"github.copilot.enable": {
  "*": false,
  "plaintext": false,
  "markdown": false,
  "scminput": false
},

// Editor JetBrains Theme START
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.lineHeight": 1.6,
"editor.fontFamily": "JetBrains Mono, Comic Sans MS",
"editor.minimap.enabled": false,
"editor.cursorStyle": "block",
"editor.cursorBlinking": "smooth",

// Terminal macOS Theme START https://glitchbone.github.io/vscode-base16-term/#/eighties
"workbench.colorCustomizations": {
  "terminal.background": "#090909",
  "terminal.foreground": "#23e169",
  "terminalCursor.background": "#D3D0C8",
  "terminalCursor.foreground": "#D3D0C8",
  "terminal.ansiBlack": "#2D2D2D",
  "terminal.ansiBlue": "#6699CC",
  "terminal.ansiBrightBlack": "#747369",
  "terminal.ansiBrightBlue": "#6699CC",
  "terminal.ansiBrightCyan": "#66CCCC",
  "terminal.ansiBrightGreen": "#99CC99",
  "terminal.ansiBrightMagenta": "#CC99CC",
  "terminal.ansiBrightRed": "#F2777A",
  "terminal.ansiBrightWhite": "#F2F0EC",
  "terminal.ansiBrightYellow": "#FFCC66",
  "terminal.ansiCyan": "#66CCCC",
  "terminal.ansiGreen": "#99CC99",
  "terminal.ansiMagenta": "#CC99CC",
  "terminal.ansiRed": "#F2777A",
  "terminal.ansiWhite": "#D3D0C8",
  "terminal.ansiYellow": "#FFCC66"
},

// Window JetBrains Theme START
"window.titleBarStyle": "native",
"window.commandCenter": false,
"workbench.statusBar.visible": false,
"apc.menubar.compact": true,
"apc.electron": {
  "frame": false,
  "titleBarStyle": "hidden"
},
"apc.activityBar": {
  "size": 30,
  "itemSize": 28,
  "itemMargin": 2,
  "position": "bottom",
  "hideSettings": true
},
"apc.header": {
  "height": 30,
  "fontSize": 12
},
"apc.listRow": {
  "fontSize": 12,
  "height": 22
},
"apc.sidebar.titlebar": {
  "height": 30,
  "fontSize": 12
},
"editor.scrollbar.verticalScrollbarSize": 9,
"editor.scrollbar.vertical": "visible",
"editor.scrollbar.horizontalScrollbarSize": 9,
"apc.stylesheet": {
  ".editor .decorationsOverviewRuler": "display: none !important",
  "div.visible.scrollbar.vertical .slider": "border-radius: 10px !important; left: -4px !important;",
  "div.visible.scrollbar.horizontal .slider": "border-radius: 10px !important; top: -4px !important;",
  ".monaco-breadcrumbs": "font-size: 10px; transform: translateY(0px);",
  ".monaco-workbench .part > .title > .title-label h2": "display: none",
  ".activitybar .content .actions-container": "padding-left:1px;",
  ".activitybar .content .menubar": "display:none",
  ".activitybar .content .badge .badge-content": "height: 8px!important; width: 8px!important; padding:0!important; top:2px!important; color: transparent!important;"
},
"apc.font.family": "JetBrains Mono",
"apc.monospace.font.family": "JetBrains Mono",
"workbench.iconTheme": "vscode-jetbrains-icon-theme-2023-light",
"window.autoDetectColorScheme": true,
"workbench.editor.showIcons": false,
"workbench.preferredLightColorTheme": "Webstorm IntelliJ Darcula Theme",
"workbench.preferredDarkColorTheme": "Webstorm IntelliJ Darcula Theme",
"workbench.colorTheme": "Webstorm IntelliJ Darcula Theme"
}

from apc-extension.

mv-stns avatar mv-stns commented on August 25, 2024

latest update of vscode broke the blur from vibrany, woopsies 😂
scrnsht_02-02 -2024at 17 07 52@2x

settings.json 

{
	"terminal.integrated.fontFamily": "Geist Mono",
	"editor.minimap.enabled": false,
	"editor.fontFamily": "Geist Mono",
	"editor.fontSize": 11,
	"editor.fontWeight": 550,
	"editor.bracketPairColorization.enabled": true,
	"editor.indentSize": 2,
	"editor.roundedSelection": true,
	"editor.smoothScrolling": true,
	"editor.cursorSmoothCaretAnimation": "on",
	"editor.cursorWidth": 1,
	"editor.cursorBlinking": "phase",
	"editor.inlayHints.enabled": "off",
	"editor.glyphMargin": false,
	"editor.inlayHints.padding": true,
	"editor.scrollbar.verticalScrollbarSize": 9,
	"editor.scrollbar.vertical": "visible",
	"editor.scrollbar.horizontalScrollbarSize": 9,
	"window.autoDetectColorScheme": true,
	"workbench.fontAliasing": "default",
	"window.titleBarStyle": "native",
	"editor.padding.top": 6,
	"breadcrumbs.filePath": "on",
	"editor.guides.indentation": true,
	"breadcrumbs.enabled": false,
	"apc.font.family": "Geist Mono",

	"apc.statusBar": {
		"height": 32,
		"fontSize": 12,
	},
	"apc.electron": {
		"titleBarStyle": "hiddenInset",
		"trafficLightPosition": {
			"x": 18,
			"y": 17
		},
		"frame": true,
		"backgroundColor": "rgba(0,0,0,0.5)",
		"transparent": true,
		"vibrancy": "ultra-dark"
	},
	"apc.header": {
		"height": 24,
		"fontSize": 10,
	},
	"apc.sidebar.titlebar": {
		"height": 46,
		"fontSize": 12
	},
	"apc.activityBar": {
		"size": 40,
		"itemSize": 36,
		"itemMargin": 8,
		"position": "bottom",
		"hideSettings": true
	},
	"apc.stylesheet": {
		"*": "--vscode-list-focusBackground: rgba(246, 201, 159, 0.25)",
		".custom-sidebar-titlebar .sidebar .composite.title .title-label": "visibility: hidden;",
		".custom-sidebar-titlebar .sidebar .composite.title .title-actions": "padding-left: -100px; padding-top: 2px;",
		".monaco-workbench .part.statusbar>.items-container>.statusbar-item.left.first-visible-item": "padding-left: 0;",
		".statusbar #status\\.host": "display: block !important; width: calc(var(--activity-bar-action-size) - 1px); background: [#555](https://github.com/lehni/vscode-titlebar-less-macos/issues/555) !important;",
		".statusbar #status\\.host .codicon": "margin: 0 auto;",
		"div.invisible.scrollbar.vertical.fade .slider": "border-radius: 10px !important;",
		"div.visible.scrollbar.vertical .slider": "border-radius: 10px !important;",
		"div.invisible.scrollbar.horizontal.fade .slider": "border-radius: 10px !important;",
		"div.visible.scrollbar.horizontal .slider": "border-radius: 10px !important;",
		".monaco-editor .cursors-layer.cursor-block-style .cursor": "transform: translateX(-1px); width: 9px !important; color: transparent; border-width: 1px; border-color: #ffffff8b; border-style: solid; border-radius: 2px; background: #ffffff4b",
		".breadcrumbs-control": "height: 18px",
		".monaco-breadcrumbs": "font-size: 11px; transform: translateY(0px);",
		"body": "border: 1px solid #ffffff1f; border-radius: 10px; box-sizing: border-box;",
		".monaco-workbench .part.statusbar": "border-bottom: 2px solid #ffffff1f; border-radius: 9px; border-bottom-right-radius: 13.5px",
		".monaco-workbench .part.editor[role=main]": "border-right: 1.5px solid #ffffff1f; border-top-right-radius: 12px",
		".monaco-workbench .part.panel.basepanel.bottom": "border-right: 2px solid #ffffff1f; border-right-color: #ffffff1f !important;",
		".monaco-editor .cursor": "background: linear-gradient(to bottom, #0FAFFF, #4aa6d4) !important; box-shadow: 0 0 42px 5px #0FAFFF, #4aa6d4 0px 0px 34px 1px; color: #161616 !important",
		".moco-list-row.focused": "background:rgba(246, 201, 159, 1)",
		"div#workbench.parts.titlebar": "background-color:rgba(0,0,0,0.5)!important;"
	},

	"workbench.colorCustomizations": {
		"editorCursor.foreground": "#ffffff8d",
		"editorBracketMatch.border": "#d9d9d9",
		"editor.lineHighlightBackground": "#00000000",
		"editor.lineHighlightBorder": "#00000000",
		"editorIndentGuide.background1": "#ffffff10",
		"editorIndentGuide.activeBackground1": "#b4b4b437",
		"focusBorder": "#00000000",
		"statusBar.background": "#23232300",
		"statusBarItem.remoteBackground": "#ffffff00",
		"statusBar.border": "#ffffff1e",
		"sash.hoverBorder": "#afafaf00",
		"editorGroupHeader.border": "#ffffff00",
		"activityBar.background": "#27272700",
		"sideBar.background": "#1f1f1f00",
		"activityBar.border": "#ffffff00",
		"list.inactiveSelectionBackground": "#ffffff11",

		"[Xcode Default Dark Customized Version]": {
			"editorCursor.foreground": "#357bff",
			"scrollbar.shadow": "#00000000",
			"editorGroupHeader.border": "#ffffff1c"
		}
	},
	

	  "editor.overviewRulerBorder": false,
	  "color-highlight.markRuler": false,
	  "animations.CursorAnimation": true,
	  "window.restoreFullscreen": true,
	  "window.newWindowDimensions": "maximized",


	"symbols.hidesExplorerArrows": false,
	"extensions.experimental.affinity": {
		"asvetliakov.vscode-neovim": 1
	},
"workbench.iconTheme": "macos-modern-big-sur-icon-theme",
	"workbench.colorTheme": "Vesper",
}

from apc-extension.

markomitranic avatar markomitranic commented on August 25, 2024

@drcika can we perhaps pin this thread/issue? Its kinda hard to find in GitHub Issues, and its not referenced in the Readme, but its a really cool thread that helped me learn a lot.

from apc-extension.

markomitranic avatar markomitranic commented on August 25, 2024

I made a sweet little adjustment. I always wanted to try how it feels to swap the order of items in the intellisense popup. Usually, the type of the hovered entity comes first, but sometimes that can take up huge huge scrolls and completely hide the docs of that entity.

{
    ".monaco-hover-content": "display: flex; flex-direction: column;",
    ".monaco-hover-content .hover-row.markdown-hover": "display: block; order: 2;",
    ".monaco-hover-content .hover-row.markdown-hover:has(.rendered-markdown > p)": "order: 1; border-bottom: 1px dashed #4F5254; margin-bottom:6px;"
}

With this change, I've ensured that the docs always come in first, which (for me) makes it quite nice and readable.

Screenshot 2024-02-19 at 11 39 59

from apc-extension.

mubaidr avatar mubaidr commented on August 25, 2024

Screenshot_20240608_143415

My minimalistic setup

Changes

  • move sidebar to right
  • disable status bar
  • cleanup title bar
  • disable box shadow everywhere
  • disable border radius
  • use unified border color for all elements
  • de-emphasise line numbers
  • simplify tab bar look
  • use custom fonts for comments/ suggestions etc

Settings

  • Theme: Light Modern
  • Font
    • Code: Monaspace Neon
    • Comments/ Hints/ Others: Monaspace Krypton
    • UI: Default Font

Customizations:

"apc.stylesheet": {
    "*": "box-shadow: none!important; filter: none!important; border-radius: 0px!important; border-color: rgba(0,0,0,0.0625)!important; outline: none!important;",
    ".line-numbers": "font-family: Monaspace Krypton ExtraLight!important; font-size: 12px!important;",
    ".monaco-button-dropdown-separator": "background-color: transparent!important",
    ".tab, .titlebar": "border: none!important;",
    ".mtk3": "font-family: Monaspace Radon ExtraLight!important;",
    ".action-item.command-center-quick-pick": "display: none!important;",
    ".monaco-menu-container": "border: 1px solid rgba(0,0,0,0.0625)!important;"
  },
"workbench.colorCustomizations": {
    "activityBar.border": "#ff000000",
    "editorGroupHeader.border": "#ffffff00",
    "editorGroupHeader.tabsBackground": "#f6f8fa00",
    "editorGroupHeader.tabsBorder": "#ff000000",
    "editorInlayHint.background": "#ff000000",
    "editorInlayHint.parameterBackground": "#ff000000",
    "editorInlayHint.typeBackground": "#ff000000",
    "focusBorder": "#ff000000",
    "menu.border": "#d0d7de00",
    "sideBar.border": "#ff000000",
    "tab.activeBackground": "#ff000000",
    "tab.activeBorder": "#ff000000",
    "tab.border": "#ff000000",
    "tab.inactiveBackground": "#ffffff00",
    "titleBar.activeBackground": "#ffffff00",
    "titleBar.border": "#ff000000",
    "widget.border": "#d0d7de"
  },

from apc-extension.

mv-stns avatar mv-stns commented on August 25, 2024

Screen Shot 2024-03-26 at 18 08 03 Screen Shot 2024-03-26 at 18 08 25 Screen Shot 2024-03-26 at 18 09 43

Can you post ur full settings json? thats not enough information
The reason:
scrnsht_13-06 -2024at 13 31 02@2x

from apc-extension.

mubaidr avatar mubaidr commented on August 25, 2024

My minimalistic setup

Changes

  • move sidebar to right
  • disable status bar
  • cleanup title bar
  • disable box shadow everywhere
  • disable border radius
  • disable transitions
  • use unified border color for all elements
  • de-emphasise line numbers
  • simplify tab bar look
  • use custom fonts for comments/ suggestions etc

Light Mode

image

Dark Mode

image (1)

Settings

  • Theme: Light Modern/ Dark Modern (works with any theme)
  • Font
    • Code: Monaspace Neon
    • Comments/ Hints/ Others: Monaspace Krypton
    • UI: Default Font

Customizations:

"apc.stylesheet": {
    "*": "box-shadow: none!important; filter: none!important; border-radius: 0px!important; border-color: rgba(0,0,0,0.0625)!important; outline: none!important; transition: none !important;",
    ".action-item.command-center-quick-pick": "display: none!important;",
    ".activitybar, .titlebar, .action-item, .sidebar, .title, .monaco-list, .monaco-list-rows, .pane-header, .monaco-count-badge": "background: transparent!important; ",
    ".activitybar.right.bordered": "border-color: transparent!important;",
    ".line-numbers": "font-size: 12px!important; font-weight: 100!important;",
    ".monaco-button-dropdown-separator": "background-color: transparent!important",
    ".monaco-menu-container": "border: 1px solid rgba(0,0,0,0.0625)!important;",
    ".tab": "font-weight: 600!important; border-color: transparent!important;",
    ".monaco-icon-label-container::after": "display: none!important;",
    ".tab, .titlebar": "border: none!important;",
    ".tab-border-bottom-container": "display: none!important;",
    ".tab-border-top-container": "height: 2px!important;",
    ".tabs-container": "margin-bottom: 2em!important;",
    ".title-label": "visibility: hidden!important;",
    ".vs-dark .activitybar, .vs-dark .titlebar, .vs-dark .action-item, .vs-dark .sidebar, .vs-dark .title, .vs-dark .monaco-list, .vs-dark .monaco-list-rows": "background: #1E1E1E!important;"
  },
"workbench.colorCustomizations": {
    "activityBar.border": "#ff000000",
    "editorGroupHeader.border": "#ffffff00",
    "editorGroupHeader.tabsBackground": "#f6f8fa00",
    "editorGroupHeader.tabsBorder": "#ff000000",
    "editorInlayHint.background": "#ff000000",
    "editorInlayHint.parameterBackground": "#ff000000",
    "editorInlayHint.typeBackground": "#ff000000",
    "focusBorder": "#ff000000",
    "menu.border": "#d0d7de00",
    "sideBar.border": "#ff000000",
    "tab.activeBackground": "#ff000000",
    "tab.activeBorder": "#ff000000",
    "tab.border": "#ff000000",
    "tab.inactiveBackground": "#ffffff00",
    "titleBar.activeBackground": "#ffffff00",
    "titleBar.border": "#ff000000",
    "widget.border": "#d0d7de",
    "[Default Light Modern]": {
      "editor.background": "#f8f8f8"
    }
  },

from apc-extension.

syahbes avatar syahbes commented on August 25, 2024

👍 nice

from apc-extension.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.