feat: add Vercel and Codex themes

lib/themes/others/codex.ts

@@ -0,0 +1,163 @@
+import type { Theme } from '@/lib/types'
+
+export const codex: Theme = {
+  id: 'codex',
+  name: 'Codex',
+  description: 'A focused engineering theme inspired by the official Codex terminal interface',
+  lightPreviewUrl: '/codex.png',
+  darkPreviewUrl: '/codex.png',
+  colors: ['black', 'turquoise', 'violet'],
+  css: `/*
+========================
+Codex
+========================
+A terminal-native workspace with cyan controls, magenta identity accents,
+and user-message surfaces blended from the active background.
+*/
+
+:root {
+  --codex-cyan: #00d7d7;
+  --codex-magenta: #d75fd7;
+  --codex-green: #5fd75f;
+  --codex-red: #ff5f5f;
+  --codex-radius: 10px;
+  --codex-transition: 150ms ease-out;
+  --color-primary: #00afaf;
+  --color-primary-soft: rgba(0, 175, 175, 0.2);
+  --color-primary-mute: rgba(0, 175, 175, 0.1);
+}
+
+body[theme-mode="dark"] {
+  --codex-accent: #00d7d7;
+  --codex-brand: #d75fd7;
+  --color-primary: #00d7d7;
+  --color-primary-soft: rgba(0, 215, 215, 0.2);
+  --color-primary-mute: rgba(0, 215, 215, 0.1);
+  --color-background: #0d1117;
+  --color-background-soft: #161b22;
+  --color-background-mute: #21262d;
+  --navbar-background: #0d1117;
+  --navbar-background-mac: rgba(13, 17, 23, 0.9);
+  --chat-background: #0d1117;
+  --chat-background-user: #2a2e34;
+  --chat-background-assistant: #0d1117;
+  --color-text: #e6edf3;
+  --color-text-1: #e6edf3;
+  --color-text-2: #9da7b3;
+  --color-text-3: #6e7681;
+  --chat-text-user: #f0f3f6;
+  --color-border: #30363d;
+  --color-border-soft: #21262d;
+  --color-hover: #1b222b;
+  --color-active: #252d37;
+  --color-code-background: #161b22;
+  --color-list-item: #161b22;
+  --color-list-item-hover: #21262d;
+}
+
+body[theme-mode="light"] {
+  --codex-accent: #005f87;
+  --codex-brand: #875f87;
+  --color-primary: #005f87;
+  --color-primary-soft: rgba(0, 95, 135, 0.16);
+  --color-primary-mute: rgba(0, 95, 135, 0.08);
+  --color-background: #f7f7f5;
+  --color-background-soft: #ffffff;
+  --color-background-mute: #e8e8e5;
+  --navbar-background: #f7f7f5;
+  --navbar-background-mac: rgba(247, 247, 245, 0.9);
+  --chat-background: #f7f7f5;
+  --chat-background-user: #ededeb;
+  --chat-background-assistant: #f7f7f5;
+  --color-text: #1f2328;
+  --color-text-1: #1f2328;
+  --color-text-2: #59636e;
+  --color-text-3: #7d8590;
+  --chat-text-user: #1f2328;
+  --color-border: #d0d7de;
+  --color-border-soft: #e1e5e9;
+  --color-hover: #eceeec;
+  --color-active: #e1e5e9;
+  --color-code-background: #ffffff;
+  --color-list-item: #ffffff;
+  --color-list-item-hover: #eceeec;
+}
+
+body,
+button,
+input,
+textarea {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+code,
+pre,
+kbd {
+  font-family: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
+}
+
+body[theme-mode] #content-container {
+  background: var(--chat-background) !important;
+}
+
+body[theme-mode] #inputbar {
+  background: var(--color-background-soft) !important;
+  border: 1px solid var(--color-border) !important;
+  border-radius: var(--codex-radius) !important;
+  box-shadow: none !important;
+  transition: border-color var(--codex-transition), box-shadow var(--codex-transition) !important;
+}
+
+body[theme-mode] #inputbar:focus-within {
+  border-color: var(--codex-accent) !important;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--codex-accent) 18%, transparent) !important;
+}
+
+body[theme-mode] .message-user .message-content-container,
+body[theme-mode] .chat-item.user .message-content-container {
+  background: var(--chat-background-user) !important;
+  border: 1px solid var(--color-border-soft) !important;
+  border-radius: var(--codex-radius) !important;
+}
+
+body[theme-mode] .message-assistant .message-content-container,
+body[theme-mode] .chat-item.assistant .message-content-container {
+  background: transparent !important;
+  border-left: 2px solid var(--codex-brand) !important;
+  border-radius: 2px !important;
+}
+
+body[theme-mode] .message-content-container {
+  transition: border-color var(--codex-transition), background-color var(--codex-transition);
+}
+
+body[theme-mode] .message-content-container:hover {
+  border-color: var(--codex-accent) !important;
+}
+
+body[theme-mode] .ant-collapse,
+body[theme-mode] .ant-collapse-content,
+body[theme-mode] pre {
+  background: var(--color-code-background) !important;
+  border-color: var(--color-border) !important;
+  border-radius: 6px !important;
+}
+
+body[theme-mode] a {
+  color: var(--codex-accent) !important;
+  text-underline-offset: 3px;
+}
+
+body[theme-mode] button {
+  transition: background-color var(--codex-transition), color var(--codex-transition), transform var(--codex-transition) !important;
+}
+
+body[theme-mode] button:active {
+  transform: translateY(1px);
+}
+
+body[theme-mode] ::selection {
+  background: color-mix(in srgb, var(--codex-accent) 28%, transparent);
+}
+`,
+}

