Merge pull request #6 from TibetOS/claude/theme-engine

refactor: centralize device-skin colors into a theme engine

Author: TibetOS

src/components/ChatBubble.tsx

@@ -1,25 +1,22 @@
 import type { Message } from "../types"
+import type { ChatTheme } from "../theme"
 import { CheckMark } from "./CheckMark"
 
 type ChatBubbleProps = {
   message: Message
-  darkMode: boolean
+  theme: ChatTheme
   showTail: boolean
 }
 
-export function ChatBubble({ message, darkMode, showTail }: ChatBubbleProps) {
+export function ChatBubble({ message, theme, showTail }: ChatBubbleProps) {
   const isSent = message.sender === "me"
 
   const bgColor = isSent
-    ? darkMode
-      ? "#005c4b"
-      : "#d9fdd3"
-    : darkMode
-      ? "#202c33"
-      : "#ffffff"
+    ? theme.bubble.sentBackground
+    : theme.bubble.receivedBackground
 
-  const textColor = darkMode ? "#e9edef" : "#111b21"
-  const timestampColor = darkMode ? "#8696a0" : "#667781"
+  const textColor = theme.bubble.text
+  const timestampColor = theme.bubble.timestamp
 
   return (
     <div
@@ -74,7 +71,7 @@ export function ChatBubble({ message, darkMode, showTail }: ChatBubbleProps) {
             {message.timestamp}
           </span>
           {isSent && (
-            <CheckMark status={message.status} darkMode={darkMode} />
+            <CheckMark status={message.status} theme={theme} />
           )}
         </div>
       </div>

src/components/ChatHeader.tsx

@@ -1,9 +1,10 @@
 import type { PhoneType } from "../types"
+import type { ChatTheme } from "../theme"
 
 type ChatHeaderProps = {
   contactName: string
   contactStatus: string
-  darkMode: boolean
+  theme: ChatTheme
   phoneType: PhoneType
 }
 
@@ -39,41 +40,50 @@ function Avatar({ size = 36 }: { size?: number }) {
 function AndroidHeader({
   contactName,
   contactStatus,
-  darkMode,
+  theme,
 }: Omit<ChatHeaderProps, "phoneType">) {
-  const bgColor = darkMode ? "#202c33" : "#008069"
+  const bgColor = theme.header.background
+  const textColor = theme.header.text
+  const subtitleColor = theme.header.subtitle
+  const iconColor = theme.header.accent
 
   return (
     <div
       className="flex items-center gap-2 px-2 py-1.5"
       style={{ backgroundColor: bgColor, minHeight: "52px" }}
     >
       {/* Back arrow */}
-      <svg viewBox="0 0 24 24" width="24" height="24" fill="white">
+      <svg viewBox="0 0 24 24" width="24" height="24" fill={iconColor}>
         <path d="M12 4l1.4 1.4L7.8 11H20v2H7.8l5.6 5.6L12 20l-8-8z" />
       </svg>
 
       <Avatar size={38} />
 
       <div className="flex-1 min-w-0">
-        <p className="text-white text-[16px] font-normal leading-tight truncate">
+        <p
+          className="text-[16px] font-normal leading-tight truncate"
+          style={{ color: textColor }}
+        >
           {contactName}
         </p>
         {contactStatus && (
-          <p className="text-[12px] leading-tight truncate text-white/70">
+          <p
+            className="text-[12px] leading-tight truncate"
+            style={{ color: subtitleColor }}
+          >
             {contactStatus}
           </p>
         )}
       </div>
 
       <div className="flex items-center gap-4 mr-1">
-        <svg viewBox="0 0 24 24" width="22" height="22" fill="white">
+        <svg viewBox="0 0 24 24" width="22" height="22" fill={iconColor}>
           <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />
         </svg>
-        <svg viewBox="0 0 24 24" width="22" height="22" fill="white">
+        <svg viewBox="0 0 24 24" width="22" height="22" fill={iconColor}>
           <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" />
         </svg>
-        <svg viewBox="0 0 24 24" width="22" height="22" fill="white">
+        <svg viewBox="0 0 24 24" width="22" height="22" fill={iconColor}>
           <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
         </svg>
       </div>
@@ -84,13 +94,13 @@ function AndroidHeader({
 function IPhoneHeader({
   contactName,
   contactStatus,
-  darkMode,
+  theme,
 }: Omit<ChatHeaderProps, "phoneType">) {
-  const bgColor = darkMode ? "#1a1a1e" : "#f6f6f6"
-  const textColor = darkMode ? "#ffffff" : "#000000"
-  const accentColor = darkMode ? "#0a84ff" : "#007aff"
-  const subtitleColor = darkMode ? "#8e8e93" : "#8e8e93"
-  const borderColor = darkMode ? "#38383a" : "#d1d1d6"
+  const bgColor = theme.header.background
+  const textColor = theme.header.text
+  const accentColor = theme.header.accent
+  const subtitleColor = theme.header.subtitle
+  const borderColor = theme.header.border
 
   return (
     <div
@@ -151,10 +161,10 @@ function IPhoneHeader({
 export function ChatHeader({
   contactName,
   contactStatus,
-  darkMode,
+  theme,
   phoneType,
 }: ChatHeaderProps) {
-  const props = { contactName, contactStatus, darkMode }
+  const props = { contactName, contactStatus, theme }
   if (phoneType === "iphone") {
     return <IPhoneHeader {...props} />
   }

src/components/ChatPreview.tsx

@@ -1,6 +1,8 @@
 import { forwardRef, useEffect, useRef } from "react"
 import type { ReactNode } from "react"
 import type { Message, ChatConfig } from "../types"
+import { getChatTheme } from "../theme"
+import type { ChatTheme } from "../theme"
 import { StatusBar } from "./StatusBar"
 import { ChatHeader } from "./ChatHeader"
 import { ChatBubble } from "./ChatBubble"
@@ -119,11 +121,11 @@ function InputBar({
 // Centered "pill" used for both date separators and system notices.
 function CenterPill({
   children,
-  darkMode,
+  theme,
   wide = false,
 }: {
   children: ReactNode
-  darkMode: boolean
+  theme: ChatTheme
   wide?: boolean
 }) {
   return (
@@ -133,8 +135,8 @@ function CenterPill({
           wide ? "max-w-[85%]" : ""
         }`}
         style={{
-          backgroundColor: darkMode ? "#182229" : "#e1f2fb",
-          color: darkMode ? "#8696a0" : "#54656f",
+          backgroundColor: theme.pill.background,
+          color: theme.pill.text,
         }}
       >
         {children}
@@ -177,7 +179,8 @@ export const ChatPreview = forwardRef<HTMLDivElement, ChatPreviewProps>(
   function ChatPreview({ messages, config }, ref) {
     const messagesEndRef = useRef<HTMLDivElement>(null)
     const isIPhone = config.phoneType === "iphone"
-    const chatBgColor = config.darkMode ? "#0b141a" : "#efeae2"
+    const theme = getChatTheme(config.phoneType, config.darkMode)
+    const chatBgColor = theme.chatBackground
 
     useEffect(() => {
       messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
@@ -198,15 +201,15 @@ export const ChatPreview = forwardRef<HTMLDivElement, ChatPreviewProps>(
         }}
       >
         <StatusBar
-          darkMode={config.darkMode}
+          theme={theme}
           phoneType={config.phoneType}
           time={config.statusBarTime}
           batteryLevel={config.batteryLevel}
         />
         <ChatHeader
           contactName={config.contactName}
           contactStatus={config.contactStatus}
-          darkMode={config.darkMode}
+          theme={theme}
           phoneType={config.phoneType}
         />
 
@@ -224,14 +227,14 @@ export const ChatPreview = forwardRef<HTMLDivElement, ChatPreviewProps>(
             {buildRenderItems(messages).map((item) => {
               if (item.kind === "divider") {
                 return (
-                  <CenterPill key={item.key} darkMode={config.darkMode}>
+                  <CenterPill key={item.key} theme={theme}>
                     {item.label}
                   </CenterPill>
                 )
               }
               if (item.kind === "system") {
                 return (
-                  <CenterPill key={item.key} darkMode={config.darkMode} wide>
+                  <CenterPill key={item.key} theme={theme} wide>
                     {item.text}
                   </CenterPill>
                 )
@@ -240,7 +243,7 @@ export const ChatPreview = forwardRef<HTMLDivElement, ChatPreviewProps>(
                 <ChatBubble
                   key={item.key}
                   message={item.message}
-                  darkMode={config.darkMode}
+                  theme={theme}
                   showTail={item.showTail}
                 />
               )

src/components/CheckMark.tsx

@@ -1,13 +1,14 @@
 import type { MessageStatus } from "../types"
+import type { ChatTheme } from "../theme"
 
 type CheckMarkProps = {
   status: MessageStatus
-  darkMode: boolean
+  theme: ChatTheme
 }
 
-export function CheckMark({ status, darkMode }: CheckMarkProps) {
-  const grayColor = darkMode ? "#8696a0" : "#667781"
-  const blueColor = "#53bdeb"
+export function CheckMark({ status, theme }: CheckMarkProps) {
+  const grayColor = theme.check.gray
+  const blueColor = theme.check.blue
   const color = status === "read" ? blueColor : grayColor
 
   if (status === "sent") {

src/components/StatusBar.tsx

@@ -1,7 +1,8 @@
 import type { PhoneType } from "../types"
+import type { ChatTheme } from "../theme"
 
 type StatusBarProps = {
-  darkMode: boolean
+  theme: ChatTheme
   phoneType: PhoneType
   time: string
   batteryLevel: number
@@ -56,21 +57,21 @@ function BatteryIcon({ color, level }: { color: string; level: number }) {
 }
 
 function IPhoneStatusBar({
-  darkMode,
+  theme,
   time,
   batteryLevel,
 }: {
-  darkMode: boolean
+  theme: ChatTheme
   time: string
   batteryLevel: number
 }) {
-  const textColor = darkMode ? "#ffffff" : "#000000"
+  const textColor = theme.statusBar.text
 
   return (
     <div
       className="relative flex items-end justify-between px-6 text-white"
       style={{
-        backgroundColor: darkMode ? "#000000" : "#f6f6f6",
+        backgroundColor: theme.statusBar.background,
         height: "54px",
         fontSize: "15px",
         paddingBottom: "4px",
@@ -98,51 +99,49 @@ function IPhoneStatusBar({
 }
 
 function AndroidStatusBar({
-  darkMode,
+  theme,
   time,
   batteryLevel,
 }: {
-  darkMode: boolean
+  theme: ChatTheme
   time: string
   batteryLevel: number
 }) {
-  const bgColor = darkMode ? "#1a262d" : "#006b57"
+  const iconColor = theme.statusBar.text
 
   return (
     <div
-      className="flex items-center justify-between px-4 text-white"
-      style={{ backgroundColor: bgColor, height: "26px", fontSize: "12px" }}
+      className="flex items-center justify-between px-4"
+      style={{
+        backgroundColor: theme.statusBar.background,
+        height: "26px",
+        fontSize: "12px",
+      }}
     >
-      <span className="font-medium">{time}</span>
+      <span className="font-medium" style={{ color: iconColor }}>
+        {time}
+      </span>
       <div className="flex items-center gap-1">
-        <SignalBars color="white" />
-        <WiFiIcon color="white" />
-        <BatteryIcon color="white" level={batteryLevel} />
+        <SignalBars color={iconColor} />
+        <WiFiIcon color={iconColor} />
+        <BatteryIcon color={iconColor} level={batteryLevel} />
       </div>
     </div>
   )
 }
 
 export function StatusBar({
-  darkMode,
+  theme,
   phoneType,
   time,
   batteryLevel,
 }: StatusBarProps) {
   if (phoneType === "iphone") {
     return (
-      <IPhoneStatusBar
-        darkMode={darkMode}
-        time={time}
-        batteryLevel={batteryLevel}
-      />
+      <IPhoneStatusBar theme={theme} time={time} batteryLevel={batteryLevel} />
     )
   }
   return (
-    <AndroidStatusBar
-      darkMode={darkMode}
-      time={time}
-      batteryLevel={batteryLevel}
-    />
+    <AndroidStatusBar theme={theme} time={time} batteryLevel={batteryLevel} />
   )
 }