Wei Glass Theme

玻璃拟态 · 中式古典 — 半透明磨砂面板 + 胭脂/玉/金/紫配色

一款 Glassmorphism（玻璃拟态） 风格的 VS Code 双色主题。背景采用半透明磨砂质感，让代码仿佛悬浮于毛玻璃之上。配色灵感源自中国传统色彩：胭脂红、青玉、琉璃蓝、紫磨金、琥珀黄。

自带配套壁纸 background.webp，配合玻璃面板营造完整沉浸感。

🎨 调色板

Wei Glass (深色)

Wei Glass Light (浅色)

终端 ANSI (深色)

🖼️ 预览

主题自带玻璃拟态壁纸，渲染效果：

┌────────────────────────────────────────────┐
│  ﹒  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  │
│      ▓▓▓▓▓  sidebar        ▓▓▓▓▓▓▓▓▓▓     │
│      ▓ code  ▓              ▓  editor  ▓    │
│      ▓ ▓     ▓  ▓▓▓▓▓▓▓    ▓          ▓    │
│      ▓ ▓     ▓  ▓ output ▓  ▓          ▓    │
│      ▓▓▓▓▓▓▓▓▓  ▓▓▓▓▓▓▓▓▓  ▓▓▓▓▓▓▓▓▓▓     │
│  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·  ·     │
└────────────────────────────────────────────┘
        玻璃磨砂背景 + 半透明面板

📦 项目结构

wei-theme/
├── package.json            # 扩展元信息（含 5 个命令注册）
├── extension.js            # 扩展入口（切换命令 + 首次安装推荐配置）
├── LICENSE                 # GPL-3.0 开源协议
├── README.md               # ← 本文件
├── icon.png                # 扩展图标
├── background.webp         # 玻璃拟态壁纸（建议设为桌面背景）
├── defaultSettings.jsonc   # VS Code 默认配置快照（仅参考对照）
├── wei-glass-mpe.css       # MPE 预览自定义 CSS（深色/浅色双模式）
└── themes/
    ├── wei-glass-dark.json     # 深色主题定义
    └── wei-glass-light.json    # 浅色主题定义

🚀 安装

本地开发安装（推荐）

1. 在 VS Code 中打开本项目根目录（VScodeThemes/）
2. 按 F5 启动 Extension Development Host 窗口
3. 在新窗口中按 Ctrl+K Ctrl+T → 选择 Wei Glass 或 Wei Glass Light

手动安装

将 wei-theme 文件夹复制到 VS Code 扩展目录：

然后重载 VS Code（Ctrl+R / Cmd+R）。

打包 VSIX

npm install -g @vscode/vsce
cd wei-theme
vsce package
code --install-extension wei-glass-theme-1.4.0.vsix

💡 扩展功能详解

本主题附带一个 VS Code 扩展入口（extension.js），激活后提供以下功能。

命令面板

安装后可在 Ctrl+Shift+P 中搜索以下命令：

💡 一键切换可以自定义快捷键：Ctrl+K Ctrl+S → 搜索 weiGlass.toggleTheme → 绑定你喜欢的键（如 Ctrl+Shift+T）。

首次安装自动引导

通过 VS Code Marketplace 安装此扩展后，首次重启 VS Code 会自动弹出引导弹窗：

┌─────────────────────────────────────────────────┐
│  ✨ Wei Glass 已激活！是否应用推荐设置？         │
│  （主题、字体、行高、光标等）                    │
│                                                 │
│     [应用推荐设置]   [查看壁纸]   [切换主题]     │
└─────────────────────────────────────────────────┘

点击 「应用推荐设置」 即可一键写入以下 27 项配置：

弹窗只出现一次（选择后自动静音）。之后想重新触发有两种方式：

方式一：命令面板手动触发

Ctrl+Shift+P → 输入 Wei Glass: 推荐设置引导 → 回车，弹窗再次出现。

方式二：修改配置后重启

在 settings.json 中添加：

"weiGlass.showWallpaperTip": true

保存后 Ctrl+R 重载 VS Code，启动时自动弹出。

首次引导防重复机制

┌─────────────────────────────┐
│  扩展激活                    │
│  ↓                           │
│  读取 weiGlass.showWallpaperTip    │
│  ↓                           │
│  true? ──→ 弹出引导弹窗          │
│  │          ↓                 │
│  │     设为 false (永不再弹)     │
│  │          ↓                 │
│  │     用户点击「应用推荐设置」    │
│  │     → applyRecommendedSettings() │
│  │          ↓                 │
│  │     27 项写入全局配置        │
│  │          ↓                 │
│  │     ✅ 显示成功消息          │
│  │          ↓                 │
│  │     提示重载窗口后生效       │
│  │                            │
│  false → 跳过，不再打扰        │
└─────────────────────────────┘

即使跳过首次引导，也随时可以通过 weiGlass.applySetupGuide 命令重新打开同一弹窗。

🎨 自定义

编辑 themes/wei-glass-dark.json 或 themes/wei-glass-light.json 中的任意色值，保存后重载窗口即刻预览。

参考：

• VS Code Theme Color Reference — UI 元素色键
• VS Code TextMate Scopes — 语法高亮作用域

📝 Markdown Preview Enhanced 完全兼容

Wei Glass 的半透明玻璃背景在 MPE 预览中可能导致渲染异常。解决方案如下：

方案一：使用内置预览（推荐）

VS Code 自带的 Markdown 预览已完美支持 Wei Glass（已内置 textLink、textBlockQuote、textCodeBlock 等预览色键），直接点击编辑器右上角的预览图标即可。

方案二：MPE 加载自定义 CSS

如果使用 Markdown Preview Enhanced 扩展：

1. 在 VS Code 设置中添加：

"markdown-preview-enhanced.customCss": [
  "E:\\home\\VScodeThemes\\wei-theme\\wei-glass-mpe.css"
]

2. 或者创建 .vscode/settings.json（项目级），填入：

{
  "markdown-preview-enhanced.customCss": [
    "${workspaceRoot}/wei-theme/wei-glass-mpe.css"
  ]
}

3. 重载 MPE 预览窗口（Ctrl+Shift+V 打开即可自动生效）。

CSS 文件位于 wei-theme/wei-glass-mpe.css，包含深色/浅色双模式适配。

💡 该 CSS 使用 Wei Glass 完整配色（胭脂红、青玉、琉璃蓝、紫磨金、琥珀黄），但采用实色背景以避免透明穿透。编辑器内的玻璃效果不受影响。

📄 许可

个人作品，自由使用与修改。