# Canvas vs Surface Background Colors in Islands Dark: A Complete Guide

> Understand the difference between canvas and surface background colors in Islands Dark. Learn how these subtle contrasts create visual depth in your IDE.

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

---

**Islands Dark defines `--islands-bg-canvas` (#121216) for outer chrome elements like the title bar and activity bar, while `--islands-bg-surface` (#181a1d) provides a slightly lighter tone for interior panels such as the terminal and chat areas, creating visual depth through strategic contrast.**

The Islands Dark theme for VS Code implements a sophisticated two-layer background system that separates the workbench shell from content areas. According to the `bwya77/vscode-dark-islands` repository source code, this distinction relies on CSS custom properties defined in [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) that establish different depths of dark backgrounds across the interface.

## Understanding the Core Color Variables

In [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) [`L18-L20`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json#L18-L20), the theme declares two primary background variables that drive the entire color hierarchy:

- **`--islands-bg-canvas`** (`#121216`): A near-black tone serving as the foundational "deep-dark" layer
- **`--islands-bg-surface`** (`#181a1d`): A slightly elevated dark tone that appears lighter than the canvas

These hex values create a subtle but perceptible contrast ratio that helps users visually distinguish between the application frame and interior working spaces.

## Application Areas: Where Each Color Appears

### Canvas: The Deep-Dark Foundation

The **canvas** color applies to the outermost UI shells, establishing a uniform dark perimeter that visually separates the workbench from the desktop environment. According to the source code, specific implementations include:

- **Title bar**: `".part.titlebar { background-color: var(--islands-bg-canvas) !important; }"` in [[`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json#L71-L72)](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json#L71-L72)
- **Activity bar**: `".part.activitybar { background: var(--islands-bg-canvas) !important; }"` in [[`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json#L98-L100)](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json#L98-L100)
- **Status bar**: `".part.statusbar { background-color: var(--islands-bg-canvas) !important; }"` in [[`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json#L73-L75)](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json#L73-L75)

### Surface: Interior Panel Backgrounds

The **surface** color provides background tones for panels where content lives, offering a subtle lift against the canvas while maintaining the dark theme aesthetic. Key implementations include:

- **Bottom panel**: `".part.panel.bottom { background-color: var(--islands-bg-surface) !important; }"` in [[`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json#L38-L39)](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json#L38-L39)
- **Chat input container**: `".chat-input-container { background-color: var(--islands-bg-surface) !important; }"` in [[`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json#L47-L50)](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json#L47-L50)

## Design Rationale Behind the Two-Tone Approach

The separation between canvas and surface backgrounds serves three specific design goals implemented in the `bwya77/vscode-dark-islands` theme:

**Visual hierarchy**: By assigning the darker `#121216` canvas color to peripheral chrome elements, interactive interior components stand out against the near-black backdrop, directing focus toward editable content areas.

**Depth perception**: The incremental lightening of surface (`#181a1d`) versus canvas (`#121216`) creates a layered "floating panel" effect, making bottom panels and chat interfaces appear as distinct surfaces elevated above the base workspace.

**Consistent theming**: Both variables coordinate with [`themes/islands-dark.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/themes/islands-dark.json) to ensure syntax highlighting and token colors remain legible against their respective backgrounds, maintaining contrast ratios that meet accessibility standards across all UI layers.

## How to Customize These Colors

You can override these background colors by modifying the custom UI stylesheet settings in VS Code. The following snippets demonstrate the variable definitions and selector patterns used throughout the theme:

```json
/* Variable definitions in settings.json L18-L20 */
{
  "--islands-bg-canvas": "#121216",
  "--islands-bg-surface": "#181a1d"
}

```

To apply custom colors to specific UI elements, reference the selectors as implemented in the source:

```css
/* Outer chrome uses canvas */
.part.titlebar { background-color: var(--islands-bg-canvas) !important; }
.part.activitybar { background: var(--islands-bg-canvas) !important; }
.part.statusbar { background-color: var(--islands-bg-canvas) !important; }

/* Interior panels use surface */
.part.panel.bottom { background-color: var(--islands-bg-surface) !important; }
.chat-input-container { background-color: var(--islands-bg-surface) !important; }

```

## Summary

- **Canvas** (`--islands-bg-canvas`, `#121216`) serves as the deep-dark foundation for outer chrome elements including the title bar, activity bar, and status bar.
- **Surface** (`--islands-bg-surface`, `#181a1d`) provides a slightly lighter background for interior content areas like the bottom panel and chat input containers.
- Both variables are defined in [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) and applied through CSS custom properties with `!important` overrides to ensure consistent theming.
- The dual-color system creates visual depth and hierarchy, making interactive panels appear elevated above the base workspace.

## Frequently Asked Questions

### What hex values are used for canvas and surface background colors in Islands Dark?

**Canvas** uses `#121216` (a deep near-black), while **surface** uses `#181a1d` (a slightly lighter dark gray). The 4-point lightness difference creates perceptual depth without breaking the dark theme's cohesive appearance.

### Which UI elements use canvas versus surface backgrounds?

**Canvas** applies to peripheral chrome: the title bar, activity bar, and status bar. **Surface** applies to interior working spaces: the bottom panel, terminal backgrounds, and chat input containers. This mapping ensures that content areas appear visually elevated above the application frame.

### How do I change these colors in my VS Code settings?

Edit your [`settings.json`](https://github.com/bwya77/vscode-dark-islands/blob/main/settings.json) to redefine the CSS custom properties `"--islands-bg-canvas"` and `"--islands-bg-surface"` within the `workbench.colorCustomizations` or related custom UI stylesheet sections. You can reference the specific selectors (`.part.titlebar`, `.part.panel.bottom`, etc.) from the `bwya77/vscode-dark-islands` source to target specific UI components.

### Why does Islands Dark use two different background colors instead of one?

The two-tone approach establishes **visual hierarchy** and **depth perception**. By darkening the outer canvas, the theme creates a "stage" effect that makes interior panels and editor windows stand out as distinct working surfaces. This layering technique reduces visual clutter and helps users quickly identify interactive areas versus static chrome elements.