Custom VS Code CSS

custom.css

a,
code,
h2,
h3,
summary,
.author,
.badge,
.content,
.count,
.description,
.identifier,
.label-description,
.mac,
.monaco-findInput .monaco-inputbox,
.monaco-keybinding-key,
.monaco-workbench,
.publisher,
.version {
  font-family: CozetteVector, -apple-system, sans-serif;
  font-size: 12px !important;
  font-weight: normal;
}
.monaco-workbench
  .activitybar
  > .content
  :not(.monaco-menu)
  > .monaco-action-bar
  .action-label.codicon {
  font-size: 24px !important;
}
.badge-content,
.monaco-count-badge {
  font-size: 12px !important;
  padding: 4px 6px 3px 5px !important;
}
.monaco-icon-label:after {
  font-size: 12px;
}
.monaco-icon-label:before {
  background-size: 12px;
  width: 12px;
}
.settings-group-level-1 {
  font-size: 12px !important;
  border-bottom: 1px solid;
}
.title .name {
  font-size: 24px !important;
  font-weight: normal;
}

instructions.md

How to Use

These instructions assume you already have VS Code installed and are on Mac. Other operating systems require some adjustments to paths.

1. Install the Cozette vector font.
2. Install the Custom CSS and JS Loader extension.
3. Open your VS Code settings file at ~/Library/Application Support/Code/User/settings.json on Mac.
4. Add "vscode_custom_css.imports": ["file:///<path>/custom.css"] to it.
5. Save custom.css from here into the <path> of your choosing.
6. Open the terminal.
7. Run the command sudo chown -R <user> "/Applications/Visual Studio Code.app/Contents/MacOS/Electron" to properly set editing permissions.
8. Restart VS Code.
9. Open the command palette (⌘⇧P).
10. Run the "Reload Custom CSS and JS" command.
11. Restart VS Code.
12. VS Code will say that the installation is corrupted, because the extension modifies it, so just ignore the popup (and/or tell it to never say that again, lol).