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

> Learn how to use the Custom UI Style extension to activate the Islands Dark theme in VS Code for a unique floating glass panel interface with rounded corners and animations.

- Repository: [Bradley Wyatt/vscode-dark-islands](https://github.com/bwya77/vscode-dark-islands)
- Tags: how-to-guide
- Published: 2026-05-06

---

**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`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) and applying it to the workbench DOM.

Without this extension, [`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json)): Defines the palette including background hues, foreground colors, and token colors.
- **CSS Stylesheet**: Referenced in [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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:

```bash
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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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:

```json
{
  "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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json). The repository’s [`uninstall.sh`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json), and running the Enable command.
- CSS variables defined under `.monaco-workbench` in [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) via the `"custom-ui-style.stylesheet"` setting, typically pointing to [`./custom-ui-style.css`](https://github.com/bwya77/vscode-dark-islands/blob/main/./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`](https://github.com/bwya77/vscode-dark-islands/blob/main/uninstall.sh) (macOS/Linux) or `uninstall.ps1` (Windows) script from the repository root. These scripts restore your previous [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) backups, disable the Custom UI Style extension, and remove the theme files, returning VS Code to its default appearance.