How to Use Custom UI Style Extension with Islands Dark Theme in VS Code

The Custom UI Style extension injects the CSS stylesheet that transforms the Islands Dark color theme into a floating glass-panel interface with rounded corners and animations.

The Islands Dark theme by bwya77/vscode-dark-islands consists of two distinct components: a standard VS Code color theme and a custom CSS layer that creates the signature "island" aesthetic. Because VS Code restricts themes from injecting arbitrary CSS directly, the theme relies on the Custom UI Style extension (by subframe7536) to patch the workbench with glass-effect panels and smooth animations.

Why the Custom UI Style Extension Is Required

VS Code’s native theme API only allows modification of color tokens and basic UI colors. It cannot create the floating glass panels, custom border radii, or layout spacing that define the Islands Dark look. The Custom UI Style extension provides a safe injection point for custom CSS by reading the custom-ui-style.stylesheet setting from your settings.json and applying it to the workbench DOM.

Without this extension, themes/islands-dark.json will apply only the color palette (backgrounds, foregrounds, and syntax highlighting), leaving you with a standard rectangular interface instead of the intended immersive design.

Theme Architecture Overview

The Islands Dark theme uses a dual-layer architecture:

• Color Theme (themes/islands-dark.json): Defines the palette including background hues, foreground colors, and token colors.
• CSS Stylesheet: Referenced in settings.json under the custom-ui-style.stylesheet key. This file contains the rules for rounded corners, transparency effects, and panel positioning.
• CSS Variables: Defined under the .monaco-workbench selector in settings.json (e.g., --islands-panel-radius, --islands-bg-canvas). These variables allow you to tune the appearance without editing the raw CSS.

According to the repository source code, the installation scripts (install.sh and install.ps1) automate the process of installing the extension, copying the theme files, and enabling the custom stylesheet.

Step-by-Step Installation Guide

1. Install the Islands Dark Theme

Clone or download the repository, then copy the themes/ folder into your VS Code extensions directory, or run the automated installer:

curl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.sh | bash

2. Install the Custom UI Style Extension

Open the Extensions view (Ctrl+Shift+X), search for Custom UI Style by subframe7536 (extension ID: subframe7536.custom-ui-style), and click Install.

3. Apply the Recommended Settings

Merge the repository’s settings.json contents into your user settings. Open the Command Palette (Ctrl+Shift+P), run Preferences: Open User Settings (JSON), and add the following configuration:

{
  "workbench.colorTheme": "Islands Dark",
  "custom-ui-style.stylesheet": "./custom-ui-style.css",
  ".monaco-workbench": {
    "--islands-panel-radius": "24px",
    "--islands-widget-radius": "14px",
    "--islands-bg-canvas": "#121216",
    "--islands-bg-surface": "#181a1d",
    "background-color": "var(--islands-bg-canvas) !important"
  }
}

This configuration links the CSS file and initializes the CSS custom properties that control the glass effect.

4. Enable the Extension

Activate the styling by running Custom UI Style: Enable from the Command Palette (Ctrl+Shift+P). VS Code will reload automatically. Upon restart, the workbench will render with floating panels, rounded corners, and the glass morphism effect.

Customizing the Appearance

You can fine-tune the UI without touching the CSS file by modifying the CSS variables in settings.json:

• --islands-panel-radius: Controls the corner rounding of main panels (default: 24px).
• --islands-widget-radius: Sets the radius for smaller widgets and buttons (default: 14px).
• --islands-bg-canvas: The base background color behind all panels.
• --islands-bg-surface: The color of floating panels and surfaces.

After editing these values, run Custom UI Style: Reload from the Command Palette to apply changes without a full restart.

Troubleshooting and Resetting

If changes do not appear or the UI renders incorrectly, disable and re-enable the extension:

1. Open the Command Palette (Ctrl+Shift+P).
2. Run Custom UI Style: Disable.
3. Reload VS Code.
4. Run Custom UI Style: Enable.

This cycle clears the injected CSS and reapplies the current configuration from settings.json. The repository’s uninstall.sh and uninstall.ps1 scripts automate the removal process, restoring your previous settings and disabling the extension entirely.

Summary

• The Islands Dark theme requires the Custom UI Style extension to render its glass-panel aesthetic because VS Code themes cannot inject CSS natively.
• The setup involves installing the theme, installing the extension from the Marketplace, merging the repository’s settings.json, and running the Enable command.
• CSS variables defined under .monaco-workbench in settings.json control radius, gaps, and colors without requiring CSS edits.
• Use the Command Palette commands Custom UI Style: Enable, Disable, and Reload to manage the styling state.

Frequently Asked Questions

What happens if I install the Islands Dark theme without the Custom UI Style extension?

You will see only the color palette defined in themes/islands-dark.json. The interface will retain VS Code’s default rectangular shapes and layout because the CSS required for the floating glass panels cannot load without the extension’s injection mechanism.

Where does the CSS file for the glass effect live?

The stylesheet is referenced in your settings.json via the "custom-ui-style.stylesheet" setting, typically pointing to ./custom-ui-style.css relative to your user profile. The actual CSS rules rely on variables defined in the .monaco-workbench section of the same file.

Can I use the Custom UI Style extension with other themes?

Yes, the extension is theme-agnostic. You can point "custom-ui-style.stylesheet" to any CSS file to customize VS Code’s UI, though the CSS variables and selectors used in the Islands Dark configuration are specifically tailored to complement that theme’s color palette.

How do I completely uninstall the Islands Dark theme and remove the custom styling?

Run the uninstall.sh (macOS/Linux) or uninstall.ps1 (Windows) script from the repository root. These scripts restore your previous settings.json backups, disable the Custom UI Style extension, and remove the theme files, returning VS Code to its default appearance.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}