iTerm2 主题生成器

一个可视化的 iTerm2 颜色主题创建和定制工具，基于 React + Next.js + Tailwind CSS 构建。

🎨 功能特性

• 🎯 可视化配置界面 - 直观的颜色选择器，实时预览效果
• 🌟 精美预设主题库 - 11个精心设计的主题，涵盖经典到2024流行美学
• ⚡ 实时预览功能 - 终端窗口实时展示主题效果，所见即所得
• 📦 一键导出功能 - 生成标准 .itermcolors 文件，直接导入使用
• 💾 配置保存系统 - JSON 格式保存配置，便于分享和二次编辑
• 📱 响应式设计 - 完美适配各种屏幕尺寸，手机也能用
• 🎨 美学设计理念 - 融合 Color Hunt 配色美学和程序员审美
• 🌈 情感化色彩 - 每个主题都有独特的情感表达和使用场景

🚀 快速开始

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:3000 开始使用。

构建生产版本

npm run build
npm start

📋 颜色配置详解

ANSI 颜色 (0-15)

• Ansi 0-7: 基础 8 色（黑、红、绿、黄、蓝、洋红、青、白）
• Ansi 8-15: 对应的明亮版本

特殊颜色

• Background Color: 终端背景色
• Foreground Color: 默认文字颜色
• Bold Color: 粗体文字颜色
• Cursor Color: 光标颜色
• Cursor Text Color: 光标处文字颜色
• Selection Color: 选中文本的背景色
• Selected Text Color: 选中文本的颜色
• Link Color: 链接文本颜色
• Badge Color: 标签/徽章颜色

🎯 如何使用生成的主题

1. 在主题生成器中配置你喜欢的颜色
2. 点击"下载主题"按钮，保存 .itermcolors 文件
3. 打开 iTerm2 → Preferences → Profiles → Colors
4. 点击右下角 "Color Presets" → "Import"
5. 选择刚下载的主题文件导入
6. 在 "Color Presets" 中选择导入的主题

📁 项目结构

iterm-theme/
├── app/
│   ├── globals.css          # 全局样式
│   ├── layout.tsx           # 根布局
│   └── page.tsx            # 主页面
├── components/
│   ├── ColorPicker.tsx     # 颜色选择器组件
│   ├── ExportButton.tsx    # 导出功能组件
│   ├── PresetSelector.tsx  # 预设主题选择器
│   └── ThemePreview.tsx    # 主题预览组件
├── examples/
│   └── OneDark.itermcolors # 示例主题文件
├── package.json
├── tailwind.config.js
└── README.md

🌈 内置预设主题

经典主题

• One Dark - 流行的暗色主题
• Dracula - 经典的紫色调主题
• Nord - 极简北欧风格

2024 美学主题 ✨

• 🌌 星空漫游 - 深邃太空背景配上绚烂星云色彩，科幻宇宙风
• 🍃 抹茶森林 - 温暖森林绿调配樱花粉点缀，自然清新风
• 🌃 赛博朋克 - 高对比霓虹色彩，未来感数字世界美学
• 🌊 深海探索 - 深邃海洋蓝配珊瑚色点缀，神秘深海风
• 🌸 樱花夜想 - 柔和粉色调配夜色背景，浪漫日式美学
• 🔥 烈焰余晖 - 炽热橙红色调，夕阳西下的温暖力量感
• 🌙 暮色黄昏 - 温柔紫色暮光配金黄余晖，暮光温柔风
• ❄️ 极地极光 - 清冷极地蓝配绚烂极光绿，北极壮美风

🕐 使用场景推荐

• 清晨编程: ❄️ 极地极光、🍃 抹茶森林 - 清新自然，提神醒脑
• 午后工作: 🌊 深海探索、🔥 烈焰余晖 - 专注稳定，活力充沛
• 黄昏时光: 🌙 暮色黄昏、🌸 樱花夜想 - 温柔浪漫，缓解疲劳
• 深夜编程: 🌌 星空漫游、🌃 赛博朋克 - 科幻酷炫，激发灵感

🔧 技术栈

• React 18 - 现代化的前端框架
• Next.js 14 - 全栈 React 框架
• TypeScript - 类型安全的 JavaScript
• Tailwind CSS - 实用优先的 CSS 框架
• Radix UI - 高质量的无头组件库

📝 开发说明

添加新的预设主题

编辑 components/PresetSelector.tsx 文件中的 presets 对象：

const presets: Record<string, ColorConfig> = {
  'My Theme': {
    ansi0: '#000000',
    ansi1: '#ff0000',
    // ... 其他颜色配置
    background: '#1a1a1a',
    foreground: '#ffffff',
    // ... 特殊颜色配置
  }
}

自定义颜色格式

项目使用标准的十六进制颜色格式 (#RRGGBB)，在导出时自动转换为 iTerm2 所需的 0-1 浮点数格式。

🤝 贡献指南

欢迎提交 Pull Request 和 Issue！

1. Fork 本项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢

• iTerm2 - 优秀的终端模拟器
• mbadolato/iTerm2-Color-Schemes - 丰富的主题资源
• 所有为开源社区贡献的开发者们