How to Customize Border Radius Variables in the Islands Dark Theme

The Islands Dark theme exposes four CSS custom properties in settings.json that control corner rounding for panels, widgets, inputs, and list items; modifying these values instantly updates the border radius across the entire VS Code interface.

The Islands Dark theme for VS Code provides deep customization of UI curvature through configurable CSS variables. Located in the bwya77/vscode-dark-islands repository, these settings allow you to soften or sharpen corners throughout the interface without touching core theme files. Understanding how to customize border radius variables in Islands Dark theme gives you precise control over the visual density of sidebars, tabs, and input fields.

Where Border Radius Variables Are Defined

The theme declares its corner rounding values as CSS custom properties near the top of the settings.json file. According to the source code, lines 12‑15 define the four primary variables that drive the rounded aesthetic:

• --islands-panel-radius – Controls large container corners such as sidebars and editor panels
• --islands-widget-radius – Governs floating elements like notifications and the command palette
• --islands-input-radius – Adjusts text fields and search bars
• --islands-item-radius – Determines rounding for list rows, tabs, and pane headers

These declarations establish the base values that the theme's CSS overrides reference throughout the configuration.

How to Modify Border Radius Values

To customize the radii, open your VS Code User Settings (JSON) and override the default values declared in the extension's settings.json. You can set any valid CSS length value, such as 0px for sharp corners or 30px for pronounced rounding.

The theme picks up these variables automatically after you save the file and reload the window. No additional CSS files need editing because the overrides are injected through the Custom CSS and JS Loader mechanism configured in settings.json.

How Variables Are Applied Across the UI

The Islands Dark theme references these custom properties via var() functions to ensure consistent rounding. Specific components bind to specific variables as implemented in the source:

Panels and Sidebars

Line 25 of settings.json applies --islands-panel-radius to primary containers using the rule border-radius: var(--islands-panel-radius) !important. This affects the sidebar, terminal panel, and editor groups.

List Items and Tabs

On line 54, the theme utilizes --islands-item-radius for interactive rows and tab headers. This creates subtle rounding on file explorer entries, breadcrumb items, and tab labels without affecting the larger containers they sit within.

Input Fields and Search Bars

Search inputs and commit message boxes receive their curvature from --islands-input-radius, referenced on line 163. This distinct variable allows you to keep text fields slightly more conservative than decorative panels while maintaining visual harmony.

Complete Configuration Example

Place the following values in your VS Code user settings.json to apply a custom rounded aesthetic. These overrides take precedence over the theme defaults immediately upon saving:

{
  "--islands-panel-radius": "30px",
  "--islands-widget-radius": "12px",
  "--islands-input-radius": "8px",
  "--islands-item-radius": "4px"
}

Each variable maps to specific UI regions as defined in the extension's CSS injection logic. You can mix pixel values with other CSS length units like rem or em if your VS Code setup supports them.

Summary

• Border radius variables are declared in settings.json (lines 12‑15) as --islands-panel-radius, --islands-widget-radius, --islands-input-radius, and --islands-item-radius
• Panels consume --islands-panel-radius via an !important rule on line 25
• List items and tabs pull from --islands-item-radius on line 54
• Input fields reference --islands-input-radius on line 163
• Customization requires only updating these values in your User Settings JSON and reloading the window

Frequently Asked Questions

Do I need to install a custom CSS loader to modify these variables?

No additional loader configuration is required. The Islands Dark theme relies on the Custom CSS and JS Loader extension already specified in its settings.json. You only need to override the variable values in your User Settings, and the existing injection logic will apply them automatically.

What happens if I set a border radius variable to 0px?

Setting any radius variable to 0px removes rounding from its associated components, producing sharp, 90‑degree corners. For example, "--islands-panel-radius": "0px" flattens the sidebar and editor panel edges while leaving other elements unchanged.

Can I use rem or percentage values instead of pixels?

Yes, the CSS custom properties accept any valid CSS length unit. You can specify "--islands-input-radius": "0.5rem" or "--islands-widget-radius": "1%" and the theme will apply those values directly to the border-radius properties.

Where can I find the default values for reference?

The default pixel values are documented in the README.md file within the bwya77/vscode-dark-islands repository, specifically in the radius table section. You can also inspect the initial declarations on lines 12‑15 of settings.json to see the original values shipped with the theme.

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