岛屿深色

一款适用于 VS Code 兼容编辑器（包括 VSCodium）的深色主题，灵感源自 easemate IDE。具有悬浮玻璃质感面板、圆角设计、流畅动画及精心优化的用户界面。

• easemate
• easemate Nav
• easemate effects

特性

• 深邃深色背景（#131217）搭配悬浮面板
• 玻璃效果边框，模拟定向光源（上/左较亮，下/右柔和）
• 所有面板、通知、命令面板和侧边栏均采用圆角设计
• 胶囊形活动栏，配有玻璃质感选择指示器
• 未悬停时自动变暗的面包屑栏和状态栏
• 悬停时渐显的标签页关闭按钮
• 侧边栏选择、滚动条和状态栏的平滑过渡效果
• 胶囊形滚动条滑块
• 颜色匹配的图标发光效果（与 Seti Folder 图标主题搭配使用效果最佳）
• 温暖的语法高亮，支持多种语言（JS/TS、Python、Go、Rust、HTML/CSS、JSON、YAML、Markdown）
• 编辑器使用 IBM Plex Mono 字体，终端使用 FiraCode Nerd Font Mono 字体

安装

此主题包含两部分：颜色主题和用于实现悬浮玻璃面板外观的CSS 自定义样式。

一键安装（推荐）

最快的安装方式：

macOS/Linux（VS Code）

curl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.sh | bash

Windows（VS Code）

irm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.ps1 | iex

macOS/Linux（VSCodium）

curl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.sh | bash -s -- --vscodium

Windows（VSCodium）

$env:ISLANDS_DARK_EDITOR = "vscodium"; irm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.ps1 | iex

手动克隆安装

如果您倾向于先克隆：

macOS/Linux（VS Code）

git clone https://github.com/bwya77/vscode-dark-islands.git islands-dark
cd islands-dark
./install.sh

Windows (VS Code)

git clone https://github.com/bwya77/vscode-dark-islands.git islands-dark
cd islands-dark
.\install.ps1

macOS/Linux（VSCodium）

git clone https://github.com/bwya77/vscode-dark-islands.git islands-dark
cd islands-dark
./install.sh --vscodium

Windows（VSCodium）

git clone https://github.com/bwya77/vscode-dark-islands.git islands-dark
cd islands-dark
.\install.ps1 -Editor vscodium

这些脚本将自动执行以下操作：

• ✅ 安装 Islands Dark 主题扩展
• ✅ 安装 Custom UI Style 扩展
• ✅ 安装 Bear Sans UI 字体
• ✅ 备份您现有的设置并应用 Islands Dark 设置
• ✅ 重新加载 VS Code 或 VSCodium

重要提示： 脚本完成且编辑器重新加载后，您需要激活一次 CSS 样式：

1. 按下 Cmd+Shift+P（macOS）或 Ctrl+Shift+P（Windows/Linux）
2. 输入 Custom UI Style: Reload 并按 Enter
3. VS Code 或 VSCodium 将重新加载并应用完整主题

您只需执行此操作一次（或在编辑器更新后执行）。

注意： IBM Plex Mono 和 FiraCode Nerd Font Mono 必须单独安装（脚本会提醒您）。

Nix Flake 安装

如果您使用 Nix，可以运行预配置的 VS Code（或 VSCodium）实例，其中已捆绑主题、扩展和字体。

要直接运行而不安装：

# Run VS Code
nix run github:bwya77/vscode-dark-islands#vscode

# Or run VSCodium
nix run github:bwya77/vscode-dark-islands#vscodium

要在您的 NixOS 或 Home Manager 配置中使用它，请将其添加到您的 flake 输入中：

{
  inputs.islands-dark.url = "github:bwya77/vscode-dark-islands";

  outputs = { self, nixpkgs, islands-dark, ... }: {
    # Then you can add and use it:
    # islands-dark.packages.${pkgs.stdenv.hostPlatform.system}.vscode
    # islands-dark.packages.${pkgs.stdenv.hostPlatform.system}.vscodium
  };
}

注意： Nix flake 会自动包含 Custom UI Style 扩展、Seti Folder 图标主题以及所有必需的字体（Bear Sans UI、IBM Plex Mono 和 FiraCode Nerd Font）。首次运行时，它还会复制推荐的 settings.json。

VSCodium

标准安装程序支持 VSCodium，在 macOS/Linux 上可通过 --vscodium 参数，在 Windows 上可通过 -Editor vscodium 参数。它们会指向 VSCodium 特定的路径并使用 codium 命令行工具：

