CYBERPUNK-STYLE-DIY
CYBERPUNK-STYLE-DIY
★ 162
赛博朋克主题插件自定义性能模式
为ComfyUI提供赛博朋克风主题与强大自定义选项，支持多档性能模式与轻量化资源管理，提升界面美感与兼容性。
💡 为ComfyUI添加赛博朋克主题并在性能模式间快速切换。
🍴 7 Forks💻 HTML🔄 2025-08-11
📦
网盘下载
复制链接后前往夸克网盘下载
https://pan.quark.cn/s/9671236b7e59
📄 README
🌈 ComfyUI 赛博朋克主题插件|Cyberpunk Theme Plugin
*一个全面的 ComfyUI 主题插件，提供炫酷的赛博朋克美学和强大的自定义功能*
*A comprehensive ComfyUI theme plugin with stunning cyberpunk aesthetics and powerful customization features*
📺 教学视频 | Tutorial Video
🎬 [首个]自定义主题管理器Comfyui主题完全DIY-CYBERPUNK-STYLE-DIY-上线啦！
📺 观看教学视频 | Watch Tutorial Video
💡 强烈推荐观看教学视频！
视频详细演示了插件的所有功能和使用技巧，帮助您快速上手。
💡 Highly recommended to watch the tutorial video!
The video demonstrates all plugin features and usage tips to help you get started quickly.
🛡️ 重要说明 | Important Notice
🚀 零破坏安装 | Zero-Impact Installation
✅ 本插件不会破坏任何环境！无需安装任何requirements.txt！
✅ This plugin will NOT break any environment! No requirements.txt installation needed!
🔒 完全安全 | Completely Safe
🚨 未知问题 | Unknown Issues 🆕
作为新插件，可能遇到未预期的问题，可以随时禁用插件
As a new plugin, unexpected issues may occur. You can disable the plugin at any time
✨ 主要功能 | Key Features
🌍 多语言支持 | Multi-language Support 🆕
🎨 多种主题选择 | Multiple Theme Options
⚡ 动态视觉效果 | Dynamic Visual Effects
🔗 动态连线效果 | Dynamic Link Effects
支持8种不同的动画模式：
Supports 8 different animation modes:
⚙️ 可调节参数 | Adjustable Parameters
🔌 电路板连线 | Circuit Board Lines
🔌 端口快速连接 | Port Quick Connect 🆕
🔌 快速连线 | Quick Connect 🆕
🔌 高亮选择连线 | Highlight Select Connection 🆕
🎯 节点快速导航 | Node Quick Navigation 🆕
🚨 错误节点快速定位 | Error Node Quick Location 🆕
💻 透明笔记标注 | Transparent note annotation 🆕
💻 通用自定义滑条 | Universal custom slider 🆕
🖼️ 节点标题图像 | Node Title Images 🆕
✍️ 自定义文字动画 | Custom Text Animation 🆕
🖼️ 高级背景管理 | Advanced Background Management
📁 自定义背景图片 | Custom Background Images
🎨 三种填充模式 | Three Fill Modes
🎛️ 精密位置控制 | Precision Position Control
🔒 固定背景模式 | Fixed Background Mode
🔤 字体管理 | Font Management
⚡ 性能优化 | Performance Optimization
🎯 性能模式 | Performance Modes
🪶 轻量模式 | Light Mode
⚙️ 配置管理 | Configuration Management
🎨 自定义主题编辑器 | Custom Theme Editor
📦 安装方法 | Installation
📸 关于图片文件 | About Image Files
🚀 轻量化仓库 | Lightweight Repository
为了减少仓库大小和提高克隆速度，我们将文档图片存储在独立的图片仓库中。
To reduce repository size and improve clone speed, we store documentation images in a separate image repository.
✅ 完美体验 | Perfect Experience:
– 🚀 快速克隆：仅下载代码文件（<5MB）| Fast clone: Only downloads code files (<5MB)
– 📖 完整文档：GitHub 页面图片正常显示 | Complete docs: Images display properly on GitHub pages
– 🔧 无依赖：插件功能完全独立 | No dependencies: Plugin functionality completely independent
– 💾 无限制：图片大小不受限制 | No limits: Image sizes unrestricted
方法一：Git克隆 | Method 1: Git Clone
“`bash
进入ComfyUI自定义节点目录
Navigate to ComfyUI custom nodes directory
cd ComfyUI/custom_nodes/
克隆仓库
Clone repository
git clone https://github.com/11dogzi/CYBERPUNK-STYLE-DIY.git
重启ComfyUI
Restart ComfyUI
### 方法二：手动下载 | Method 2: Manual Download
1. 下载插件压缩包 | Download the plugin archive
2. 解压到 `ComfyUI/custom_nodes/` 目录 | Extract to `ComfyUI/custom_nodes/` directory
3. 重启ComfyUI | Restart ComfyUI
### 安装完成确认 | Installation Verification
安装成功后，您应该能在ComfyUI界面中看到 **"🎨 主题设置"** 按钮。
After successful installation, you should see the **"🎨 Theme Settings"** button in the ComfyUI interface.
---
## 🚀 使用指南 | Usage Guide
### 📱 **访问设置面板 | Accessing Settings Panel**
点击界面中的 **"🎨 主题设置"** 按钮打开设置面板，面板包含多个标签页：
Click the **"🎨 Theme Settings"** button in the interface to open the settings panel with multiple tabs:
- **⚙️ 设置 | Settings**: 基本主题和语言设置 | Basic theme and language settings
- **🔗 线条 | Effects**: 动态连线和动画效果 | Dynamic links and animation effects
- **🎨 风格 | Style**: 自定义主题编辑器 | Custom theme editor
- **🖼️ 背景 | Background**: 背景图片管理 | Background image management
- **🔤 字体 | Font**: 字体选择和上传 | Font selection and upload
### 🎨 **主题选择和切换 | Theme Selection and Switching**
1. **选择预设主题 | Select Preset Theme**:
- 在设置标签页的主题下拉菜单中选择 | Select from theme dropdown in settings tab
- 更改立即生效，支持实时预览 | Changes apply instantly with real-time preview
2. **创建自定义主题 | Create Custom Theme**:
- 点击 **"🎨 自定义主题编辑器"** | Click **"🎨 Custom Theme Editor"**
- 调整各种颜色参数 | Adjust various color parameters
- 实时预览效果 | Real-time preview effects
### 🔗 **动态连线设置 | Dynamic Link Settings**
1. **启用动态效果 | Enable Dynamic Effects**:
- 切换到 **"🔗 线条"** 标签页 | Switch to **"🔗 Effects"** tab
- 开启 **"动态连线效果"** | Enable **"Dynamic Link Effects"**
2. **选择动画模式 | Select Animation Mode**:
- 从8种动画模式中选择（建议从简单粒子开始）| Choose from 8 animation modes (recommended to start with Simple Particle)
- **自定义文字模式**：选择后会出现文本输入框 | **Custom Text Mode**: Input box appears when selected
3. **调节动画参数 | Adjust Animation Parameters**:
- **速度 | Speed**: 控制动画播放速度 | Control animation playback speed
- **大小 | Size**: 调整粒子或文字大小 | Adjust particle or text size
- **数量 | Count**: 同时显示的动画元素数量 | Number of simultaneous animation elements
- **发光 | Glow**: 发光效果强度 | Glow effect intensity
4. **自定义文字动画 | Custom Text Animation** 🆕:
- 选择 **"✍️ 自定义文字"** 动画模式 | Select **"✍️ Custom Text"** animation mode
- 在出现的输入框中输入您想要的文字 | Enter your desired text in the input box that appears
- 文字将立即在连线上显示动画效果 | Text will immediately show animation effects on connections
- 支持emoji和特殊字符：🚀✨🎯💡 | Supports emojis and special characters: 🚀✨🎯💡
### 🎯 **节点快速导航使用 | Node Quick Navigation Usage**
#### **快速跳转到连接节点 | Quick Jump to Connected Node**
1. **右键点击端口 | Right-click on Port**:
```
右键点击任意端口 → 选择"🎯 转到连接点" → 自动跳转到连接的节点
Right-click on any port → Select "🎯 Go To Connection" → Auto jump to connected node
```
2. **查看跳转效果 | View Jump Effect**:
- 画布会平滑移动到目标节点位置 | Canvas will smoothly move to target node position
- 目标节点会出现脉冲高亮效果 | Target node will show pulsing highlight effect
- 支持输入端口和输出端口的双向跳转 | Support bidirectional jumping for input and output ports
### 🚨 **错误节点快速定位使用 | Error Node Quick Location Usage**
#### **快速定位错误节点 | Quick Locate Error Node**
1. **执行工作流出现错误时 | When Workflow Execution Has Errors**:
```
右键点击画布空白区域 → 选择"🚨 跳转到报错节点" → 自动定位到错误节点
Right-click on canvas blank area → Select "🚨 Jump to Error Node" → Auto locate to error node
```
2. **多个错误节点处理 | Multiple Error Nodes Handling**:
- 连续点击可循环查看所有错误节点 | Continuous clicking cycles through all error nodes
- 控制台会显示当前错误节点信息 | Console displays current error node information
- 错误节点会有红色脉冲高亮效果 | Error nodes will have red pulsing highlight effects
3. **错误信息查看 | Error Information Viewing**:
- 打开浏览器开发者工具控制台 | Open browser developer tools console
- 查看详细的错误信息和堆栈跟踪 | View detailed error information and stack traces
- 错误信息包含节点ID、类型和具体错误原因 | Error information includes node ID, type and specific error cause
### 🖼️ **背景图片设置 | Background Image Settings**
#### **上传和应用背景 | Upload and Apply Background**
1. **选择图片 | Select Image**:
```
📁 选择背景图片 → 浏览文件 → 确认上传
📁 Select Background Image → Browse Files → Confirm Upload
```
2. **选择填充模式 | Choose Fill Mode**:
- **🔄 拉伸铺满 | Stretch Fill**: 适合纯色或简单图案 | Suitable for solid colors or simple patterns
- **🎯 保持比例平铺 | Aspect Ratio Tile**: 适合无缝平铺图案 | Suitable for seamless tiling patterns
- **📍 自定义位置 | Custom Position**: 需要精确控制的复杂背景 | Complex backgrounds requiring precise control
#### **自定义位置模式使用 | Custom Position Mode Usage**
1. **设置缩放 | Set Scale**:
```
🔍 缩放比例滑条 → 调整到合适大小 → 位置自动居中
🔍 Scale Slider → Adjust to appropriate size → Position auto-centers
```
2. **微调位置 | Fine-tune Position**:
```
📍 X坐标: 1(左) ←→ 100(右)
📍 Y坐标: 1(下) ←→ 100(上)
📍 X-axis: 1(left) ←→ 100(right)
📍 Y-axis: 1(bottom) ←→ 100(top)
```
3. **高级技巧 | Advanced Tips**:
- 可以设置坐标超出1-100范围，将图片移到屏幕外 | Can set coordinates beyond 1-100 range to move image off-screen
- 先调整缩放获得理想大小，再微调位置 | First adjust scale for ideal size, then fine-tune position
- 使用固定背景模式保持背景稳定 | Use fixed background mode to keep background stable
### 🔤 **字体管理 | Font Management**
1. **选择系统字体 | Select System Font**:
- 插件会自动检测可用字体 | Plugin automatically detects available fonts
- 使用搜索框快速查找 | Use search box for quick finding
2. **上传自定义字体 | Upload Custom Font**:
- 支持TTF、OTF格式 | Supports TTF, OTF formats
- 上传后立即可用 | Available immediately after upload
3. **字体应用范围 | Font Application Scope**:
- 同时应用到ComfyUI界面和节点文本 | Applied to both ComfyUI interface and node text
- 支持中文、英文、特殊字符 | Supports Chinese, English, special characters
### ⚙️ **配置管理 | Configuration Management**
#### **导出配置 | Export Configuration**📤 导出配置按钮 → 下载JSON文件 → 保存备份
📤 Export Config Button → Download JSON File → Save Backup
#### **导入配置 | Import Configuration** 📥 导入配置按钮 → 选择JSON文件 → 应用设置
📥 Import Config Button → Select JSON File → Apply Settings
#### **重置配置 | Reset Configuration**🔄 重置配置 → 确认操作 → 恢复默认 + 清除缓存 + 刷新页面
🔄 Reset Config → Confirm Action → Restore Defaults + Clear Cache + Refresh Page