Airy Gap

Airy Gap adds breathing space between Visual Studio Code workbench areas.

It separates the sidebar, editor, auxiliary bar and bottom panel into rounded translucent surfaces over a shared animated radial-gradient background. Airy Gap is not a color theme and keeps your currently selected VS Code theme.

Requirements

• Visual Studio Code 1.134.0 or newer.
• The be5invis.vscode-custom-css extension.
• Custom CSS and JS Loader must be allowed to patch VS Code.

Airy Gap works through Custom CSS and JS Loader, so VS Code may show an "unsupported" warning after Custom CSS is enabled. This is expected for extensions that modify the workbench shell.

Usage

Install the extension and run one of these commands:

• Airy Gap: Enable
• Airy Gap: Disable
• Airy Gap: Reload styles

After enabling or reloading styles, restart VS Code when prompted.

Settings

{
  "airyGap.enabled": true,
  "airyGap.gap": 10,
  "airyGap.borderRadius": 10,
  "airyGap.panelOpacity": 0.9,
  "airyGap.gradient.enabled": true,
  "airyGap.gradient.opacity": 0.5,
  "airyGap.gradient.animation": "float",
  "airyGap.gradient.speed": 0.5
}

airyGap.enabled

Enable Airy Gap on startup.

airyGap.gap

Gap between workbench panels in pixels.

Range: 5 to 20.

airyGap.borderRadius

Panel corner radius in pixels.

Range: 0 to 24.

airyGap.panelOpacity

Opacity of the whole visual panel, including its contents.

Range: 0.1 to 1.

This intentionally softens the active VS Code color theme. Low values can reduce readability.

airyGap.gradient.enabled

Show or hide the shared radial-gradient background.

airyGap.gradient.opacity

Opacity applied to all gradient color points.

Range: 0.1 to 1.

airyGap.gradient.colors

Gradient color points.

Each point uses HSL and position values:

{
  "h": 143,
  "s": 56,
  "l": 56,
  "x": 0,
  "y": 51
}

Field ranges:

• h: 0 to 360
• s: 0 to 100
• l: 0 to 100
• x: 0 to 100
• y: 0 to 100

airyGap.gradient.animation

Supported values:

• none
• float
• pulse
• wave
• orbit

airyGap.gradient.speed

Animation speed multiplier.

Range: 0.1 to 3.

Notes

Airy Gap targets internal VS Code workbench DOM and CSS classes. VS Code updates can change those internals, so a future VS Code release may require an Airy Gap update.

License

MIT