Make VSCode look like Zed: a remake of Zed's Ayu mirage theme for VSCode. Also includes file icons and APC custom CSS for Zed-like interface (modifies command palette & title bar)!
Source from: dempfi/ayu
Forked from: ayu-theme/vscode-ayu
Icons from: zed-industries/zed
Note that this isn't a theme maintained by the original Ayu theme author or the vscode fork vscode-ayu so please report issues related to this theme here.
Install the extension from the VS Code Marketplace.
Preferences > Color Theme > Ayu Mirage Zed
Preferences > File Icon Theme > Ayu Mirage Zed
If you want to setup File Icon, then go to Preferences > File Icon Theme > Ayu Mirage Zed.
To use Zed Fonts: Download and install both fonts from from zed-fonts
Update 12/11/24: Install & setup the Custom CSS and JS Loader extension, then use the following css in your custom css file:
* {
font-family: 'Zed Sans';
}
.quick-input-widget {
position: absolute !important;
top: 200px !important;
left: 50%;
border-radius: 10px;
border: 1px solid var(--vscode-textSeparator-foreground) !important;
box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.2) !important;
}
/* left title bar (controls) */
.titlebar-left {
max-width: 70px !important;
}
/* center title bar */
.titlebar-center {
margin: 0 !important;
}
/* arrow buttons */
.action-item.menu-entry {
display: none !important;
}
/* whole title bar command center container */
.action-item.command-center-center {
background-color: transparent !important;
border: none !important;
width: fit-content !important;
}
/* field */
.quick-input-header {
padding: 0 !important;
}
/* input element container */
.quick-input-header > .quick-input-and-message .monaco-inputbox {
border-radius: 10px 10px 0 0 !important;
}
/* actual input element */
.quick-input-header > .quick-input-and-message > .quick-input-filter > .quick-input-box input {
padding: 8px 10px !important;
}
/* list of results */
.quick-input-list > .monaco-list > .monaco-scrollable-element {
padding: 4px 6px !important;
}
/* status bar set height */
div:has(> .statusbar) {
height: 25px !important;
top: auto !important;
bottom: 0 !important;
}
.statusbar {
height: 25px !important;
}
/* hides search icon */
.codicon.codicon-search.search-icon {
display: none !important;
}
/* empty editor background */
.editor-group-container.empty.active {
background-color: var(--vscode-statusBar-background);
}
div:has(> .tabs-and-actions-container.tabs-border-bottom.empty) {
background-color: var(--vscode-statusBar-background) !important;
}Alternative method for older versions of VSCode / Cursor:
Install & setup the APC Customize UI++ extension, then paste the following into your settings.json. (Note: not tested on Windows.)
"apc.electron": {
"titleBarStyle": "hiddenInset",
"trafficLightPosition": {
"x": 7,
"y": 5
}
},
"editor.fontFamily": "'Zed Mono', 'Courier New', monospace",
"apc.font.family": "Zed Sans",
"apc.stylesheet": {
".quick-input-widget": {
"position": "absolute !important",
"top": "200px !important",
"left": "50%",
"border-radius": "10px",
"border": "1px solid var(--vscode-textSeparator-foreground) !important",
"box-shadow": "0 0 60px 0 rgba(0,0,0,0.2) !important"
},
// left title bar (controls)
".titlebar-left": {
"max-width": "70px !important"
},
// center title bar
".titlebar-center": {
"margin": "0 !important"
},
// arrow buttons
".action-item.menu-entry": {
"display": "none !important"
},
// whole title bar command center container
".action-item.command-center-center": {
"background-color": "transparent !important",
"border": "none !important",
"width": "fit-content !important"
},
// field
".quick-input-header": {
"padding": "0 !important"
},
// input element container
".quick-input-header > .quick-input-and-message .monaco-inputbox": {
"border-radius": "10px 10px 0 0 !important"
},
// actual input element
".quick-input-header > .quick-input-and-message > .quick-input-filter > .quick-input-box input": {
"padding": "8px 10px !important"
},
// list of results
".quick-input-list > .monaco-list > .monaco-scrollable-element": {
"padding": "2px !important"
},
// status bar set height
"div:has(> .statusbar)": {
"height": "25px !important",
"top": "auto !important",
"bottom": "0 !important"
},
".statusbar": {
"height": "25px !important"
},
// hides search icon
".codicon.codicon-search.search-icon": {
"display": "none !important"
},
// empty editor background
".editor-group-container.empty.active": {
"background-color": "var(--vscode-statusBar-background)"
},
"div:has(> .tabs-and-actions-container.tabs-border-bottom.empty)": {
"background-color": "var(--vscode-statusBar-background) !important"
}
},
Zed-like centered command palette & more custom css
No open editors
Setup
npm install # install dependencies
npm run build # build the themeRun development: Go to build.ts and preess F5. Changes to the theme will only apply when you run the build command, unless you edit the json files directly.
Build package
npm run packageInstall package locally
code --install-extension ayu-mirage-zed-1.0.0.vsix- CSS for command palette list