• 扩展：macOS/Linux 上为 ~/.vscode-oss/extensions/，Windows 上为 %USERPROFILE%\.vscode-oss\extensions\
• 设置：macOS 上为 ~/Library/Application Support/VSCodium/User/，Linux 上为 ~/.config/VSCodium/User/，Windows 上为 %APPDATA%\VSCodium\User\

本地安装时使用 ./install.sh --vscodium（macOS/Linux）或 .\install.ps1 -Editor vscodium（Windows），卸载时使用 ./uninstall.sh --vscodium（macOS/Linux）或 .\uninstall.ps1 -Editor vscodium（Windows）。

Cursor（VS Code 分支）

Islands Dark 可在 Cursor 上运行，只需通过一组专用脚本和 settings-cursor.json 变体进行两处小调整即可。

一键安装（Cursor，macOS/Linux）

curl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap-cursor.sh | bash

手动克隆安装（Cursor，macOS/Linux）

git clone https://github.com/bwya77/vscode-dark-islands.git islands-dark
cd islands-dark
./install-cursor.sh

Cursor 安装程序与 install.sh 类似，但其目标路径为 Cursor 专用路径（macOS 上为 ~/.cursor/extensions/、~/Library/Application Support/Cursor/User/，Linux 上为 ~/.config/Cursor/User/），并使用 cursor 命令行工具而非 code。它会应用 settings-cursor.json，该文件与 settings.json 内容相同，只是针对 Cursor 做了两项必要调整：

• "custom-ui-style.webview.enable": false —— Cursor 的扩展详情面板在 webview 中渲染，其内容安全策略（Content-Security-Policy）比 VS Code 的更严格；若启用 webview 补丁，会触发 CSP 错误并导致面板空白（上游问题）。
• 一条用于隐藏 .titlebar-left .action-item:has(.codicon-panel-left) 的规则 —— Cursor 会在标题栏左上角渲染一个“切换主侧边栏”按钮，该按钮会与侧边栏的圆角重叠。Cmd+B 快捷键仍可用于切换侧边栏。

注意： Custom UI Style 并未在 Cursor 上获得官方支持，但从版本 0.5.6 开始可以稳定运行（参见 issue #40）。每次 Cursor 更新后，你需要从命令面板重新运行 Custom UI Style: Reload 以重新应用 CSS 注入。首次重载后出现的“安装已损坏”警告是正常现象，可点击 不再显示 予以关闭。

卸载方法：

./uninstall-cursor.sh

反重力（VS Code 分支）

单行安装（推荐）

最快的安装方式：

macOS/Linux

curl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap-antigravity.sh | bash

手动克隆安装（Antigravity，macOS/Linux）

git clone https://github.com/bwya77/vscode-dark-islands.git islands-dark
cd islands-dark
./install-antigravity.sh

Antigravity 安装程序与 install.sh 类似，但其目标路径为 Antigravity 专用路径（macOS 上为 ~/.antigravity-ide/extensions/、~/Library/Application Support/Antigravity IDE/User/，Linux 上为 ~/.config/Antigravity IDE/User/），并使用 agy-ide 命令行工具而非 code。

注意： 旧版已弃用的 Antigravity（版本 <2.0）使用旧版配置路径，目前不支持这些路径。如果您使用旧版本，请手动备份您的设置，自行安装主题，并将 settings.json 中的相关部分复制到您的 Antigravity 设置中。

卸载方法：

./uninstall-antigravity.sh

手动安装

如果您倾向于手动安装，请按照以下步骤操作：

步骤 1：安装主题

克隆此仓库并复制扩展文件：

git clone https://github.com/bwya77/vscode-dark-islands.git islands-dark
cd islands-dark
mkdir -p ~/.vscode/extensions/bwya77.islands-dark-1.0.0
cp package.json ~/.vscode/extensions/bwya77.islands-dark-1.0.0/
cp -r themes ~/.vscode/extensions/bwya77.islands-dark-1.0.0/

对于 VSCodium，请使用 ~/.vscode-oss/extensions/bwya77.islands-dark-1.0.0，而非 ~/.vscode/extensions/bwya77.islands-dark-1.0.0。

在 Windows（PowerShell）上：

git clone https://github.com/bwya77/vscode-dark-islands.git islands-dark
cd islands-dark
$ext = "$env:USERPROFILE\.vscode\extensions\bwya77.islands-dark-1.0.0"
New-Item -ItemType Directory -Path $ext -Force
Copy-Item package.json $ext\
Copy-Item themes $ext\themes -Recurse

