Islands Dark 主题实战指南：在 VS Code 生态中复刻 JetBrains Islands 的浮动玻璃面板与完整安装配置方案

• 开发工具

Islands Dark 是一套专为 VS Code 及其衍生编辑器（VSCodium、Cursor、Antigravity）设计的深色主题，其核心亮点在于「颜色主题 + CSS 注入」双件套：除了深色画布（#131217）与暖调语法高亮之外，还通过 Custom UI Style 扩展注入层叠样式，把侧边栏、编辑器、终端面板变成带圆角、玻璃描边与阴影的"浮动岛屿"。读完本文，你将掌握从一行命令安装到手动七步配置、从 CSS 变量调参到故障排查、从 VS Code 到 Cursor/Antigravity 的全平台落地方法，并能理解每个视觉参数背后的源码实现。

Islands Dark 主题整体界面截图

Islands Dark 主题 UI 细节截图

主题总览：一个主题，两套"引擎"

Islands Dark 的完整形态由两部分组成，理解这一点是后续所有操作的前提：

1. 颜色主题（Color Theme）：主题文件 themes/islands-dark.json 定义了 300+ 项 Workbench 颜色、全套 tokenColors 语法高亮与 semanticTokenColors 语义高亮。它在 package.json 中通过contributes.themes声明，uiTheme为vs-dark，安装后出现在「Preferences: Color Theme」列表中。
2. CSS 定制化（Custom UI Style）：由扩展subframe7536.custom-ui-style提供。仓库将整份样式表以custom-ui-style.stylesheet键存放在 settings.json 中，实现浮动面板、圆角、玻璃边框、动画等超出主题 API 能力范围的视觉改造。

此外还有一份可选的动画增强 animations.css，其中定义了极光边框（aurora borders）、液滴形变、呼吸辉光等高级效果，可作为二次开发的参考。

主题官方特性清单如下（见 README.md）：

• 深色画布#131217，面板悬浮于其上
• 玻璃描边配合"方向光模拟"——上/左边框更亮，下/右边框更暗
• 所有面板、通知、命令面板、侧边栏均使用圆角
• 胶囊形活动栏（Activity Bar）带玻璃选中指示器
• 面包屑栏与状态栏在未悬停时自动变暗
• 标签页关闭按钮在悬停时淡入
• 侧边栏选中项、滚动条、状态栏均有平滑过渡
• 胶囊形滚动条滑块
• 文件图标颜色匹配的辉光效果（配合 Seti Folder 图标主题效果最佳）
• 暖调语法高亮，覆盖 JS/TS、Python、Go、Rust、HTML/CSS、JSON、YAML、Markdown
• 编辑器使用 IBM Plex Mono，终端使用 FiraCode Nerd Font Mono

安装方式全景：四种途径覆盖五种编辑器

一行命令安装（推荐）

VS Code · macOS/Linux：

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

VS Code · Windows（PowerShell）：

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

VSCodium · macOS/Linux：

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

VSCodium · Windows（PowerShell）：

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

从源码看，bootstrap.sh 的作用是把仓库克隆到临时目录~/.islands-dark-temp，再转交 install.sh 执行真正的安装，最后询问是否清理临时文件。

手动克隆安装

VS Code · macOS/Linux：

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

VS Code · Windows（PowerShell）：

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

VSCodium · macOS/Linux：

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

VSCodium · Windows（PowerShell）：

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

脚本会自动完成六件事（源码逻辑见 install.sh）：

• ✅ 安装 Islands Dark 主题扩展（直接把package.json与themes/复制进~/.vscode/extensions/bwya77.islands-dark-1.0.0）
• ✅ 通过 CLI 安装 Custom UI Style 扩展（code --install-extension subframe7536.custom-ui-style --force）
• ✅ 安装 Bear Sans UI 字体（macOS 拷入~/Library/Fonts，Linux 拷入~/.local/share/fonts并执行fc-cache -f）
• ✅ 备份现有 settings.json 并应用 Islands Dark 设置（有jq时执行jq -s '.[0] * .[1]'合并，你的非主题配置被保留、主题键覆盖）
• ✅ 记录安装前状态到~/.config/Code/User/.islands-dark-state.json（供卸载时精确还原）
• ✅ 通过code --reload-window重载编辑器