lib/themes/others/index.ts

@@ -1,6 +1,7 @@
 const STYLE = 'others'
 
 import { claude } from './claude'
+import { codex } from './codex'
 import { dopamine } from './dopamine'
 import { dracula } from './dracula'
 import { gladiia } from './gladiia'
@@ -11,11 +12,13 @@ import { naiCha } from './naiCha'
 import { peppa } from './peppa'
 import { pulseInteractive } from './pulse-interactive'
 import { starryNight } from './starryNight'
+import { vercel } from './vercel'
 import { vitesseSoft } from './vitesseSoft'
 
 // 为所有其他风格主题设置style属性
 const othersThemes = [
   claude,
+  codex,
   dopamine,
   dracula,
   gladiia,
@@ -25,7 +28,8 @@ const othersThemes = [
   vitesseSoft,
   muShanZi,
   pulseInteractive,
-  peppa
+  peppa,
+  vercel,
 ]
 
 // 为每个主题添加style属性
@@ -36,6 +40,7 @@ export const themes = othersThemes.map((theme) => ({
 
 // 单独导出每个带有style属性的主题
 export const claudeWithStyle = { ...claude, style: STYLE }
+export const codexWithStyle = { ...codex, style: STYLE }
 export const dopamineWithStyle = { ...dopamine, style: STYLE }
 export const draculaWithStyle = { ...dracula, style: STYLE }
 export const gladiiaWithStyle = { ...gladiia, style: STYLE }
@@ -46,4 +51,5 @@ export const mintyLavenderWithStyle = { ...mint, style: STYLE }
 export const vitesseSoftWithStyle = { ...vitesseSoft, style: STYLE }
 export const pulseInteractiveWithStyle = { ...pulseInteractive, style: STYLE }
 export const muShanZitWithStyle = { ...muShanZi, style: STYLE }
-export const peppaWithStype = { ...peppa, style: STYLE}
+export const peppaWithStype = { ...peppa, style: STYLE }
+export const vercelWithStyle = { ...vercel, style: STYLE }

lib/themes/others/vercel.ts

@@ -0,0 +1,141 @@
+import type { Theme } from '@/lib/types'
+
+export const vercel: Theme = {
+  id: 'vercel',
+  name: 'Vercel',
+  description: 'A precise monochrome theme inspired by the Vercel Geist design system',
+  lightPreviewUrl: '/vercel.png',
+  darkPreviewUrl: '/vercel.png',
+  colors: ['black', 'white', 'gray'],
+  css: `/*
+========================
+Vercel
+========================
+Monochrome surfaces, crisp hierarchy, and restrained blue interaction states.
+Palette derived from the Vercel Geist design tokens published on GitHub.
+*/
+
+:root {
+  --vercel-blue: #0070f3;
+  --vercel-blue-hover: #0060d1;
+  --vercel-radius: 8px;
+  --vercel-transition: 160ms ease;
+  --color-primary: #0070f3;
+  --color-primary-soft: rgba(0, 112, 243, 0.18);
+  --color-primary-mute: rgba(0, 112, 243, 0.1);
+}
+
+body[theme-mode="dark"] {
+  --color-background: #000000;
+  --color-background-soft: #1a1a1a;
+  --color-background-mute: #262626;
+  --navbar-background: #000000;
+  --navbar-background-mac: rgba(0, 0, 0, 0.88);
+  --chat-background: #000000;
+  --chat-background-user: #1f1f1f;
+  --chat-background-assistant: #0a0a0a;
+  --color-text: #ededed;
+  --color-text-1: #ededed;
+  --color-text-2: #a1a1a1;
+  --color-text-3: #888888;
+  --chat-text-user: #ededed;
+  --color-border: #333333;
+  --color-border-soft: #262626;
+  --color-hover: #1a1a1a;
+  --color-active: #262626;
+  --color-code-background: #111111;
+  --color-list-item: #111111;
+  --color-list-item-hover: #1a1a1a;
+}
+
+body[theme-mode="light"] {
+  --color-background: #ffffff;
+  --color-background-soft: #fafafa;
+  --color-background-mute: #f2f2f2;
+  --navbar-background: #ffffff;
+  --navbar-background-mac: rgba(255, 255, 255, 0.88);
+  --chat-background: #ffffff;
+  --chat-background-user: #f2f2f2;
+  --chat-background-assistant: #fafafa;
+  --color-text: #171717;
+  --color-text-1: #171717;
+  --color-text-2: #666666;
+  --color-text-3: #8f8f8f;
+  --chat-text-user: #171717;
+  --color-border: #e6e6e6;
+  --color-border-soft: #ebebeb;
+  --color-hover: #f2f2f2;
+  --color-active: #ebebeb;
+  --color-code-background: #fafafa;
+  --color-list-item: #fafafa;
+  --color-list-item-hover: #f2f2f2;
+}
+
+body,
+button,
+input,
+textarea {
+  font-family: "Geist Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+code,
+pre,
+kbd {
+  font-family: "Geist Mono", "SFMono-Regular", Consolas, monospace;
+}
+
+body[theme-mode] #content-container {
+  background: var(--chat-background) !important;
+}
+
+body[theme-mode] #inputbar {
+  background: var(--color-background-soft) !important;
+  border: 1px solid var(--color-border) !important;
+  border-radius: var(--vercel-radius) !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
+  transition: border-color var(--vercel-transition), box-shadow var(--vercel-transition) !important;
+}
+
+body[theme-mode] #inputbar:focus-within {
+  border-color: var(--vercel-blue) !important;
+  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.14) !important;
+}
+
+body[theme-mode] .message-content-container {
+  border: 1px solid var(--color-border-soft);
+  border-radius: var(--vercel-radius) !important;
+  box-shadow: none !important;
+  transition: border-color var(--vercel-transition), background-color var(--vercel-transition);
+}
+
+body[theme-mode] .message-content-container:hover {
+  border-color: var(--color-border);
+}
+
+body[theme-mode] .ant-collapse,
+body[theme-mode] .ant-collapse-content,
+body[theme-mode] pre {
+  background: var(--color-code-background) !important;
+  border-color: var(--color-border) !important;
+  border-radius: var(--vercel-radius) !important;
+}
+
+body[theme-mode] a {
+  color: var(--vercel-blue) !important;
+  text-decoration-color: rgba(0, 112, 243, 0.35);
+  text-underline-offset: 3px;
+}
+
+body[theme-mode] button {
+  transition: background-color var(--vercel-transition), border-color var(--vercel-transition), transform var(--vercel-transition) !important;
+}
+
+body[theme-mode] button:active {
+  transform: scale(0.98);
+}
+
+body[theme-mode] ::selection {
+  background: rgba(0, 112, 243, 0.28);
+}
+`,
+}

messages/ar-SA.json

@@ -209,6 +209,14 @@
     "peppa": {
       "name": "بيبا بيج",
       "description": "نظام ألوان كرتون بيبا بيج"
+    },
+    "vercel": {
+      "name": "Vercel",
+      "description": "سمة أحادية اللون دقيقة مستوحاة من نظام تصميم Vercel Geist، بتسلسل بصري واضح وتفاعلات زرقاء هادئة"
+    },
+    "codex": {
+      "name": "Codex",
+      "description": "سمة هندسية مركزة مستوحاة من واجهة Codex الطرفية الرسمية، بعناصر تحكم سماوية ولمسات أرجوانية"
     }
   }
 }

messages/en-US.json

@@ -209,6 +209,14 @@
     "peppa": {
       "name": "Peppa Pig",
       "description": "Peppa Pig cartoon color scheme"
+    },
+    "vercel": {
+      "name": "Vercel",
+      "description": "A precise monochrome theme inspired by the Vercel Geist design system, with crisp hierarchy and restrained blue interactions"
+    },
+    "codex": {
+      "name": "Codex",
+      "description": "A focused engineering theme inspired by the official Codex terminal interface, with cyan controls and magenta identity accents"
     }
   }
 }

messages/ja-JP.json

@@ -209,6 +209,14 @@
     "peppa": {
       "name": "ペッパピッグ",
       "description": "「ペッパピッグ」のカートゥーン配色"
+    },
+    "vercel": {
+      "name": "Vercel",
+      "description": "Vercel Geist デザインシステムに着想を得た、明快な階層と控えめな青の操作色を備えた精密なモノクロテーマ"
+    },
+    "codex": {
+      "name": "Codex",
+      "description": "Codex 公式ターミナル UI に着想を得た、シアンの操作色とマゼンタのアクセントを備えた開発者向けテーマ"
     }
   }
 }