VSCode Dark Preview

一个 VSCode 插件，允许你在编辑器中预览网站，并可选择应用暗黑模式滤镜。

功能

• 在 VSCode 内部预览任何网站
• 可切换的暗黑模式滤镜（使用 CSS filter 技术）
• 简单易用的界面

使用方法

1. 打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P）
2. 输入 "Preview Website with Dark Mode" 并执行命令
3. 在打开的面板中输入要预览的网址
4. 可选择是否启用暗黑模式滤镜
5. 点击 "Preview Website" 按钮开始预览

在预览过程中，你可以随时切换暗黑模式或返回设置页面。

暗黑模式技术原理

此插件使用 CSS 的 invert() 和 hue-rotate() 滤镜组合来实现暗黑模式效果：

• invert(1) 反转所有颜色
• hue-rotate(180deg) 调整色相以获得更自然的暗黑效果

这种方法可以为大多数网站提供合理的暗黑模式显示效果，而无需修改原始网站的 CSS。

开发

1. 克隆此仓库
2. 运行 npm install 安装依赖
3. 在 VSCode 中按 F5 开始调试插件

注意事项

• 某些网站可能因为 Content Security Policy (CSP) 限制而无法在 iframe 中显示
• 暗黑模式滤镜可能不会对所有网站都产生理想的效果
• 插件目前不支持预览本地 HTML 文件