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

> Easily change the deep dark canvas background color in Islands Dark by modifying the --islands-bg-canvas CSS variable in your VS Code settings.json.

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

---

**To change the deep dark canvas background color in Islands Dark, override the `--islands-bg-canvas` CSS variable in your VS Code [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json). The theme targets the `.monaco-workbench` class to apply the variable globally:

```json
".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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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:

```json
// ~/.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`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) (typically inside the installed extension folder) and change the hex value:

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

```json
{
  "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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) under the `.monaco-workbench` selector.
- **Override** this variable in your user [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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`](https://github.com/bwya77/vscode-dark-islands/blob/main/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.