尧图网页设计 
开发工具【免费下载链接】vscode-dark-islandsVSCode theme based off the easemate IDE and Jetbrains islands theme项目地址https://gitcode.com/GitHub_Trending/vs/vscode-dark-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 的完整形态由两部分组成理解这一点是后续所有操作的前提颜色主题Color Theme主题文件 themes/islands-dark.json 定义了 300 项 Workbench 颜色、全套 tokenColors 语法高亮与 semanticTokenColors 语义高亮。它在 package.json 中通过contributes.themes声明uiTheme为vs-dark安装后出现在「Preferences: Color Theme」列表中。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/Linuxcurl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.sh | bashVS Code · WindowsPowerShellirm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.ps1 | iexVSCodium · macOS/Linuxcurl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.sh | bash -s -- --vscodiumVSCodium · WindowsPowerShell$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/Linuxgit clone https://github.com/bwya77/vscode-dark-islands.git islands-dark cd islands-dark ./install.shVS Code · WindowsPowerShellgit clone https://github.com/bwya77/vscode-dark-islands.git islands-dark cd islands-dark .\install.ps1VSCodium · macOS/Linuxgit clone https://github.com/bwya77/vscode-dark-islands.git islands-dark cd islands-dark ./install.sh --vscodiumVSCodium · WindowsPowerShellgit 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/FontsLinux 拷入~/.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 注入按CmdShiftPmacOS或CtrlShiftPWindows/Linux输入Custom UI Style: Reload并回车编辑器会再次重载并应用完整主题这一步只需执行一次或编辑器升级后重做。注意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。CursorVS Code forkIslands 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.shinstall-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 在标题栏左上角渲染了一个切换主侧边栏按钮会与侧边栏圆角重叠CmdB仍可正常切换侧边栏注意Custom UI Style 在 Cursor 上并非官方支持但从0.5.6起可稳定工作。每次 Cursor 更新后需重新从命令面板执行Custom UI Style: Reload以重新注入 CSS。首次重载后出现的 corrupt installation 警告属预期行为可选择Dont Show Again忽略。卸载./uninstall-cursor.sh。AntigravityVS 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.shinstall-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。WindowsPowerShellgit 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 -RecurseStep 2安装 Custom UI Style 扩展。浮动面板、圆角、玻璃边框与动画都由它驱动打开扩展面板CmdShiftX/CtrlShiftX搜索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 注入所致点击警告上的齿轮图标选择Dont Show Again即可。CSS 定制化原理每块面板如何变成玻璃岛屿主题所有浮动玻璃效果都来自 settings.json 中custom-ui-style.stylesheet这一大段 CSS。它对不同 UI 区域的作用一览元素效果画布Canvas所有面板背后的深色背景--islands-bg-canvas侧边栏浮动 圆角--islands-panel-radius、玻璃边框、投影编辑器浮动 圆角--islands-panel-radius、玻璃边框、浏览器式标签活动栏胶囊形 玻璃内阴影、圆形选中指示器命令中心胶囊形 玻璃效果底部面板浮动 圆角--islands-panel-radius、玻璃边框右侧边栏auxiliarybar浮动 圆角--islands-panel-radius、玻璃边框通知圆角--islands-widget-radius、玻璃边框、深投影命令面板圆角--islands-widget-radius、玻璃边框、圆角列表行滚动条胶囊形滑块 淡入淡出过渡标签页浏览器式激活标签底部开口、关闭按钮悬停淡入面包屑悬停前隐藏平滑淡入状态栏文本默认变暗悬停时点亮文件图标通过 drop-shadow 实现颜色匹配辉光配合 Seti Folder 最佳玻璃边框的方向光秘密源码中对.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它通过 CSSproperty --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变量默认值作用对象--islands-bg-canvas#121216所有面板背后的深色底层workbench、标题栏、状态栏、活动栏--islands-bg-surface#181a1d面板/表面背景聊天输入框、编辑器组件这两个颜色定义了主题的纵深canvas 是面板之间露出的更暗基底层surface 是交互元素使用的略亮色。要覆盖主题的面板颜色侧边栏、编辑器、终端背景请在设置中用 VS Code 的workbench.colorCustomizations。圆角Border Radius变量默认值作用对象--islands-panel-radius24px侧边栏、编辑器、终端/底部面板、auxiliary 栏--islands-widget-radius14px通知、聊天输入、命令面板--islands-input-radius12px搜索栏、SCM 提交输入、按钮、悬停提示--islands-item-radius6px列表行、标签页、面板标题、终端标签例如想要更硬朗的直角风全部设为8px想要极致圆润试试32px / 20px / 16px / 8px。胶囊形元素活动栏、滚动条滑块、命令中心、角标不受这些变量影响。面板间距Panel Spacing变量默认值作用对象--islands-panel-gap8px侧边栏、编辑器、聊天/auxiliary 栏、终端、通知之间的水平间距--islands-panel-top8px面板顶部边距标题栏下方的空间调到12px或16px获得更松弛的布局降到4px则更紧凑。颜色主题深读语法高亮与语义高亮的暖调体系主题文件 themes/islands-dark.json 定义了完整的高亮调色板核心色板包括角色色值前景文字foreground#bcbec4字符串#6aab73关键字 / HTML 标签 / Markdown 标题#cf8e6d暖橙函数#56a8f5类型 / 类 / 属性#c77dbb紫数字 / 正则 / 类型参数#2aacb8青注释#7a7e85斜体装饰器 / 注解#bbb529链接 / 按钮 / 选中高亮#548af7蓝新增diff#73b00a删除diff#f75464修改diff#548af7值得注意的实现细节语义高亮全面启用文件末尾声明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命令面板 Custom UI Style: Disable重载编辑器命令面板 Custom UI Style: Enable重载编辑器Corrupt installation 警告启用 Custom UI Style 后出现属预期行为直接忽略或选择Dont Show Again。与旧 Custom CSS and JS Loader 扩展冲突如果此前用过Custom CSS and JS Loaderbe5invis.vscode-custom-css它可能已把 CSS 直接注入workbench.html即使禁用后仍会残留。样式冲突时重新安装编辑器以获得干净的workbench.html之后只使用Custom UI Style一种注入方案。卸载一键还原初始状态macOS/LinuxVS Code# 仓库仍保留时 cd islands-dark ./uninstall.sh # 或直接下载运行 curl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.sh | bashWindowsPowerShellcd islands-dark .\uninstall.ps1 # 或直接下载运行 irm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.ps1 | iexVSCodium macOS/Linux./uninstall.sh --vscodium或curl ... | bash -s -- --vscodiumVSCodium Windows.\uninstall.ps1 -Editor vscodium或设置$env:ISLANDS_DARK_EDITOR vscodium后执行irm ... | iexCursor./uninstall-cursor.shAntigravity./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/ 目录还提供了各平台安装/卸载脚本的回归测试脚本可供二次开发时验证自己的改动。赞分享开发工具【免费下载链接】vscode-dark-islandsVSCode theme based off the easemate IDE and Jetbrains islands theme项目地址https://gitcode.com/GitHub_Trending/vs/vscode-dark-islands点击查看免费下载相关推荐Zola 主题 Prism 安装与全量配置指南玻璃拟态设计博客的搭建实践Zola 主题 Prism 安装与全量配置指南玻璃拟态设计博客的搭建实践 本指南以 Zola 官方仓库 docs/content/themes/prism/i静态站点CLI开发工具uni-app x 玻璃效果组件 glass-effect-view 实战指南iOS 液态玻璃与毛玻璃降级方案uni app x 玻璃效果组件 glass effect view 实战指南iOS 液态玻璃与毛玻璃降级方案 本文档对应仓库中的 docs/componen示例工程前端移动开发跨平台玻璃拟态视觉风格全解在 ppt-master 中用半透明玻璃面板、渐变光感与漂浮深度构建现代 SaaS 演示玻璃拟态视觉风格全解在 ppt master 中用半透明玻璃面板、渐变光感与漂浮深度构建现代 SaaS 演示 本文以 skills/ppt master/reAI 技能人工智能AI 应用上一篇LeetCode 226 翻转二叉树Invert Binary Tree三种解法全解析BFS、递归 DFS 与迭代 DFS下一篇Agent OS 与 AgentMesh 统一治理架构从单机内核到分布式 Agent 生态的端到端治理实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Islands Dark 主题实战指南：在 VS Code 生态中复刻 JetBrains Islands 的浮动玻璃面板与完整安装配置方案
开发工具【免费下载链接】vscode-dark-islandsVSCode theme based off the easemate IDE and Jetbrains islands theme项目地址https://gitcode.com/GitHub_Trending/vs/vscode-dark-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 的完整形态由两部分组成理解这一点是后续所有操作的前提颜色主题Color Theme主题文件 themes/islands-dark.json 定义了 300 项 Workbench 颜色、全套 tokenColors 语法高亮与 semanticTokenColors 语义高亮。它在 package.json 中通过contributes.themes声明uiTheme为vs-dark安装后出现在「Preferences: Color Theme」列表中。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/Linuxcurl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.sh | bashVS Code · WindowsPowerShellirm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.ps1 | iexVSCodium · macOS/Linuxcurl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/bootstrap.sh | bash -s -- --vscodiumVSCodium · WindowsPowerShell$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/Linuxgit clone https://github.com/bwya77/vscode-dark-islands.git islands-dark cd islands-dark ./install.shVS Code · WindowsPowerShellgit clone https://github.com/bwya77/vscode-dark-islands.git islands-dark cd islands-dark .\install.ps1VSCodium · macOS/Linuxgit clone https://github.com/bwya77/vscode-dark-islands.git islands-dark cd islands-dark ./install.sh --vscodiumVSCodium · WindowsPowerShellgit 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/FontsLinux 拷入~/.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 注入按CmdShiftPmacOS或CtrlShiftPWindows/Linux输入Custom UI Style: Reload并回车编辑器会再次重载并应用完整主题这一步只需执行一次或编辑器升级后重做。注意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。CursorVS Code forkIslands 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.shinstall-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 在标题栏左上角渲染了一个切换主侧边栏按钮会与侧边栏圆角重叠CmdB仍可正常切换侧边栏注意Custom UI Style 在 Cursor 上并非官方支持但从0.5.6起可稳定工作。每次 Cursor 更新后需重新从命令面板执行Custom UI Style: Reload以重新注入 CSS。首次重载后出现的 corrupt installation 警告属预期行为可选择Dont Show Again忽略。卸载./uninstall-cursor.sh。AntigravityVS 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.shinstall-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。WindowsPowerShellgit 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 -RecurseStep 2安装 Custom UI Style 扩展。浮动面板、圆角、玻璃边框与动画都由它驱动打开扩展面板CmdShiftX/CtrlShiftX搜索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 注入所致点击警告上的齿轮图标选择Dont Show Again即可。CSS 定制化原理每块面板如何变成玻璃岛屿主题所有浮动玻璃效果都来自 settings.json 中custom-ui-style.stylesheet这一大段 CSS。它对不同 UI 区域的作用一览元素效果画布Canvas所有面板背后的深色背景--islands-bg-canvas侧边栏浮动 圆角--islands-panel-radius、玻璃边框、投影编辑器浮动 圆角--islands-panel-radius、玻璃边框、浏览器式标签活动栏胶囊形 玻璃内阴影、圆形选中指示器命令中心胶囊形 玻璃效果底部面板浮动 圆角--islands-panel-radius、玻璃边框右侧边栏auxiliarybar浮动 圆角--islands-panel-radius、玻璃边框通知圆角--islands-widget-radius、玻璃边框、深投影命令面板圆角--islands-widget-radius、玻璃边框、圆角列表行滚动条胶囊形滑块 淡入淡出过渡标签页浏览器式激活标签底部开口、关闭按钮悬停淡入面包屑悬停前隐藏平滑淡入状态栏文本默认变暗悬停时点亮文件图标通过 drop-shadow 实现颜色匹配辉光配合 Seti Folder 最佳玻璃边框的方向光秘密源码中对.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它通过 CSSproperty --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变量默认值作用对象--islands-bg-canvas#121216所有面板背后的深色底层workbench、标题栏、状态栏、活动栏--islands-bg-surface#181a1d面板/表面背景聊天输入框、编辑器组件这两个颜色定义了主题的纵深canvas 是面板之间露出的更暗基底层surface 是交互元素使用的略亮色。要覆盖主题的面板颜色侧边栏、编辑器、终端背景请在设置中用 VS Code 的workbench.colorCustomizations。圆角Border Radius变量默认值作用对象--islands-panel-radius24px侧边栏、编辑器、终端/底部面板、auxiliary 栏--islands-widget-radius14px通知、聊天输入、命令面板--islands-input-radius12px搜索栏、SCM 提交输入、按钮、悬停提示--islands-item-radius6px列表行、标签页、面板标题、终端标签例如想要更硬朗的直角风全部设为8px想要极致圆润试试32px / 20px / 16px / 8px。胶囊形元素活动栏、滚动条滑块、命令中心、角标不受这些变量影响。面板间距Panel Spacing变量默认值作用对象--islands-panel-gap8px侧边栏、编辑器、聊天/auxiliary 栏、终端、通知之间的水平间距--islands-panel-top8px面板顶部边距标题栏下方的空间调到12px或16px获得更松弛的布局降到4px则更紧凑。颜色主题深读语法高亮与语义高亮的暖调体系主题文件 themes/islands-dark.json 定义了完整的高亮调色板核心色板包括角色色值前景文字foreground#bcbec4字符串#6aab73关键字 / HTML 标签 / Markdown 标题#cf8e6d暖橙函数#56a8f5类型 / 类 / 属性#c77dbb紫数字 / 正则 / 类型参数#2aacb8青注释#7a7e85斜体装饰器 / 注解#bbb529链接 / 按钮 / 选中高亮#548af7蓝新增diff#73b00a删除diff#f75464修改diff#548af7值得注意的实现细节语义高亮全面启用文件末尾声明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命令面板 Custom UI Style: Disable重载编辑器命令面板 Custom UI Style: Enable重载编辑器Corrupt installation 警告启用 Custom UI Style 后出现属预期行为直接忽略或选择Dont Show Again。与旧 Custom CSS and JS Loader 扩展冲突如果此前用过Custom CSS and JS Loaderbe5invis.vscode-custom-css它可能已把 CSS 直接注入workbench.html即使禁用后仍会残留。样式冲突时重新安装编辑器以获得干净的workbench.html之后只使用Custom UI Style一种注入方案。卸载一键还原初始状态macOS/LinuxVS Code# 仓库仍保留时 cd islands-dark ./uninstall.sh # 或直接下载运行 curl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.sh | bashWindowsPowerShellcd islands-dark .\uninstall.ps1 # 或直接下载运行 irm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.ps1 | iexVSCodium macOS/Linux./uninstall.sh --vscodium或curl ... | bash -s -- --vscodiumVSCodium Windows.\uninstall.ps1 -Editor vscodium或设置$env:ISLANDS_DARK_EDITOR vscodium后执行irm ... | iexCursor./uninstall-cursor.shAntigravity./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/ 目录还提供了各平台安装/卸载脚本的回归测试脚本可供二次开发时验证自己的改动。赞分享开发工具【免费下载链接】vscode-dark-islandsVSCode theme based off the easemate IDE and Jetbrains islands theme项目地址https://gitcode.com/GitHub_Trending/vs/vscode-dark-islands点击查看免费下载相关推荐Zola 主题 Prism 安装与全量配置指南玻璃拟态设计博客的搭建实践Zola 主题 Prism 安装与全量配置指南玻璃拟态设计博客的搭建实践 本指南以 Zola 官方仓库 docs/content/themes/prism/i静态站点CLI开发工具uni-app x 玻璃效果组件 glass-effect-view 实战指南iOS 液态玻璃与毛玻璃降级方案uni app x 玻璃效果组件 glass effect view 实战指南iOS 液态玻璃与毛玻璃降级方案 本文档对应仓库中的 docs/componen示例工程前端移动开发跨平台玻璃拟态视觉风格全解在 ppt-master 中用半透明玻璃面板、渐变光感与漂浮深度构建现代 SaaS 演示玻璃拟态视觉风格全解在 ppt master 中用半透明玻璃面板、渐变光感与漂浮深度构建现代 SaaS 演示 本文以 skills/ppt master/reAI 技能人工智能AI 应用上一篇LeetCode 226 翻转二叉树Invert Binary Tree三种解法全解析BFS、递归 DFS 与迭代 DFS下一篇Agent OS 与 AgentMesh 统一治理架构从单机内核到分布式 Agent 生态的端到端治理实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考