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

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 that establish different depths of dark backgrounds across the interface.

Understanding the Core Color Variables

In 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)
• 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)
• 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)

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)
• 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)

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 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:

/* 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:

/* 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 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 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.

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