# How to Create a Custom Color Variant of the Islands Dark Theme

> Learn to create a custom color variant of the Islands Dark theme in VS Code. Easily modify the theme by editing settings.json or packaging a new extension.

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

---

**You can create a custom color variant of the Islands Dark theme either by packaging a new extension with a modified [`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json) file or by applying `workbench.colorCustomizations` and `editor.tokenColorCustomizations` in your user [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) to override colors without installing anything.**

The Islands Dark theme by **bwya77/vscode-dark-islands** separates its visual presentation into two distinct layers: the core color palette defined in [`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json), and optional UI-style overrides handled by the Custom UI Style extension via the `custom-ui-style.stylesheet` object in [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json). This architecture lets you create a custom color variant by modifying hex values in the theme JSON or by overriding specific color keys locally, while preserving the theme's signature floating panels and animations.

## Method 1: Create a Standalone Extension

For a persistent, shareable variant, package your modifications as a new local extension. This approach copies the original color definitions and registers them under a new label in VS Code's theme picker.

### Copy the Original Theme File

Clone the repository and copy the base theme file into a new extension directory:

```bash
mkdir -p ~/.vscode/extensions/my-name.islands-dark-custom
cp themes/islands-dark.json ~/.vscode/extensions/my-name.islands-dark-custom/islands-dark-custom.json

```

### Configure the Extension Manifest

Create a [`package.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/package.json) file in the same directory to register the variant:

```json
{
  "name": "islands-dark-custom",
  "displayName": "Islands Dark – Custom",
  "description": "A user-defined colour variant of Islands Dark.",
  "version": "0.0.1",
  "publisher": "your-github-id",
  "engines": { "vscode": "^1.60.0" },
  "contributes": {
    "themes": [
      {
        "label": "Islands Dark – Custom",
        "uiTheme": "vs-dark",
        "path": "./islands-dark-custom.json"
      }
    ]
  }
}

```

### Modify the Color Palette

Edit [`islands-dark-custom.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/islands-dark-custom.json) to change specific UI colors. The `colors` object contains every workbench color, while `tokenColors` controls syntax highlighting. For example, to shift the accent color from blue to teal:

```json
{
  "colors": {
    "activityBar.activeBorder": "#5fd7d7",
    "activityBarBadge.background": "#5fd7d7",
    "button.background": "#5fd7d7",
    "textLink.foreground": "#5fd7d7"
  }
}

```

### Test the Extension

Open the extension folder in VS Code and press **F5**. A new Extension Development Host window opens with your variant available in **Preferences: Color Theme**. Once verified, you can keep the folder as a local extension or package it with `vsce` for distribution.

## Method 2: Override Colors in User Settings

For quick personal adjustments without creating a new extension, use `workbench.colorCustomizations`. This method takes precedence over the theme file and applies immediately after saving [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json).

### Customize UI Colors

Add overrides to your user [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) to recolor specific interface elements:

```json
{
  "workbench.colorTheme": "Islands Dark",
  "workbench.colorCustomizations": {
    "activityBar.activeBorder": "#ff7f50",
    "activityBarBadge.background": "#ff7f50",
    "button.background": "#ff7f50",
    "textLink.foreground": "#ff7f50"
  }
}

```

### Customize Syntax Highlighting

Override token colors using `editor.tokenColorCustomizations`. This example changes string literals to a lighter blue:

```json
{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "string",
        "settings": { "foreground": "#a0d8ff" }
      }
    ]
  }
}

```

## Method 3: Adjust UI Geometry and Canvas Colors

If you want the background canvas to match your new accent palette, modify the CSS custom properties consumed by the Custom UI Style extension. These variables control panel spacing, radius, and background layers without touching the theme JSON.

Update [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) with the `custom-ui-style.stylesheet` object:

```json
{
  "custom-ui-style.stylesheet": {
    ".monaco-workbench": {
      "--islands-bg-canvas": "#0c0e0f",
      "--islands-bg-surface": "#181a1d"
    }
  }
}

```

After editing any [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) changes, reload the window (**Ctrl+Shift+P → Reload Window**) to apply the CSS injections.

## Summary

- **Create a new extension** by copying [`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json), editing the hex values, and registering it via [`package.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/package.json) for a shareable, permanent variant.
- **Use `workbench.colorCustomizations`** in your user settings for immediate, local overrides that don't require packaging or reloading the editor window.
- **Modify `tokenColors`** in the theme JSON or via `editor.tokenColorCustomizations` to change syntax highlighting hues.
- **Adjust CSS variables** like `--islands-bg-canvas` through the `custom-ui-style.stylesheet` setting to fine-tune panel backgrounds and geometry.

## Frequently Asked Questions

### Do I need the Custom UI Style extension to change colors?

No. The Custom UI Style extension is only required if you want to modify CSS custom properties like `--islands-bg-canvas` for panel backgrounds and geometry. You can change all UI and syntax colors using the built-in `workbench.colorCustomizations` and `editor.tokenColorCustomizations` settings without installing additional extensions.

### Can I publish my custom variant to the VS Code Marketplace?

Yes. Once you have created a standalone extension with a modified [`islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/islands-dark.json) and a valid [`package.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/package.json), you can package it using `vsce package` and publish it under your own publisher ID. Ensure you update the `name`, `displayName`, and `publisher` fields to avoid conflicts with the original Islands Dark theme.

### Why aren't my color changes showing up immediately?

Color changes in `workbench.colorCustomizations` apply automatically, but Custom UI Style CSS injections require a full window reload. Press **Ctrl+Shift+P** (or **Cmd+Shift+P**) and select **Developer: Reload Window**. If using a standalone extension, ensure you have selected your custom theme from the Color Theme picker (**Ctrl+K Ctrl+T**).

### How do I change the floating panel background color?

The floating panel background is controlled by the `--islands-bg-canvas` and `--islands-bg-surface` CSS variables rather than the standard theme colors. To modify these, install the Custom UI Style extension and add the `custom-ui-style.stylesheet` configuration to your [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json), targeting the `.monaco-workbench` selector with your preferred hex values.