重要：脚本结束并重载编辑器后，还需手动激活一次 CSS 注入：

1. 按Cmd+Shift+P（macOS）或Ctrl+Shift+P（Windows/Linux）
2. 输入Custom UI Style: Reload并回车
3. 编辑器会再次重载并应用完整主题

这一步只需执行一次（或编辑器升级后重做）。

注意：IBM Plex Mono 与 FiraCode Nerd Font Mono 需要另行安装（脚本会提示你）。

安装脚本中还藏着一个细节：它会在首次运行时清理extensions.json并做备份，目的是让编辑器重建扩展列表，从而可靠地注册手工复制安装的主题扩展。

Nix Flake 安装

Nix 用户可以直接运行预配置的 VS Code / VSCodium 实例，主题、扩展、字体全部内置：

# 运行 VS Code nix run github:bwya77/vscode-dark-islands#vscode # 或运行 VSCodium nix run github:bwya77/vscode-dark-islands#vscodium

在 NixOS 或 Home Manager 中作为 flake input 使用：

{ 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 }; }

从 flake.nix 的源码可以看出三条值得注意的实现策略：

• 它自动捆绑Custom UI Style、Seti Folder图标主题以及Bear Sans UI / IBM Plex Mono / FiraCode Nerd Font全部字体
• 由于 Nix store 只读，运行时 CSS 注入无法工作，因此 flake 采用构建期打补丁方案：在postInstall阶段把settings.json中custom-ui-style.stylesheet转换成的 CSS 字符串直接追加进workbench.desktop.main.css（核心代码位于 flake.nix）
• 首次运行时自动把仓库的settings.json复制到编辑器配置目录（~/.config/Code/User或~/.config/VSCodium/User），并用.islands_dark_first_run标记文件防止重复覆盖

衍生编辑器支持

VSCodium：标准安装器通过 macOS/Linux 的--vscodium参数与 Windows 的-Editor vscodium参数支持，路径与 CLI 均按 VSCodium 定制：

• 扩展目录：macOS/Linux 为~/.vscode-oss/extensions/，Windows 为%USERPROFILE%\.vscode-oss\extensions\
• 配置目录：macOS 为~/Library/Application Support/VSCodium/User/，Linux 为~/.config/VSCodium/User/，Windows 为%APPDATA%\VSCodium\User\
• 使用codiumCLI 而非code

卸载对应使用./uninstall.sh --vscodium或.\uninstall.ps1 -Editor vscodium。

Cursor（VS Code fork）：Islands Dark 通过一套专用脚本与settings-cursor.json适配 Cursor。一行安装：

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

手动安装：

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

install-cursor.sh 是install.sh的平行实现，目标路径为~/.cursor/extensions/、macOS~/Library/Application Support/Cursor/User/、Linux~/.config/Cursor/User/，并使用cursorCLI。它应用的 settings-cursor.json 与 settings.json 几乎一致，但有两处为 Cursor 定制的调整：

• "custom-ui-style.webview.enable": false—— Cursor 的扩展详情面板渲染在 CSP 更严格的 webview 中，保留 webview 补丁会触发 CSP 错误并出现空白面板
• 一条隐藏.titlebar-left .action-item:has(.codicon-panel-left)的规则 —— Cursor 在标题栏左上角渲染了一个"切换主侧边栏"按钮，会与侧边栏圆角重叠；Cmd+B仍可正常切换侧边栏

注意：Custom UI Style 在 Cursor 上并非官方支持，但从0.5.6起可稳定工作。每次 Cursor 更新后需重新从命令面板执行Custom UI Style: Reload以重新注入 CSS。首次重载后出现的 "corrupt installation" 警告属预期行为，可选择Don't Show Again忽略。

卸载：./uninstall-cursor.sh。

Antigravity（VS Code fork）：一行安装：

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

手动安装：

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

install-antigravity.sh 是install.sh的平行实现，目标路径为~/.antigravity-ide/extensions/、macOS~/Library/Application Support/Antigravity IDE/User/、Linux~/.config/Antigravity IDE/User/，使用agy-ideCLI。

注意：低于 2.0 的旧版 Antigravity 使用遗留配置路径，目前不受支持。旧版本用户需手动备份设置、自行安装主题，并把settings.json的相关部分复制进 Antigravity 设置。