对于 Windows 上的 VSCodium，请使用 $env:USERPROFILE\.vscode-oss\extensions\bwya77.islands-dark-1.0.0。

步骤 2：安装 Custom UI Style 扩展

悬浮面板、圆角、玻璃边框和动画效果均由 Custom UI Style 扩展提供支持。

1. 在 VS Code 中打开 扩展：（Cmd+Shift+X / Ctrl+Shift+X）
2. 搜索 Custom UI Style（作者 subframe7536）
3. 点击 安装

步骤 3：安装推荐的图标主题

为获得最佳的颜色匹配图标发光效果，请安装 Seti Folder 图标主题：

1. 在 VS Code 中打开 扩展（Cmd+Shift+X / Ctrl+Shift+X）
2. 搜索 Seti Folder（作者 l-igh-t）
3. 点击 安装
4. 将其设置为图标主题：命令面板 > 首选项：文件图标主题 > Seti Folder

步骤 5：安装字体

此主题使用两种字体：

• IBM Plex Mono — 用于编辑器
• FiraCode Nerd Font Mono — 用于终端
• Bear Sans UI — 用于侧边栏、标签页、命令中心和状态栏（包含在 fonts/ 文件夹中）

安装 Bear Sans UI：

1. 打开本仓库中的 fonts/ 文件夹
2. 选择所有 .otf 文件，双击在字体册（macOS）中打开，或右键点击 > 安装（Windows）

如果您偏好其他字体，请更新设置中的 editor.fontFamily、terminal.integrated.fontFamily 和 font-family 值。

步骤 6：应用设置

将本仓库中 settings.json 的内容复制到您的 VS Code 设置中：

1. 打开 命令面板（Cmd+Shift+P / Ctrl+Shift+P）
2. 搜索 首选项：打开用户设置 (JSON)
3. 将本仓库 settings.json 的内容合并到您的设置文件中

注意： 如果您已有现有设置，请谨慎合并。关键设置包括 workbench.colorTheme、custom-ui-style.stylesheet 以及字体/缩进偏好。

步骤 7：启用 Custom UI Style

1. 打开 命令面板（Cmd+Shift+P / Ctrl+Shift+P）
2. 运行 Custom UI Style: Enable
3. VS Code 将重新加载

注意： 启用后您可能会看到“损坏的安装”警告。这是正常现象，因为 Custom UI Style 会向 VS Code 注入 CSS。点击警告上的齿轮图标，然后选择 不再显示。

CSS 自定义的作用

元素	效果
画布（Canvas）	所有面板背后的深黑色背景（--islands-bg-canvas）
侧边栏（Sidebar）	带圆角的悬浮效果（--islands-panel-radius）、玻璃边框、投影
编辑器（Editor）	带圆角的悬浮效果（--islands-panel-radius）、玻璃边框、浏览器标签页效果
活动栏（Activity bar）	pills 形状，带有玻璃内嵌阴影，圆形选择指示器
命令中心（Command center）	pills 形状，带有玻璃效果
底部面板（Bottom panel）	带圆角的悬浮效果（--islands-panel-radius）、玻璃边框
右侧边栏（Right sidebar）	带圆角的悬浮效果（--islands-panel-radius）、玻璃边框
通知（Notifications）	圆角（--islands-widget-radius）、玻璃边框、明显的投影
命令面板（Command palette）	圆角（--islands-widget-radius）、玻璃边框、列表行圆角
滚动条（Scrollbars）	pills 形状的滑块，带有淡入淡出过渡效果
标签页（Tabs）	浏览器标签页样式（活跃标签页底部开口），悬停时关闭按钮淡入
面包屑（Breadcrumbs）	默认隐藏，悬停时平滑淡入显示
状态栏（Status bar）	文本默认变暗，悬停时变亮
文件图标（File icons）	通过投影实现颜色匹配的发光效果（配合 Seti Folder 图标主题效果最佳）

自定义

所有关键视觉属性均由 settings.json 中 custom-ui-style.stylesheet 顶部定义的 CSS 自定义属性控制。编辑 .monaco-workbench 下的变量即可快速调整外观：

".monaco-workbench": {
    "--islands-panel-radius": "24px",
    "--islands-widget-radius": "14px",
    "--islands-input-radius": "12px",
    "--islands-item-radius": "6px",
    "--islands-panel-gap": "8px",
    "--islands-panel-top": "8px",
    "--islands-bg-canvas": "#121216",
    "--islands-bg-surface": "#181a1d",
    "background-color": "var(--islands-bg-canvas) !important"
}

