DOCSEARCHbyAlgolia
Submit Docs

Islands Dark Theme Documentation

repository·main·Indexed 27 days ago

https://github.com/bwya77/vscode-dark-islands

A dark color theme for VS Code-compatible editors (including VSCodium, Cursor, and Antigravity) inspired by JetBrains Islands Dark. It features deep backgrounds, warm syntax highlighting, floating glass-like panels, and rounded corners. The documentation covers installation via bootstrap scripts or Nix Flakes, manual setup, UI customization using CSS variables, and troubleshooting for the Custom UI Style extension.

Tokens
4.1K
Snippets
14
Records
20
Agent score
94%

What's inside Islands Dark

  1. Install Islands Dark via Nix Flake

    main

    If you use Nix, you can run a pre-configured instance of VS Code or VSCodium with the theme, extensions, and fonts already bundled.

    Run directly

    # Run VS Code
nix run github:bwya77/vscode-dark-islands#vscode

# Or run VSCodium
nix run github:bwya77/vscode-dark-islands#vscodium

    Use in NixOS or Home Manager

    Add the following to your flake inputs:

    { 
  inputs.islands-dark.url = "github:bwya77/vscode-dark-islands";

  outputs = { self, nixpkgs, islands-dark, ... }: {
    # Use the packages:
    # islands-dark.packages.${pkgs.stdenv.hostPlatform.system}.vscode
    # islands-dark.packages.${pkgs.stdenv.hostPlatform.system}.vscodium
  };
}
    { 
  inputs.islands-dark.url = "github:bwya77/vscode-dark-islands";

  outputs = { self, nixpkgs, islands-dark, ... }: {
    # islands-dark.packages.${pkgs.stdenv.hostPlatform.system}.vscode
    # islands-dark.packages.${pkgs.stdenv.hostPlatform.system}.vscodium
  };
}

  2. Activate Custom UI Style after installation

    main

    After the installation script finishes and your editor reloads, you must manually activate the CSS styling once to apply the floating glass panel look.

    1. Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux).
    2. Type Custom UI Style: Reload and press Enter.
    3. The editor will reload with the full theme applied.

    You only need to do this once, or whenever the editor is updated.

  3. Install Islands Dark for Cursor (macOS/Linux)

    main

    Islands Dark works on Cursor with dedicated scripts that target Cursor-specific paths and apply a settings-cursor.json variant.

    One-Liner Install

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

    Manual Clone Install

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

    Note: After every Cursor update, you must re-run Custom UI Style: Reload from the command palette. You may see a "corrupt installation" warning; this is expected and can be dismissed with Don't Show Again.

    To uninstall:

    ./uninstall-cursor.sh

  4. Install Islands Dark for VS Code (macOS/Linux/Windows)

    main

    The fastest way to install the Islands Dark theme and its required CSS customizations is via the one-liner bootstrap scripts.

    macOS/Linux

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

    Windows

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

  5. Uninstall Islands Dark

    main

    Use the provided uninstall scripts to restore your editor's settings.json, remove the extension, restore your previous themes, and clean up CSS patches and fonts. Choose the command corresponding to your editor and OS.

    ### macOS/Linux
