一、 前言

在前幾天的文章中，我們成功為「AI 酒館」建立了多角色獨立對話記憶，讓調酒師 Mark 與吟遊詩人 Bard 擁有各自獨立的對話宇宙。然而，如果切換角色時整體視覺配色完全一模一樣，沉浸感就會稍微打些折扣。

為了讓玩家在選擇不同 NPC 時能有更直覺、更深刻的視覺感受，今天的核心任務是實作：依據角色性格動態渲染主題色與背景光暈！

二、 為什麼主題氛圍對 AI Role-play 介面很重要？

1. 情感共鳴與視覺暗示：冷色調能帶出冷酷調酒師的深邃與故事感，暖紫色調則能烘托吟遊詩人的浪漫與詩意。
2. 無縫流暢的 UI 反饋：透過 Tailwind CSS 的動態 Class 與 CSS 變數，不需要載入重度圖檔，就能實現極致流暢的視覺切換。

三、 實作步驟與核心程式碼

1. 下達 Vibe Coding 需求
   我們透過 AI 助手在角色資料結構中擴充配色定義，並將其綁定至主介面的背景漸層與動態 Tailwind 樣式中。

2. 核心動態主題樣式實作
   前端處理主題切換與背景光暈渲染的程式碼概念大致如下：

   // 角色資料結構擴充
   export const CHARACTERS = [
     {
       id: 'mark',
       name: 'MARK',
       title: '冷酷調酒師',
       themeColor: 'from-amber-950/30 to-zinc-950',
       accentColor: 'border-amber-500/50 text-amber-400',
       glowColor: 'rgba(217, 119, 6, 0.15)',
     },
     {
       id: 'bard',
       name: 'BARD',
       title: '熱情吟遊詩人',
       themeColor: 'from-purple-950/30 to-zinc-950',
       accentColor: 'border-purple-500/50 text-purple-400',
       glowColor: 'rgba(139, 92, 246, 0.15)',
     }
   ];
   
   // 背景動態光暈渲染元件
   export function AmbientBackground({ activeCharacter }) {
     return (
       <div 
         className="fixed inset-0 pointer-events-none transition-all duration-700 ease-in-out"
         style={{
           background: `radial-gradient(circle at 50% 30%, ${activeCharacter.glowColor}, transparent 70%)`
         }}
       />
     );
   }
   

   四、 今日心得與預告

• 今日心得：加了動態主題色與背景光暈後，每次切換角色都像走進了一間全新氛圍的包廂！純前端 CSS 的小巧思就能帶給專案巨大的精緻度提升。
• 明日預告 (Day 10)：【功能】API Key 安全防護與設定彈窗！優化環境變數管理與前端輸入體驗，防止 Key 意外洩漏！