How to Change the Deep Dark Canvas Background Color in Islands Dark

To change the deep dark canvas background color in Islands Dark, override the --islands-bg-canvas CSS variable in your VS Code settings.json file.

The Islands Dark theme for VS Code (from the repository bwya77/vscode-dark-islands) uses a modular CSS variable system to paint the main workbench canvas. When the editor is empty, you see the deep dark background defined by the --islands-bg-canvas property. This variable is injected into the workbench via the extension's settings.json, allowing precise control over the darkest UI layer without touching syntax highlighting rules.

Locate the Canvas Background Variable in settings.json

According to the source code in bwya77/vscode-dark-islands, the canvas background color is defined inside the custom-ui-style.stylesheet object in settings.json. The theme targets the .monaco-workbench class to apply the variable globally:

".monaco-workbench": {
  "--islands-bg-canvas": "#121216",
  "background-color": "var(--islands-bg-canvas) !important"
}

• The variable --islands-bg-canvas stores the hex value #121216 (the default deep dark charcoal).
• The rule background-color references that variable with !important precedence, ensuring the color cascades across the entire empty workbench area.

Because the theme separates UI chrome from token colors (which live in themes/islands-dark.json), changing this one variable updates the canvas instantly without breaking the syntax highlighting palette.

Methods to Change the Deep Dark Canvas Background Color

You can customize the value using any valid CSS color format—hex, RGB, HSL, or even CSS functions like color-mix.

Override via User Settings (Recommended)

Instead of editing the extension's bundled files, add the override to your personal VS Code settings. This survives updates and keeps changes portable across workspaces:

// ~/.vscode/settings.json or Code: > Preferences > Settings (JSON)
{
  "workbench.colorTheme": "Islands Dark",
  "custom-ui-style.stylesheet": {
    ".monaco-workbench": {
      "--islands-bg-canvas": "#0b0c0f"
    }
  }
}

After saving, reload the VS Code window to apply the new deep dark canvas background color.

Edit the Extension's settings.json Directly

If you prefer to modify the theme source, locate the extension's settings.json (typically inside the installed extension folder) and change the hex value:

{
  "workbench.colorTheme": "Islands Dark",
  "custom-ui-style.stylesheet": {
    ".monaco-workbench": {
      "--islands-bg-canvas": "#1a1b20",
      "background-color": "var(--islands-bg-canvas) !important"
    }
  }
}

Note: This edit will be overwritten when the extension updates, so user settings are preferred for long-term customization.

Use CSS color-mix for Dynamic Shading

For fine-tuned darkness adjustments without calculating hex codes manually, use the CSS color-mix() function:

{
  "custom-ui-style.stylesheet": {
    ".monaco-workbench": {
      "--islands-bg-canvas": "color-mix(in srgb, #121216 70%, #000000 30%)"
    }
  }
}

This blends the original #121216 with black, producing a darker variant while maintaining the theme's original hue.

How the Canvas Background Color Propagates

The Islands Dark theme architecture relies on CSS custom properties that cascade through the Monaco workbench. The --islands-bg-canvas variable is defined once in settings.json and then referenced by the background-color property on .monaco-workbench. This design decouples the deep dark canvas background from the massive color map in themes/islands-dark.json, which governs syntax highlighting.

When you change the variable value, VS Code's Custom UI Style extension (which Islands Dark utilizes) reinjects the stylesheet, updating the canvas color across the entire UI—including empty editor groups and the workspace background—while leaving token colors untouched.

Summary

• The deep dark canvas background in Islands Dark is controlled by the --islands-bg-canvas CSS variable.
• The default value #121216 is defined in the extension's settings.json under the .monaco-workbench selector.
• Override this variable in your user settings.json using "custom-ui-style.stylesheet" to customize the color without modifying extension files.
• You can use hex, RGB, HSL, or CSS functions like color-mix() to define the new color.
• Changes require a window reload to take effect and apply globally to the workbench canvas.

Frequently Asked Questions

What is the default deep dark canvas color in Islands Dark?

The default value is #121216, a deep charcoal defined in the extension's settings.json file. This color appears behind the Explorer sidebar and in empty editor groups when no files are open.

Why don't my changes to the canvas color appear immediately?

VS Code requires a window reload to reinject the Custom UI Style stylesheet. After saving your settings.json, open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and run "Reload Window" to see the new deep dark canvas background color.

Can I use RGB or HSL values instead of hex codes?

Yes. The --islands-bg-canvas variable accepts any valid CSS color value. You can specify rgb(18, 18, 22), hsl(240, 10%, 8%), or color-mix() functions—the theme engine passes the value directly to the browser's rendering engine.

Will changing the canvas color affect my syntax highlighting?

No. Syntax highlighting colors are defined separately in themes/islands-dark.json. The --islands-bg-canvas variable controls only the workbench chrome (the area behind the code), ensuring that your code tokens remain unchanged when you adjust the deep dark background.

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