vscode-dark-islands
将 JetBrains Islands Dark 标志性「玻璃浮动面板」设计完美移植到 VSCode
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
微信扫码咨询客服
POMOAI — 让开源 AI 即刻运行
将 JetBrains Islands Dark 标志性「玻璃浮动面板」设计完美移植到 VSCode
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
图1：Islands Dark 主题效果预览——浮动玻璃面板与暖色语法高亮
2025年，一款名为 easemate 的 IDE 以其标志性的「玻璃浮动面板」（Floating Glass Panels）设计语言，在 X（前 Twitter）上引发了一波设计圈的热议。随后 JetBrains 推出「Islands」系列深色主题，将这种设计语言系统化。
Islands Dark 正是这场设计运动的产物——作者 bwya77 将 JetBrains Islands Dark 的核心视觉理念移植到了全球最流行的代码编辑器 Visual Studio Code 上，并在移植过程中融入了自己的设计思考：更深的画布底色、更暖的语法配色、以及更细腻的 CSS UI 定制。
截至目前，该主题在 GitHub 上已获得超过 8500 颗星，272 个 Fork，被 thousands of 开发者日常使用。
Islands Dark 的底色不是常见的纯黑 #000000，而是一种带有紫调的深灰 #131217。这种「不完全黑」的底色在视觉上更柔和——在高对比度屏幕（如 MacBook Pro 的 Liquid 视网膜屏）上长时间编码时，能有效减少眼睛疲劳。
这是 Islands Dark 最标志性的视觉特征。与传统暗色主题的硬边框不同，Islands Dark 为每个面板赋予了「方向性光感」：顶部和左侧边框更亮，底部和右侧则更暗，模拟出光线从左上角照射玻璃面板的质感。
配合 24px 的超大圆角（面板）和 14px 的控件圆角（按钮、输入框等），整个编辑器界面呈现出类似 macOS 毛玻璃效果的「漂浮感」。
Islands Dark 对主流编程语言的语法高亮做了精心调校，色调偏暖（琥珀色、橙色、珊瑚色为主色调），与常见的蓝色系暗色主题形成鲜明对比。支持的语言包括但不限于：
| 特性 | 描述 |
|---|---|
| 悬浮式活动栏 | Activity Bar 变为胶囊形，悬浮效果，选中指示器带玻璃质感 |
| Tab 关闭按钮 | 默认隐藏，悬停时淡入，界面更简洁 |
| 面包屑栏 / 状态栏 | 未悬停时自动降低亮度，减少视觉干扰 |
| 滚动条 | 胶囊形滑块（pill-shaped scrollbar），视觉更柔和 |
| 命令面板 | 圆角更大，搜索框与结果区玻璃边框 |
| 图标辉光 | 配合 Seti Folder 图标主题使用时，文件夹图标有颜色辉光效果 |
Islands Dark 提供了跨平台一键安装脚本，覆盖 macOS、Linux 和 Windows：
macOS / Linux（推荐）：
curl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.sh | bash
Windows PowerShell：
irm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.ps1 | iex
安装过程全自动：克隆仓库 → 复制主题文件到 VSCode 扩展目录 → 写入用户设置 → 激活主题。无需手动配置，完全零门槛。
手动安装也很简单：从 GitHub 下载仓库，在 VSCode 中使用「从 VSIX 安装」或复制 themes/islands-dark.json 到本地主题目录即可。
Islands Dark 的技术实现分为两层：
themes/islands-dark.json）标准的 VSCode 颜色主题 JSON 文件，定义了 editor.tokenColors 和 semanticTokenColors。VSCode 原生解析这部分内容，提供基础的语法高亮和 UI 颜色映射。
settings.json 中的 custom-ui-style.stylesheet）这是 Islands Dark 与普通主题最大的不同。它利用了 VSCode 的 custom-ui-style 实验性功能，向 Monaco Editor 的 DOM 注入 CSS，精细控制 VSCode 界面各部件（sidebar、tabs、status bar、notification、terminal 等）的圆角、阴影、背景透明度。
两层结合：Color Theme 管「编辑器内」，CSS 注入管「编辑器外壳」，共同构建出完整的设计语言。
这两款字体均为开源免费，跨平台支持良好，与 Islands Dark 的暖色调主题搭配相得益彰。
custom-ui-style 是 VSCode 的实验性功能，API 可能在未来 VSCode 版本中发生变化或被移除。一旦 VSCode 更新破坏 CSS 选择器，浮动面板效果可能「碎裂」。作者通过 flake.nix 提供 Nix 包管理器的可重现构建，但 Nix 用户群体较小，大多数用户依赖手动安装。
要求 VSCode >= 1.60，低于此版本的 VSCode 用户无法使用完整功能（主要是 custom-ui-style 的圆角和阴影效果）。
玻璃效果和阴影动画需要消耗少量 GPU 资源。在旧款 Intel 集成显卡的机器上，滚动和动画可能不如普通主题流畅。
图标辉光效果需要额外安装 Seti Folder 图标主题才能完整呈现，对新用户有一定隐性门槛。
| 用户类型 | 推荐指数 | 原因 |
|---|---|---|
| macOS 用户 | ⭐⭐⭐⭐⭐ | 玻璃效果与 macOS 系统设计语言高度契合 |
| 大屏开发者 | ⭐⭐⭐⭐⭐ | 24px 大圆角在大屏幕上更显精致 |
| 暗色主题爱好者 | ⭐⭐⭐⭐ | 暖色调暗色主题的独特选择 |
| 设计师 / 设计师转行开发者 | ⭐⭐⭐⭐⭐ | 设计感最强的主题之一 |
| Windows / Linux 用户 | ⭐⭐⭐ | 玻璃效果仍能呈现，但与系统风格有一定割裂感 |
| 低配机器用户 | ⭐⭐ | 动画效果可能造成轻微卡顿 |
Islands Dark 不仅仅是一个「颜色好看」的 VSCode 主题——它代表了一种设计理念：代码编辑器应该像现代操作系统的窗口一样，有层次感、空间感和光影感。通过 Color Theme + CSS 注入的双轨架构，它在 VSCode 的能力边界内做到了最大化的视觉表达。
如果你厌倦了千篇一律的暗色主题，Islands Dark 值得一试。
图2：面板浮动效果与圆角设计细节
图3：FiraCode 连字 + 暖色高亮的终端效果
图4：完整界面展示——Activity Bar、编辑器、终端、状态栏统一设计语言