卸载：./uninstall-antigravity.sh。

纯手动安装（七步）

不信任脚本时，可以完全手动安装：

Step 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。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

Step 2：安装 Custom UI Style 扩展。浮动面板、圆角、玻璃边框与动画都由它驱动：打开扩展面板（Cmd+Shift+X/Ctrl+Shift+X），搜索Custom UI Style（作者subframe7536）并安装。

Step 3：安装推荐图标主题。为获得颜色匹配的图标辉光效果，安装Seti Folder（作者l-igh-t），然后在命令面板执行Preferences: File Icon Theme并选择Seti Folder。

Step 4（即原文档 Step 5）：安装字体。主题使用三款字体：

• IBM Plex Mono—— 编辑器
• FiraCode Nerd Font Mono—— 终端
• Bear Sans UI—— 侧边栏、标签页、命令中心、状态栏（仓库 fonts/ 目录内置）

Bear Sans UI 安装方法：打开仓库fonts/目录，全选.otf文件双击用 Font Book 打开（macOS）或右键 > 安装（Windows）。想换字体的话，改editor.fontFamily、terminal.integrated.fontFamily以及样式表中的font-family即可。

Step 5（即原文档 Step 6）：应用设置。把 settings.json 的内容合并进你的用户设置：命令面板 >Preferences: Open User Settings (JSON)，然后小心合并。关键键为workbench.colorTheme、custom-ui-style.stylesheet以及字体/缩进偏好。

Step 6（即原文档 Step 7）：启用 Custom UI Style。命令面板 >Custom UI Style: Enable，编辑器重载。可能出现的 "corrupt installation" 警告属预期（CSS 注入所致），点击警告上的齿轮图标选择Don't Show Again即可。

CSS 定制化原理：每块面板如何变成"玻璃岛屿"

主题所有浮动玻璃效果都来自 settings.json 中custom-ui-style.stylesheet这一大段 CSS。它对不同 UI 区域的作用一览：

玻璃边框的"方向光"秘密

源码中对.part.sidebar、.part.editor、.part.auxiliarybar、.part.panel.bottom均应用了同一套"定向亮度"边框：上边框rgba(255,255,255,0.10~0.12)最亮、左边框0.06~0.08次之、下/右边框仅0.02~0.03，配合box-shadow: 0 2px 8px 0 rgba(0,0,0,0.3)的下坠投影，模拟出"顶部受光、底部沉入阴影"的玻璃质感（见 settings.json）。

编辑器面板还叠加了三个渲染优化属性：isolation: isolate、transform: translateZ(0)、contain: paint，用于把圆角面板内的绘制隔离起来，避免内容溢出圆角边界（见 settings.json）。

活动栏的胶囊形态

活动栏.part.activitybar被设置为 54px 宽并垂直居中留白，内部.composite-bar使用border-radius: 9999px变成胶囊，背景用color-mix(in srgb, ...)把画布色与面板色按 30% 混合出玻璃色调；选中的图标通过border-radius: 50%变为圆形指示器并叠加多层 inset 高光/阴影（见 settings.json）。

面包屑与状态栏的"呼吸式"交互

面包屑栏所有子元素默认opacity: 0，悬停时恢复1，过渡曲线为cubic-bezier(0.4, 0, 0.2, 1)（settings.json）；状态栏的图标与文字默认暗色，悬停时点亮为#9a9ea5，同样使用 0.4s 过渡（settings.json）。

可选的极光动画

仓库还附带 animations.css，它通过 CSS@property --border-angle注册角度变量，配合conic-gradient与islands-aurora关键帧，让一道绿色光晕沿面板边框持续旋转（8s 循环），并让四个面板的动画相位错开（-2s/-4s/-6s 延迟）；活动栏选中图标则使用islands-drop-morph液滴形变 +islands-breathe呼吸辉光动画。这份文件未默认接入settings.json，适合对动效有进一步追求的用户自行研究引用。

自定义：六个 CSS 变量掌控全局风格

所有关键视觉属性都由custom-ui-style.stylesheet顶部定义在.monaco-workbench上的 CSS 自定义属性控制。编辑这些变量即可快速调整整体观感：

".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" }

注：仓库当前 settings.json 中的默认值略有迭代（panel-gap/panel-top为6px，画布为#121216），上面给出的是 README 中记载的标准取值。

