SVG主题预览器

一个VS Code插件，用于预览带有主题变量的SVG文件，支持浅色和深色主题模式双主题对比预览。

功能特性

• 🎨 支持将SVG中的主题变量（如{{textText1}}）替换为实际颜色值
• 🌓 双主题对比预览，同时显示浅色和深色主题效果
• ⚡ 实时预览，无需保存文件
• 🔧 从插件目录读取主题配置，支持自定义颜色映射
• 📁 右键菜单和编辑器标题栏快速访问

安装方法

1. 下载插件代码到本地
2. 在插件根目录创建 light.json 和 dark.json 配置文件
3. 在项目根目录运行：

   npm install
   npm run compile
   

4. 在VS Code中按F5启动扩展开发主机来测试插件

使用方法

基本使用

1. 打开包含主题变量的SVG文件（如包含{{textText1}}、{{background1}}等变量）
2. 右键点击文件，选择"预览带主题变量的SVG"
3. 或者在编辑器中打开SVG文件后，点击标题栏的预览按钮
4. 查看并排显示的浅色和深色主题效果

配置主题映射

在插件根目录下创建两个JSON配置文件：

light.json (浅色主题配置):

{
  "#1C2526": "{{textText1}}",
  "#2A3334": "{{textText2}}", 
  "#A4A8A8": "{{textText3}}",
  "#FFFFFF": "{{background1}}",
  "#F5F5F5": "{{background2}}",
  "#007ACC": "{{primaryColor}}",
  "#E1E4E8": "{{borderColor}}"
}

dark.json (深色主题配置):

{
  "#E5E5E5": "{{textText1}}",
  "#CCCCCC": "{{textText2}}",
  "#A4A8A8": "{{textText3}}", 
  "#1E1E1E": "{{background1}}",
  "#2D2D30": "{{background2}}",
  "#4FC3F7": "{{primaryColor}}",
  "#404040": "{{borderColor}}"
}

配置文件格式说明

• 键: 实际的颜色值（如 #1C2526）
• 值: 对应的主题变量（如 {{textText1}}）
• 插件会自动反转键值对，将变量替换为颜色值

支持的变量格式

插件支持双花括号格式的变量，例如：

• {{textText1}} - 主要文本颜色
• {{textText2}} - 次要文本颜色
• {{textText3}} - 辅助文本颜色
• {{background1}} - 主背景色
• {{background2}} - 次背景色
• {{primaryColor}} - 主色调
• {{borderColor}} - 边框颜色
• 等等...

示例SVG

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" fill="{{background1}}" stroke="{{textText1}}" stroke-width="2"/>
  <circle cx="50" cy="50" r="20" fill="{{textText3}}"/>
  <text x="50" y="80" text-anchor="middle" fill="{{textText1}}">Hello</text>
</svg>

开发

项目结构

svg-theme-previewer/
├── package.json          # 插件清单
├── light.json           # 浅色主题配置
├── dark.json            # 深色主题配置
├── src/
│   └── extension.ts     # 主要插件逻辑
├── tsconfig.json        # TypeScript配置
└── README.md           # 文档

构建命令

• npm install: 安装依赖
• npm run compile: 编译TypeScript
• npm run watch: 监听模式编译

测试插件

1. 在VS Code中打开插件项目
2. 按 F5 启动扩展开发主机
3. 在新窗口中打开包含SVG文件的项目
4. 右键点击SVG文件测试预览功能

工作原理

1. 读取配置: 从插件目录的 light.json 和 dark.json 读取主题配置
2. 键值反转: 将配置中的 "颜色值": "变量名" 转换为 "变量名": "颜色值"
3. 变量替换: 在SVG内容中查找并替换所有主题变量
4. 双主题预览: 生成浅色和深色两个版本的SVG并并排显示

许可证

MIT License

反馈

如有问题或建议，欢迎提交Issue。