VS Code Setup

My personal VS Code configuration featuring an "islands" UI layout — floating, rounded panels with subtle borders and shadows that give the editor a modern, card-like appearance.

Inspired by vscode-dark-islands by bwya77. The layout and CSS structure are adapted from that project and customized to be theme-agnostic — all colours are derived from VS Code's own CSS variables rather than hard-coded values, so the islands layout works with any colour theme you choose.

What It Looks Like

• Floating panels — sidebar, editor, terminal, and activity bar all sit as rounded cards on a canvas background with small gaps between them
• Pill-shaped activity bar — icon bar collapses into a slim, centered capsule
• Fading UI chrome — breadcrumbs and status bar text fade out at rest and reveal on hover, keeping focus on the code
• Polished quick-open — the command palette is centred, taller (50 vh), and styled to match the rest of the layout
• Smooth transitions — hover states, tab actions, and minimap opacity all animate with cubic-bezier easing

Prerequisites

Fonts

Install all four font families before applying the settings:

Font	Used for
IBM Plex Mono	Editor text
Fira Code / FiraCode Nerd Font Mono	Terminal, sidebar, tabs, command palette
Bear Sans UI & Bear Sans UI Heading	Status bar, command centre

Bear Sans UI is a paid font. If you don't have it, replace the font-family references in the custom-ui-style.stylesheet section with any sans-serif you prefer (e.g. 'Inter' or 'SF Pro Text').

VS Code Extensions

Extension	Purpose
One Dark Pro	Color theme
Custom UI Style	Injects the CSS that creates the islands layout
VSCode Seti or equivalent providing vs-seti-folder	Folder icon theme

Installation

1. Install the fonts listed above for your OS.

2. Install the extensions from the VS Code Marketplace (links above).

3. Copy settings.json to your VS Code user settings directory:

   OS	Path
   macOS	~/Library/Application Support/Code/User/settings.json
   Windows	%APPDATA%\Code\User\settings.json
   Linux	~/.config/Code/User/settings.json

   Warning: This will overwrite your existing settings. Back up your current settings.json first if needed.

4. Reload VS Code — press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux), then run Developer: Reload Window.

5. If prompted by Custom UI Style to enable injection, click Restart to allow it to apply the CSS overrides.

Customisation Tips

• Change the panel gap/radius — edit the CSS variables at the top of custom-ui-style.stylesheet inside settings.json:

  "--islands-panel-radius": "24px",
  "--islands-panel-gap": "6px"

• Swap the colour theme — change workbench.colorTheme to any installed theme; the islands layout adapts automatically via VS Code CSS variables.
• Remove Bear Sans UI — search for Bear Sans UI in settings.json and replace with a font you have installed.