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

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 file or by applying workbench.colorCustomizations and editor.tokenColorCustomizations in your user 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, and optional UI-style overrides handled by the Custom UI Style extension via the custom-ui-style.stylesheet object in 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:

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 file in the same directory to register the variant:

{
  "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 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:

{
  "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.

Customize UI Colors

Add overrides to your user settings.json to recolor specific interface elements:

{
  "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:

{
  "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 with the custom-ui-style.stylesheet object:

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

After editing any 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, editing the hex values, and registering it via 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 and a valid 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, targeting the .monaco-workbench selector with your preferred hex values.

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