颜色

变量	默认值	应用范围
--islands-bg-canvas	#121216	所有面板（工作台、标题栏、状态栏、活动栏）后方的深层背景
--islands-bg-surface	#181a1d	面板/表面背景（聊天输入框、编辑器小部件）

这两种颜色定义了主题的层次感。画布色是面板之间可见的较深基础层，而表面色是用于交互元素的稍浅颜色。若要覆盖主题的面板颜色（侧边栏、编辑器、终端背景），请在设置中使用 VS Code 的 workbench.colorCustomizations。

边框圆角

变量	默认值	应用范围
--islands-panel-radius	24px	侧边栏、编辑器、终端/底部面板、辅助栏
--islands-widget-radius	14px	通知、聊天输入框、命令面板
--islands-input-radius	12px	搜索栏、源代码管理提交输入框、按钮、悬停提示
--islands-item-radius	6px	列表行、标签页、窗格标题、终端标签

例如，要使所有元素边角更锐利，可将所有值设为 8px。若要实现完全圆润的外观，可尝试 32px / 20px / 16px / 8px 的组合。这些变量不会影响 pill 形元素（活动栏、滚动条滑块、命令中心、徽章）。

面板间距

变量	默认值	应用范围
--islands-panel-gap	8px	侧边栏、编辑器、聊天/辅助栏、终端和通知之间的水平间距
--islands-panel-top	8px	面板的顶部边距（标题栏下方的空间）

将值增加到 12px 或 16px 可获得更宽松的布局，减少到 4px 则可实现更紧凑的外观。

故障排除

修改未生效

尝试禁用并重新启用自定义 UI 样式：

1. 命令面板 > Custom UI Style: Disable
2. 重新加载 VS Code
3. 命令面板 > Custom UI Style: Enable
4. 重新加载 VS Code

“损坏的安装”警告

启用“自定义 UI 样式”后出现此警告属于正常现象。请关闭该警告或选择 不再显示。

以前使用的“Custom CSS and JS Loader”扩展

如果您以前使用过 Custom CSS and JS Loader 扩展（be5invis.vscode-custom-css），它可能已将 CSS 直接注入 VS Code 的 workbench.html 中，即使在禁用后也会保留。如果出现样式冲突，请重新安装 VS Code 以获取干净的 workbench.html，然后仅使用 Custom UI Style。

卸载

运行卸载脚本可将编辑器恢复到之前的状态：

macOS/Linux：

# If you still have the repo cloned:
cd islands-dark
./uninstall.sh

# Or download and run directly:
curl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.sh | bash

Windows (PowerShell):

# If you still have the repo cloned:
cd islands-dark
.\uninstall.ps1

# Or download and run directly:
irm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.ps1 | iex

VSCodium macOS/Linux：

# If you still have the repo cloned:
cd islands-dark
./uninstall.sh --vscodium

# Or download and run directly:
curl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.sh | bash -s -- --vscodium

VSCodium Windows (PowerShell):

# If you still have the repo cloned:
cd islands-dark
.\uninstall.ps1 -Editor vscodium

# Or download and run directly:
$env:ISLANDS_DARK_EDITOR = "vscodium"; irm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.ps1 | iex

光标（macOS/Linux）：

# If you still have the repo cloned:
cd islands-dark
./uninstall-cursor.sh

反重力（macOS/Linux）：

# If you still have the repo cloned:
cd islands-dark
./uninstall-antigravity.sh

卸载脚本将执行以下操作：

• ✅ 从备份中恢复您之前的 settings.json（如果没有备份，则精准移除 Islands Dark 相关键值）
• ✅ 移除 Islands Dark 主题扩展
• ✅ 恢复您之前的颜色主题和图标主题
• ✅ 从 VS Code 或 VSCodium 工作区文件中移除 Custom UI Style 的 CSS 补丁
• ✅ 卸载 Custom UI Style（仅当它是在安装 Islands Dark 之后才安装的情况）
• ✅ 移除 Bear Sans UI 字体（仅当它是在安装 Islands Dark 之后才安装的情况）
• ✅ 清理状态文件并重新加载 VS Code 或 VSCodium

所有操作均完全自动化 — 脚本运行后无需任何手动步骤。

致谢

灵感来源于 JetBrains Islands Dark UI 主题。

许可证

MIT