颜色（Colors）

这两个颜色定义了主题的纵深：canvas 是面板之间露出的更暗基底层，surface 是交互元素使用的略亮色。要覆盖主题的面板颜色（侧边栏、编辑器、终端背景），请在设置中用 VS Code 的workbench.colorCustomizations。

圆角（Border Radius）

例如想要更硬朗的直角风，全部设为8px；想要极致圆润，试试32px / 20px / 16px / 8px。胶囊形元素（活动栏、滚动条滑块、命令中心、角标）不受这些变量影响。

面板间距（Panel Spacing）

调到12px或16px获得更松弛的布局，降到4px则更紧凑。

颜色主题深读：语法高亮与语义高亮的暖调体系

主题文件 themes/islands-dark.json 定义了完整的高亮调色板，核心色板包括：

值得注意的实现细节：

• 语义高亮全面启用：文件末尾声明"semanticHighlighting": true，并用semanticTokenColors覆盖了 function/method/variable/property/type/class/interface/enum/namespace/typeParameter/decorator/macro/string/number/keyword/comment/regexp 等语义角色（themes/islands-dark.json），开启 Editor: Semantic Highlighting 后可获得比纯语法着色更准确的分析。
• 语言专项覆盖：tokenColors 中为 Python（装饰器、魔法方法、f-string 花括号）、Go（包名、import）、Rust（生命周期、宏、属性）、Shell（变量）、JSON/YAML/Markdown 等提供了专项规则（themes/islands-dark.json），因此 README 声称的"全面语言支持"有扎实的 token 规则背书。
• 终端 ANSI 色板完整：terminal.ansiBlack至terminal.ansiBrightWhite十六色全部定制（themes/islands-dark.json），与主题暖调风格保持一致。

故障排查

修改不生效

尝试禁用再启用 Custom UI Style：

1. 命令面板 >Custom UI Style: Disable
2. 重载编辑器
3. 命令面板 >Custom UI Style: Enable
4. 重载编辑器

"Corrupt installation" 警告

启用 Custom UI Style 后出现属预期行为，直接忽略或选择Don't Show Again。

与旧 "Custom CSS and JS Loader" 扩展冲突

如果此前用过Custom CSS and JS Loader（be5invis.vscode-custom-css），它可能已把 CSS 直接注入workbench.html，即使禁用后仍会残留。样式冲突时，重新安装编辑器以获得干净的workbench.html，之后只使用Custom UI Style一种注入方案。

卸载：一键还原初始状态

macOS/Linux（VS Code）：

# 仓库仍保留时： cd islands-dark ./uninstall.sh # 或直接下载运行： curl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.sh | bash

Windows（PowerShell）：

cd islands-dark .\uninstall.ps1 # 或直接下载运行： irm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.ps1 | iex

VSCodium macOS/Linux：./uninstall.sh --vscodium（或curl ... | bash -s -- --vscodium）；VSCodium Windows：.\uninstall.ps1 -Editor vscodium（或设置$env:ISLANDS_DARK_EDITOR = "vscodium"后执行irm ... | iex）；Cursor：./uninstall-cursor.sh；Antigravity：./uninstall-antigravity.sh。

卸载脚本会（逻辑见 uninstall.sh）：

• ✅ 从备份恢复原settings.json（无备份时精准摘除 Islands Dark 相关键）
• ✅ 移除 Islands Dark 主题扩展
• ✅ 恢复原颜色主题与图标主题
• ✅ 从编辑器 workbench 文件中移除 Custom UI Style 注入的 CSS 补丁
• ✅ 卸载 Custom UI Style（仅当它并非 Islands Dark 安装前已存在）
• ✅ 移除 Bear Sans UI 字体（仅当非安装前已有）
• ✅ 清理状态文件并重载编辑器

得益于安装时写入.islands-dark-state.json的状态记录（安装前的主题、图标主题、扩展存在性、字体存在性、备份路径），卸载可以做到全自动且无损。

许可

Islands Dark 以 MIT 协议开源发布（见 package.json），设计灵感来自 JetBrains Islands Dark UI 主题。仓库内 tests/ 目录还提供了各平台安装/卸载脚本的回归测试脚本，可供二次开发时验证自己的改动。

• 开发工具