bwya77 vscode-dark-islands

Islands Dark

一款受 easemate IDE 启发的 Visual Studio Code 深色主题。具有浮动玻璃面板、圆角、流畅动画以及深度优化的 UI 界面。

特性

深色画布（#131217）搭配浮动面板
玻璃效果边框，带定向光照模拟（顶部/左侧较亮，底部/右侧较暗）
所有面板、通知、命令面板和侧边栏均采用圆角设计
药丸形状的活动栏，带玻璃质感选中指示器
面包屑导航栏和状态栏在未悬停时变暗
标签页关闭按钮在悬停时淡入显示
侧边栏选中项、滚动条和状态栏的平滑过渡动画
药丸形状的滚动条滑块
与图标颜色匹配的发光效果（与 Seti Folder 图标主题配合最佳）
暖色语法高亮，支持多种语言（JS/TS、Python、Go、Rust、HTML/CSS、JSON、YAML、Markdown）
编辑器使用 IBM Plex Mono 字体，终端使用 FiraCode Nerd Font Mono 字体

安装

本主题包含两部分：颜色主题和用于创建浮动玻璃面板外观的 CSS 自定义样式。

一键安装（推荐）

最快安装方式：

macOS/Linux

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

Windows

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

手动克隆安装

如果你更倾向于先克隆仓库：

macOS/Linux

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

Windows

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

脚本将自动执行以下操作： ✅ 安装 Islands Dark 主题扩展 ✅ 安装 Custom UI Style 扩展 ✅ 安装 Bear Sans UI 字体 ✅ 备份现有设置并应用 Islands Dark 设置 ✅ 启用 Custom UI Style 并重新加载 VS Code

注意：IBM Plex Mono 和 FiraCode Nerd Font Mono 需要单独安装（脚本会提示你）。

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 输入中：

{
  inputs.islands-dark.url = "github:bwya77/vscode-dark-islands";
  outputs = { self, nixpkgs, islands-dark, ... }: {
    # 然后可以添加并使用：
    # 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。

手动安装

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

步骤 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/

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

步骤 2：安装 Custom UI Style 扩展 浮动面板、圆角、玻璃边框和动画效果由 Custom UI Style 扩展提供支持。

在 VS Code 中打开扩展面板（Cmd+Shift+X / Ctrl+Shift+X），搜索 Custom UI Style（作者：subframe7536），点击安装。

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

在 VS Code 中打开扩展面板（Cmd+Shift+X / Ctrl+Shift+X），搜索 Seti Folder（作者：l-igh-t），点击安装。

将其设置为图标主题：命令面板 > 首选项：文件图标主题 > Seti Folder。

步骤 5：安装字体 本主题使用两种字体：

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

安装 Bear Sans UI：打开本仓库中的 fonts/ 文件夹，选中所有 .otf 文件，双击在字体册（macOS）中打开，或右键单击 > 安装（Windows）。

如果你更喜欢其他字体，请在设置中更新 editor.fontFamily、terminal.integrated.fontFamily 和 font-family 的值。

步骤 6：应用设置 将本仓库中 settings.json 的内容复制到你的 VS Code 设置中：

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

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

步骤 7：启用 Custom UI Style 打开命令面板（Cmd+Shift+P / Ctrl+Shift+P），运行 Custom UI Style: Enable，VS Code 将重新加载。

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

CSS 自定义效果说明

| 元素 | 效果 | |------|------| | 画布 | 所有面板背后的深色背景（--islands-bg-canvas） | | 侧边栏 | 浮动效果，带圆角（--islands-panel-radius）、玻璃边框和投影 | | 编辑器 | 浮动效果，带圆角（--islands-panel-radius）、玻璃边框和浏览器标签页效果 | | 活动栏 | 药丸形状，带玻璃质感内阴影和圆形选中指示器 |