How to Fix Islands Dark Theme Not Loading After VS Code Update

If your Islands Dark theme stops loading after a VS Code update, reinstall the Custom UI Style extension and re-run the install script from the bwya77/vscode-dark-islands repository to restore the CSS injection and configuration.

The Islands Dark theme is a custom VS Code theme that combines a color theme definition with advanced CSS styling to create floating glass panels, rounded corners, and smooth animations. Unlike standard themes, it requires the Custom UI Style extension (by subframe7536) to inject custom CSS into the VS Code workbench, which is why updates often break the visual styling.

Why the Islands Dark Theme Breaks After Updates

Islands Dark consists of two tightly coupled components: the color theme defined in themes/islands-dark.json and the custom UI CSS that creates the distinctive glass-panel aesthetic. When VS Code updates, three common issues can cause the theme to stop loading correctly.

Custom UI Style Extension Disabled

When VS Code updates, it may disable or remove the Custom UI Style extension that injects the CSS from settings.json under the key custom-ui-style.stylesheet. Without this extension enabled, VS Code only loads the basic color tokens from themes/islands-dark.json, resulting in a plain dark theme without the floating panels and rounded corners.

Workbench Layout Changes

Major VS Code releases sometimes modify the internal DOM structure and CSS class names (such as .monaco-workbench or custom --islands-* variables). If the selectors in the custom stylesheet no longer match the new workbench markup, the CSS injection succeeds but applies no visible styling.

settings.json Overwritten

During some updates, VS Code may overwrite or corrupt user settings. If the custom-ui-style.stylesheet entry that points to file:///$HOME/.vscode/extensions/bwya77.islands-dark-1.0.0/themes/islands-dark.css is lost, the extension has no stylesheet to inject, breaking the theme's visual appearance.

How to Fix Islands Dark Theme Loading Issues

Restore the theme using one of these three methods, ordered from fastest to most thorough.

Method 1: Re-run the Automated Install Script

The fastest way to restore the theme is using the bootstrap script from the repository, which reinstalls the theme files, the Custom UI Style extension, and required fonts, then automatically enables the extension.

On macOS or Linux:

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

On Windows PowerShell:

irm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.ps1 | iex

This script backs up your existing settings, copies the theme to ~/.vscode/extensions/bwya77.islands-dark-1.0.0/, and configures the custom-ui-style.stylesheet path in settings.json.

Method 2: Manual Installation and Configuration

If you prefer manual control, clone the repository and install the files yourself:

git clone https://github.com/bwya77/vscode-dark-islands.git
cd vscode-dark-islands

# Create extension directory and copy files

mkdir -p ~/.vscode/extensions/bwya77.islands-dark-1.0.0
cp package.json ~/.vscode/extensions/bwya77.islands-dark-1.0.0/
cp -r themes ~/.vscode/extensions/bwya77.islands-dark-1.0.0/

Then update your settings.json to point to the custom CSS file:

{
  "workbench.colorTheme": "Islands Dark",
  "custom-ui-style.stylesheet": "file:///home/$USER/.vscode/extensions/bwya77.islands-dark-1.0.0/themes/islands-dark.css",
  "editor.fontFamily": "IBM Plex Mono, Bear Sans UI, monospace",
  "terminal.integrated.fontFamily": "FiraCode Nerd Font Mono"
}

After saving settings.json, open the Command Palette (Ctrl+Shift+P) and run Custom UI Style: Enable, then reload VS Code.

Method 3: Clear Workbench Cache

If the theme appears partially loaded or glitchy after an update, clear VS Code's cached data to remove stale CSS:

On macOS or Linux:

rm -rf ~/.config/Code/Cache ~/.config/Code/CachedData

On Windows PowerShell:

Remove-Item "$env:APPDATA\Code\Cache\*" -Recurse -Force
Remove-Item "$env:APPDATA\Code\CachedData\*" -Recurse -Force

After clearing the cache, restart VS Code and run the Custom UI Style: Enable command again from the Command Palette.

Uninstalling and Starting Fresh

If the update left the extension in a broken state, use the uninstall script to clean up before reinstalling:

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

Then run the bootstrap script from Method 1 to perform a clean installation.

Summary

• Islands Dark requires two components: the color theme in themes/islands-dark.json and the Custom UI Style extension to inject CSS from settings.json.
• Updates break the theme by disabling the extension, changing CSS selectors, or overwriting settings.json.
• Quick fix: Run the bootstrap script (bootstrap.sh or bootstrap.ps1) to restore all files and settings automatically.
• Manual fix: Copy theme files to ~/.vscode/extensions/bwya77.islands-dark-1.0.0/, restore the custom-ui-style.stylesheet path in settings.json, and enable the extension via the Command Palette.
• Cache clearing: Remove ~/.config/Code/Cache (Linux/macOS) or %APPDATA%\Code\Cache (Windows) if styles appear corrupted.

Frequently Asked Questions

Why does Islands Dark look like a standard dark theme after updating?

This happens when the Custom UI Style extension is disabled or the custom-ui-style.stylesheet setting is missing from settings.json. Without CSS injection, VS Code only loads the color tokens from themes/islands-dark.json, showing the base colors without the floating glass panels and rounded corners. Re-enable the extension and verify the stylesheet path points to themes/islands-dark.css in your extensions folder.

Do I need to reinstall the theme after every VS Code update?

No, but you should check that the Custom UI Style extension remains enabled. Major VS Code updates occasionally disable extensions for compatibility checks. If the theme breaks, simply open the Command Palette, run Custom UI Style: Enable, and reload the window. Only reinstall if the CSS selectors become incompatible with the new VS Code version.

Where is the Islands Dark theme configuration stored?

The color theme definition is stored in themes/islands-dark.json within the extension directory at ~/.vscode/extensions/bwya77.islands-dark-1.0.0/. The CSS injection configuration is stored in your user settings.json file under the key custom-ui-style.stylesheet, which contains the absolute path to themes/islands-dark.css. Back up both locations before major VS Code updates.

Can I use the Islands Dark color theme without the custom CSS?

Yes, you can use just the color theme by selecting "Islands Dark" from the Color Theme picker (Ctrl+K Ctrl+T) without installing the Custom UI Style extension. However, you will only see the color scheme (backgrounds, syntax highlighting) without the distinctive UI modifications like floating panels, custom title bars, and rounded corners that require the CSS injection.

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