bwya77/vscode-dark-islands
GitHub: bwya77/vscode-dark-islands
受 easemate IDE 和 JetBrains Islands 启发的 VSCode 深色主题，通过 CSS 注入实现浮动玻璃面板、圆角和平滑动画效果。
Stars: 8378 | Forks: 262
# Islands Dark
受 easemate IDE 启发，为 Visual Studio Code 打造的深色主题。具有浮动玻璃质感面板、圆角、平滑动画以及精雕细琢的 UI。
- [easemate](https://x.com/easemate)
- [easemate Nav](https://x.com/Jakubantalik/status/1952672176450215944)
- [easemate effects](https://x.com/aaroniker/status/1989727838992539655)
## 功能
- 以深邃的黑色画布 (`#131217`) 作为浮动面板的背景
- 玻璃效果边框，带有方向性光照模拟（顶部/左侧更亮，底部/右侧微妙过渡）
- 所有面板、通知、命令面板和侧边栏均采用圆角设计
- 胶囊形活动栏，带有玻璃质感的选中指示器
- 面包屑栏和状态栏在未悬停时会变暗
- 标签页的关闭按钮在悬停时淡入
- 侧边栏选中项、滚动条和状态栏具有平滑的过渡效果
- 胶囊形滚动条滑块
- 颜色匹配的图标发光效果（与 [Seti Folder](https://marketplace.visualstudio.com/items?itemName=l-igh-t.vscode-theme-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
### 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, ... }: {
# Then you can add and use it:
# islands-dark.packages.${pkgs.stdenv.hostPlatform.system}.vscode
# islands-dark.packages.${pkgs.stdenv.hostPlatform.system}.vscodium
};
}
```
### 手动安装
如果您倾向于手动安装，请按照以下步骤操作：
#### 第 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** 扩展提供支持。
1. 在 VS Code 中打开**扩展**：(`Cmd+Shift+X` / `Ctrl+Shift+X`)
2. 搜索 **Custom UI Style**（作者为 `subframe7536`）
3. 点击 **Install**
#### 第 3 步：安装推荐的图标主题
为了获得与颜色匹配的图标发光效果的最佳体验，请安装 **Seti Folder** 图标主题：
1. 在 VS Code 中打开**扩展** (`Cmd+Shift+X` / `Ctrl+Shift+X`)
2. 搜索 **[Seti Folder](https://marketplace.visualstudio.com/items?itemName=l-igh-t.vscode-theme-seti-folder)** (作者为 `l-igh-t`)
3. 点击 **Install**
4. 将其设置为您的图标主题：**命令面板** > **Preferences: File Icon Theme** > **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. 搜索 **Preferences: Open User Settings (JSON)**
3. 将此仓库的 `settings.json` 内容合并到您的设置文件中
#### 第 7 步：启用 Custom UI Style
1. 打开**命令面板** (`Cmd+Shift+P` / `Ctrl+Shift+P`)
2. 运行 **Custom UI Style: Enable**
3. VS Code 将重新加载
## CSS 自定义的作用
| **元素** | **效果** |
|-------------|------------|
| **画布** | 所有面板后面的深色背景 (`--islands-bg-canvas`) |
| **侧边栏** | 带圆角 (`--islands-panel-radius`)、玻璃边框和阴影的浮动效果 |
| **编辑器** | 带圆角 (`--islands-panel-radius`)、玻璃边框和浏览器标签页效果的浮动效果 |
| **活动栏** | 带有玻璃内阴影和圆形选中指示器的胶囊形状 |
| **命令中心** | 带有玻璃效果的胶囊形状 |
| **底部面板** | 带圆角 (`--islands-panel-radius`) 和玻璃边框的浮动效果 |
| **右侧边栏** | 带圆角 (`--islands-panel-radius`) 和玻璃边框的浮动效果 |
| **通知** | 圆角 (`--islands-widget-radius`)、玻璃边框、深度阴影 |
| **命令面板** | 圆角 (`--islands-widget-radius`)、玻璃边框、圆角列表行 |
| **滚动条** | 带有淡入淡出过渡效果的胶囊形滑块 |
| **标签页** | 浏览器标签页样式（活动标签页底部打开），关闭按钮在悬停时淡入 |
| **面包屑** | 悬停前隐藏，带有平滑的淡入淡出过渡效果 |
| **状态栏** | 文本默认变暗，悬停时变亮 |
| **文件图标** | 通过 drop-shadow 实现的颜色匹配发光效果（与 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` | 搜索栏、SCM 提交输入框、按钮、悬停提示框 |
| `--islands-item-radius` | `6px` | 列表行、标签页、窗格标题、终端标签页 |
例如，要使所有元素看起来更锐利，可将所有值设置为 `8px`。要获得完全圆角的外观，请尝试 `32px` / `20px` / `16px` / `8px`。胶囊形元素（活动栏、滚动条滑块、命令中心、徽章）不受这些变量影响。
### 面板间距
| **变量** | **默认值** | **应用于** |
|--------------|-------------|----------------|
| `--islands-panel-gap` | `8px` | 侧边栏、编辑器、聊天/辅助栏、终端和通知之间的水平间距 |
| `--islands-panel-top` | `8px` | 面板的上边距（标题栏下方的空间） |
增加到 `12px` 或 `16px` 可获得更宽松的布局，或减少至 `4px` 获得更紧凑的外观。
## 故障排除
### 更改未生效
尝试禁用并重新启用 Custom UI Style：
1. **命令面板** > **Custom UI Style: Disable**
2. 重新加载 VS Code
3. **命令面板** > **Custom UI Style: Enable**
4. 重新加载 VS Code
### “损坏的安装”警告
启用 Custom UI Style 后出现此情况属于预期行为。忽略它或选择 **不再显示**即可。
### 以前使用过 "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**。
## 卸载
运行卸载脚本以将您的 VS Code 恢复到之前的状态：
**macOS/Linux：**
```
# 如果你仍然克隆了该 repo：
cd islands-dark
./uninstall.sh
# 或者直接下载并运行：
curl -fsSL https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.sh | bash
```
**Windows (PowerShell)：**
```
# 如果你仍然克隆了该 repo：
cd islands-dark
.\uninstall.ps1
# 或者直接下载并运行：
irm https://raw.githubusercontent.com/bwya77/vscode-dark-islands/main/uninstall.ps1 | iex
```
卸载脚本将：
- 从 `settings.json.pre-islands-dark` 备份中恢复您之前的设置
- 移除 Islands Dark 主题扩展
- 从 VS Code 中注销该扩展
运行脚本后，您需要：
1. 打开**命令面板** (`Cmd+Shift+P` / `Ctrl+Shift+P`) 并运行 **Custom UI Style: Disable**
2. 打开**命令面板**并搜索 **Preferences: Color Theme** 以选择新主题
3. 重新加载 VS Code
## 致谢
灵感来源于 [JetBrains Islands Dark](https://www.jetbrains.com/) UI 主题。
## 许可证
MIT
标签：AI合规, CSS自定义, Cutter, easemate, IslandsDark, Jetbrains, Libemu, UI美化, VSCode主题, 代码编辑器, 前端设计, 威胁情报, 开发者工具, 暗黑主题, 毛玻璃效果, 用户界面, 编程字体, 视觉体验