```bash
# If you still have the repo cloned:
cd islands-dark
./uninstall.sh

# Or download and run directly:
curl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.sh | bash

    Windows (PowerShell)

    # If you still have the repo cloned:
cd islands-dark
.\uninstall.ps1

# Or download and run directly:
irm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.ps1 | iex

    VSCodium (macOS/Linux)

    # If you still have the repo cloned:
cd islands-dark
./uninstall.sh --vscodium

# Or download and run directly:
curl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.sh | bash -s -- --vscodium

    VSCodium (Windows PowerShell)

    # If you still have the repo cloned:
cd islands-dark
.\uninstall.ps1 -Editor vscodium

# Or download and run directly:
$env:ISLANDS_DARK_EDITOR = "vscodium"; irm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.ps1 | iex

    Cursor (macOS/Linux)

    # If you still have the repo cloned:
cd islands-dark
./uninstall-cursor.sh

    Antigravity (macOS/Linux)

    # If you still have the repo cloned:
cd islands-dark
./uninstall-antigravity.sh

  6. Install Islands Dark for VSCodium (macOS/Linux/Windows)

    main

    To install for VSCodium, use the specific flags or environment variables to ensure the scripts target the correct paths and use the codium CLI.

    macOS/Linux

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

    Windows

    $env:ISLANDS_DARK_EDITOR = "vscodium"; irm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.ps1 | iex

  7. Install Islands Dark for Antigravity (macOS/Linux)

    main

    The Antigravity installer targets Antigravity-specific paths and uses the agy-ide CLI.

    One-Liner Install

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

    Manual Clone Install

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

    To uninstall:

    ./uninstall-antigravity.sh

  8. Manual Installation of Islands Dark Theme

    main

    If you prefer to install the theme manually without using the bootstrap scripts, follow these steps:

    1. Install the theme extension

    Clone the repository and copy the extension files to your VS Code extensions folder.

    macOS/Linux:

    git clone https://github.com/bwya77/vscode-dark-islands.git islands-dark
cd islands-dark
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/

    Windows (PowerShell):

    git clone https://github.com/bwya77/vscode-dark-islands.git islands-dark
cd islands-dark
$ext = "$env:USERPROFILE\.vscode\extensions\bwya77.islands-dark-1.0.0"
New-Item -ItemType Directory -Path $ext -Force
Copy-Item package.json $ext\
Copy-Item themes $ext\themes -Recurse

    2. Install Custom UI Style extension

    Search for and install Custom UI Style (by subframe7536) from the VS Code Extensions marketplace.

    3. Install recommended icon theme

    Install Seti Folder (by l-igh-t) from the Extensions marketplace and set it as your icon theme via Command Palette > Preferences: File Icon Theme > Seti Folder.

    4. Install fonts

    • IBM Plex Mono: For the editor.
    • FiraCode Nerd Font Mono: For the terminal.
    • Bear Sans UI: For the sidebar, tabs, command center, and status bar (included in the fonts/ folder of this repo).

    5. Apply settings and enable UI Style

    1. Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and select Preferences: Open User Settings (JSON).
    2. Merge the contents of this repository's settings.json into your settings file.
    3. Run Custom UI Style: Enable from the Command Palette and reload VS Code.

    Note: If you see a "corrupt installation" warning, click the gear icon and select Don't Show Again.

  9. Customize Islands Dark visual properties

    main

    You can adjust the theme's appearance by editing the CSS custom properties defined under .monaco-workbench in your settings.json. These variables control border radii, spacing, and core background colors.

    ".monaco-workbench": {
    "--islands-panel-radius": "24px",
    "--islands-widget-radius": "14px",
    "--islands-input-radius": "12px",
    "--islands-item-radius": "6px",
    "--islands-panel-gap": "8px",
    "--islands-panel-top": "8px",
    "--islands-bg-canvas": "#121216",
    "--islands-bg-surface": "#181a1d",
    "background-color": "var(--islands-bg-canvas) !important"
}

  11. Fix Terminal Panel Bottom Cutoff

    main

    If the bottom terminal panel's content is being cut off by the VS Code status bar, it is due to the theme's CSS borders (6px top and 1px bottom) not being accounted for by VS Code's layout engine.

    To fix this, apply a negative margin to the .content element to pull it upward by the total border height (7px) and ensure the title bar remains visible on top of the overlapping area.

    ".part.panel.bottom > .composite.title": {
  "position": "relative !important",
  "z-index": "1 !important"
},
".part.panel.bottom > .content": {
  "margin-top": "-7px !important"
}

  12. Troubleshoot conflicts with 'Custom CSS and JS Loader'

    main
    If you previously used the Custom CSS and JS Loader extension (be5invis.vscode-custom-css), it may have injected CSS into workbench.html that persists. If you experience style conflicts, reinstall VS Code to clean the workbench.html file, then use only Custom UI Style.