Skip to content

README.md

Latest commit

 

History

History
162 lines (116 loc) · 4.32 KB

README.md

File metadata and controls

162 lines (116 loc) · 4.32 KB

Preview

✦ VSCode Custom UI

A hand-crafted Visual Studio Code reskin — cleaner, rounder, and more alive.

License: MIT VS Code Extension Stars

✦ What's Inside

A set of carefully crafted CSS (and optional JS) injections that transform the default VSCode interface into something worth staring at all day.

Area What Changed
Activity Bar Floating pill icons, smooth hover lift, animated active indicator
Command Palette Slide-in entrance, layered shadow, input focus glow
Notifications Toast slide-in, severity-colored borders, fade-in toolbar
Editor Watermark Replaced with custom SVG on empty editor
Global Rounded corners, improved spacing, subtle borders

✦ Project Structure

vscode-custom-ui/
│
├── css/
│   └── custom.css          # All UI overrides
│
├── js/
│   └── script.js           # Optional JS tweaks
│
├── assets/
│   ├── welcome.svg         # Custom editor watermark
│   └── images/             # Additional assets
│
└── README.md

✦ Installation

1 — Install the extension

Search for Custom CSS and JS Loader in the VS Code Extensions panel, or install via CLI:

code --install-extension be5invis.vscode-custom-css

2 — Clone this repo

git clone https://github.com/your-username/vscode-custom-ui.git

3 — Point VSCode to the files

Open your settings.json (Ctrl+Shift+P → Open User Settings JSON) and add:

"vscode_custom_css.imports": [
  "file:///absolute/path/to/vscode-custom-ui/css/custom.css",
  "file:///absolute/path/to/vscode-custom-ui/js/script.js"
]

Windows example

"vscode_custom_css.imports": [
  "file:///C:/Users/yourname/vscode-custom-ui/css/custom.css"
]

macOS / Linux example

"vscode_custom_css.imports": [
  "file:///home/yourname/vscode-custom-ui/css/custom.css"
]

4 — Enable & restart

Open the Command Palette (Ctrl+Shift+P) and run:

Enable Custom CSS and JS

Then fully restart VS Code. If prompted about a corrupted installation — that's normal, click Don't Show Again.

✦ Snippet Highlights

Custom Editor Watermark

.editor-group-watermark .letterpress {
  background-image: url("file:///path/to/assets/welcome.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center;
  background-size: contain;
}

Activity Bar — Floating Pills

.monaco-workbench .activitybar > .content
  :not(.monaco-menu) > .monaco-action-bar .action-item {
  border-radius: 12px;
  border: 1.5px solid transparent;
  transition: background 0.18s ease, transform 0.14s ease;
}

Custom Editor Font

.monaco-editor {
  font-family: "MesloLGS NF", "Hack Nerd Font", monospace !important;
}

✦ Recommended Fonts

For the best experience, install one of these Nerd Fonts:

These include extra programming ligatures and symbols used throughout the UI.

✦ Notes

CSS selectors may break after a VS Code update since they target internal class names. If something stops working, open an issue or check the selector in DevTools (Help → Toggle Developer Tools).

✦ License

Released under the MIT License. Use it, fork it, make it yours.

made with obsession · your-username