SVG主题预览器
一个VS Code插件，用于预览带有主题变量的SVG文件，支持浅色和深色主题模式双主题对比预览，并能自动将硬编码颜色转换为主题变量。
功能特性
- 🎨 支持将SVG中的主题变量（如
{{iconBlack}}）替换为实际颜色值
- 🌓 双主题对比预览，同时显示浅色和深色主题效果
- ⚡ 实时预览，无需保存文件
- 🔄 智能颜色转换，将硬编码颜色值自动替换为主题变量
- 🎯 动态变量切换，实时预览不同颜色搭配效果
- 💾 一键应用变更，直接保存到SVG文件
- 🔧 从插件目录读取主题配置，支持自定义颜色映射
- 📁 右键菜单和编辑器标题栏快速访问
安装方法
- 下载插件代码到本地
- 在插件根目录创建
light.json、dark.json 和 color_mapping.json 配置文件
- 在项目根目录运行：
npm install
npm run compile
- 在VS Code中按
F5启动扩展开发主机来测试插件
使用方法
主题预览功能
- 打开包含主题变量的SVG文件（如包含
{{iconBlack}}、{{textText1}}等变量）
- 右键点击文件，选择"预览带主题变量的SVG"
- 或者在编辑器中打开SVG文件后，点击标题栏的预览按钮（👁️）
- 查看并排显示的浅色和深色主题效果
- 在主题映射控制区域可以实时切换不同的颜色变量
- 修改变量后点击"确定应用变更"按钮保存到SVG文件
SVG颜色转换功能
- 打开包含硬编码颜色的SVG文件（如包含
"white"、"#1c2526"等颜色值）
- 右键点击文件，选择"SVG颜色转换"
- 或者在编辑器中打开SVG文件后，点击标题栏的转换按钮（⟷）
- 插件会自动将硬编码颜色替换为相应的主题变量
- 转换完成后会显示替换的颜色值数量
配置主题映射
在插件根目录下创建三个JSON配置文件：
light.json (浅色主题配置):
{
"iconBlack": "#1c2526",
"iconWhite": "#ffffff",
"textText1": "#1c2526",
"textText2": "#606667",
"textText3": "#a4a8a8",
"bgCard": "#ffffff",
"bgInput": "#f7f7f7",
"bgLine": "#f3f4f4"
}
dark.json (深色主题配置):
{
"iconBlack": "#ffffff",
"iconWhite": "#1c2526",
"textText1": "#ffffff",
"textText2": "#bbbebe",
"textText3": "#777c7d",
"bgCard": "#1c2526",
"bgInput": "#2a3233",
"bgLine": "#2a3233"
}
color_mapping.json (颜色转换映射):
{
"white": "iconWhite",
"#1c2526": "iconBlack",
"#ffffff": "iconWhite",
"#babdbd": "iconGrey",
"#1cc1f7": "iconBlue",
"#f9584a": "iconRed",
"#f7f7f7": "bgInput",
"#f3f4f4": "bgLine"
}
配置文件格式说明
主题配置文件 (light.json / dark.json):
- 键: 变量名（如
iconBlack）
- 值: 对应的颜色值（如
#1c2526）
颜色映射文件 (color_mapping.json):
- 键: 硬编码颜色值（如
#1c2526 或 white）
- 值: 要转换为的变量名（如
iconBlack）
支持的变量格式
插件支持双花括号格式的变量，例如：
{{iconBlack}} - 黑色图标{{iconWhite}} - 白色图标{{iconGrey}} - 灰色图标{{textText1}} - 主要文本颜色{{textText2}} - 次要文本颜色{{textText3}} - 辅助文本颜色{{bgCard}} - 卡片背景色{{bgInput}} - 输入框背景色- 等等...
示例工作流程
1. 原始SVG（硬编码颜色）
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M23 12.9289L15.9289 20L23 27.071"
stroke="white"
stroke-width="1.5"/>
</svg>
2. 使用"SVG颜色转换"后
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M23 12.9289L15.9289 20L23 27.071"
stroke="{{iconWhite}}"
stroke-width="1.5"/>
</svg>
3. 使用"预览带主题变量的SVG"
- 浅色主题：
{{iconWhite}} 显示为 #ffffff（白色）
- 深色主题：
{{iconWhite}} 显示为 #1c2526（深色）
- 可以实时切换到其他变量如
{{iconBlack}}、{{textText1}} 等
开发
项目结构
svg-theme-previewer/
├── package.json # 插件清单
├── light.json # 浅色主题配置
├── dark.json # 深色主题配置
├── color_mapping.json # 颜色转换映射
├── src/
│ └── extension.ts # 主要插件逻辑
├── tsconfig.json # TypeScript配置
└── README.md # 文档
构建命令
npm install: 安装依赖npm run compile: 编译TypeScriptnpm run watch: 监听模式编译
测试插件
- 在VS Code中打开插件项目
- 按
F5 启动扩展开发主机
- 在新窗口中打开包含SVG文件的项目
- 右键点击SVG文件测试预览和转换功能
工作原理
主题预览原理
- 读取配置: 从插件目录的
light.json 和 dark.json 读取主题配置
- 变量替换: 在SVG内容中查找并替换所有主题变量
- 智能过滤: 只显示SVG中实际使用的变量，并按颜色值分组可选项
- 实时预览: 动态更新浅色和深色两个版本的SVG显示
- 变更保存: 支持将修改后的变量直接保存到原SVG文件
颜色转换原理
- 读取映射: 从
color_mapping.json 读取颜色到变量的映射关系
- 智能匹配: 使用正则表达式匹配各种格式的颜色值（带引号、不带引号、大小写不敏感）
- 优先级排序: 按颜色值长度排序，避免部分匹配问题
- 精确替换: 将匹配的颜色值替换为对应的主题变量格式
命令列表
预览带主题变量的SVG - 打开主题预览面板SVG颜色转换 - 自动转换硬编码颜色为主题变量
许可证
MIT License
反馈
如有问题或建议，欢迎提交Issue。
