Comments (36)
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)
![](https://private-user-images.githubusercontent.com/84121715/249154143-cbb31ee6-97e1-4dd4-9f07-a86e0ef840b3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MTcyMTAsIm5iZiI6MTcxOTYxNjkxMCwicGF0aCI6Ii84NDEyMTcxNS8yNDkxNTQxNDMtY2JiMzFlZTYtOTdlMS00ZGQ0LTlmMDctYTg2ZTBlZjg0MGIzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI4VDIzMjE1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTNjNTZhM2E5NzNkMzQxZDg4MmNhMGE4NTdkZTdhMzEwZDRiZDZmMjZmZTc3MGVlN2ExNjAyMDVhYjgyOTI1MzQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.LQr0uzXAM2X6OjgBb9unwAqL4C6_P9003pjyl2mpvcw)
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.
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](https://private-user-images.githubusercontent.com/8055505/253777011-1da68487-b069-4b97-a804-2b9b9d88f41d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MTcyMTAsIm5iZiI6MTcxOTYxNjkxMCwicGF0aCI6Ii84MDU1NTA1LzI1Mzc3NzAxMS0xZGE2ODQ4Ny1iMDY5LTRiOTctYTgwNC0yYjliOWQ4OGY0MWQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjhUMjMyMTUwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTVjZjgyOWFlMTNlYzFlNDNjMGI0YWRhZThmY2NlMGJkYjM1NmFhMTJjZWRmMjJkMTM2YTMxMDVhZDkxMDc0OCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.iSyRuFCnRzAP-k0_vB0k-F5fpODWQbT_N5lDa3Cn-3U)
"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.
Jebrains Mono everywhere with vibrancy!
![スクリーンショット 2023-08-17 午後5 33 07](https://private-user-images.githubusercontent.com/4230968/261268423-3b34a24f-15d8-489f-8692-9278197ffb4c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MTcyMTAsIm5iZiI6MTcxOTYxNjkxMCwicGF0aCI6Ii80MjMwOTY4LzI2MTI2ODQyMy0zYjM0YTI0Zi0xNWQ4LTQ4OWYtODY5Mi05Mjc4MTk3ZmZiNGMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjhUMjMyMTUwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Yzk4NzQ5NzMxNjVmMTQ5N2RkZmMzMDM4ZDQwYzk3ZTAyNTI3MDYwMjZkN2MyM2ZhZTg2MGEzNDc1OTczODdhNiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.tBGlqQd0ZPPt9M7PCzPeXnI4QXHWq9pAiXLcw6gXjxc)
"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.
Xcode inspired <3
Active:
![image](https://private-user-images.githubusercontent.com/83356017/266828871-daea1c5a-9093-4cd5-9949-52d472e2f729.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MTcyMTAsIm5iZiI6MTcxOTYxNjkxMCwicGF0aCI6Ii84MzM1NjAxNy8yNjY4Mjg4NzEtZGFlYTFjNWEtOTA5My00Y2Q1LTk5NDktNTJkNDcyZTJmNzI5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI4VDIzMjE1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ4NmM4NmI2NTQ2YWE4NDZiZDExMTlkZjZmNWZlZTVmYmQzMjIwYjdjNzlmY2I1ZjdkOTdhZmU0OGVmOTliM2ImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.LjAmfR4NP-NbiLawLjgfhqjwZ_Q1nFliBCp05ypIFLw)
Inactive:
![image](https://private-user-images.githubusercontent.com/83356017/266828890-7c99b8ad-fb67-4f2a-8568-0d5b40f3fbb5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MTcyMTAsIm5iZiI6MTcxOTYxNjkxMCwicGF0aCI6Ii84MzM1NjAxNy8yNjY4Mjg4OTAtN2M5OWI4YWQtZmI2Ny00ZjJhLTg1NjgtMGQ1YjQwZjNmYmI1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI4VDIzMjE1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTU3NmU0N2IyZjI5MTMyYjUwYTFhNzI2NTljODIxNjQ5MWI2M2RhNTY2ZjczNDNhYTY2ZjAyYTI0OTFmOGE4MTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.FxHmYlAoWQbxqStmrpD7F4K3u3xy7FYRdNiLJa1Gk50)
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.
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:
from apc-extension.
from apc-extension.
from apc-extension.
![Screenshot 2023-09-12 at 00 00 41](https://private-user-images.githubusercontent.com/15520523/267158179-1bf13ec6-896b-484a-abfe-4fcff9f834a6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MTcyMTAsIm5iZiI6MTcxOTYxNjkxMCwicGF0aCI6Ii8xNTUyMDUyMy8yNjcxNTgxNzktMWJmMTNlYzYtODk2Yi00ODRhLWFiZmUtNGZjZmY5ZjgzNGE2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI4VDIzMjE1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA1MWU3N2ZkNWM1YWQ2NDk0ODBjYTBiMmMxNGRmMjY2YTQ0YWNkNjliNzEwMzg2MGE3NjE0YTM2MmJhZmFhYzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.yAi8tClN4_tr_AQAra53b_qqtFThBETx_TljvX5CGyo)
from apc-extension.
"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",
}
from apc-extension.
@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.
Like Apple Vision Pro but VSCode, thank you @drcika Apc Customize UI++ and customize-ui
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.
Full
Manual
Theme
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.
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.
![](https://private-user-images.githubusercontent.com/4096003/274979085-a28148c6-ad81-47a9-95b6-be43722f614f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MTcyMTAsIm5iZiI6MTcxOTYxNjkxMCwicGF0aCI6Ii80MDk2MDAzLzI3NDk3OTA4NS1hMjgxNDhjNi1hZDgxLTQ3YTktOTViNi1iZTQzNzIyZjYxNGYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjhUMjMyMTUwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MGUzNWJjYTRmZGJmZjk3NjVkMTU5M2Y4Y2U2N2Q1ZmNlMmE4OGE3NjE4YjUwNmZhNzc5MzgxNWEwOGZjN2M4MCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.nPk9w56hmuoNfVJ1Kht2TGlcyImZ3NlKf-Be_2al5Jo)
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.
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.
@mv-stns Yes, just set:
"workbench.preferredLightColorTheme": "Xcode Default (Dark Customized Version)"
in your settings.jsonNot working unfortunately
Try this:
"apc.electron": {
"vibrancy": "dark"
},
instead of vibrancy: "sidebar"
from apc-extension.
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](https://private-user-images.githubusercontent.com/16505105/249357078-3360f034-deeb-4340-a0d1-ac3df8b551d1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MTcyMTAsIm5iZiI6MTcxOTYxNjkxMCwicGF0aCI6Ii8xNjUwNTEwNS8yNDkzNTcwNzgtMzM2MGYwMzQtZGVlYi00MzQwLWEwZDEtYWMzZGY4YjU1MWQxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI4VDIzMjE1MFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ0NTJkNzUyYWRmZDQxMjJiOWJhYmZmYzY3M2ZjZGEwYjA4ODMxNzM3MmFlYjY0NzFhZDY0YjQ4ZDAwODY2N2ImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.pdb6Dvf_mJOeMwNpf3am_mcmNW-X4kZyXz_bYrUY1jE)
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.
@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 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.
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.
@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.
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 ❤️🔥
from apc-extension.
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
```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.
".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):
Any suggestions for this? Thanks
from apc-extension.
".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):
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.
今天才发现这个扩展,因为我在很长一段时间后终于打开了 vscode,并且正在清理未使用的扩展,所以我不得不删除自定义 ui
@drcika非常感谢您恢复此功能!我只是无法忍受 vscode 默认的 ui 僵硬
我已经成功地在几行配置中从自定义 ui 复制了我的设置,这非常棒,但是我仍然有一堆自定义 css,我需要在能够使用它之前修复它们,因为它看起来一堆自从我上次使用 vscode 以来,有些东西发生了变化
```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.
@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...
which hurts my eyes bad
from apc-extension.
@mv-stns
Yes, just set:
"workbench.preferredLightColorTheme": "Xcode Default (Dark Customized Version)"
in your settings.json
from apc-extension.
@mv-stns Yes, just set:
"workbench.preferredLightColorTheme": "Xcode Default (Dark Customized Version)"
in your settings.json
Not working unfortunately
from apc-extension.
Yes @dannylol19 ! It indeed worked with this one 😂 should have thought of this one
from apc-extension.
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.
Some other popular or built-in themes I've tried with these same settings:
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.
latest update of vscode broke the blur from vibrany, woopsies 😂
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.
@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.
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.
from apc-extension.
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.
Can you post ur full settings json? thats not enough information
The reason:
from apc-extension.
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
Dark Mode
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.
👍 nice
from apc-extension.
Related Issues (20)
- Reloading with Nix on MacOS and potentially NixOS fully doesn't work. HOT 3
- EPERM: operation not permitted, rename HOT 6
- real time css import on windows only works if file path is formatted unix style
- Unable to achieve complete titleBar compression on VSCodium
- devtools TypeError: findVariable is not a function or its return value is not iterable HOT 3
- Is it possible to modify VScode source files instead of installed version? HOT 1
- Question: Vibrancy (amount, size, radius) ?
- z
- mac, use activityBar.position: "top" but can't click HOT 1
- I don't want to minimize/maximize by double click on titlebar HOT 2
- Apc stops working after reboots. HOT 2
- Cannot set light font after upgrading vsCode to 1.90
- How to find sync/login and settings button with hidden title bar
- How to hide Sidebar title? HOT 1
- is it possible to access the vscode API from apc.imports .js?
- Command 'Enable Apc extension' resulted in an error HOT 1
- activityBar defaults break native "top" and "bottom" locations
- APC Extension Failed
- Possibility of wrapping extention buttons onto a second row?
- Weird empty area in the bottom right when using these settings
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from apc-extension.