feat: add theme customization with 6 color schemes

Added comprehensive theme system with:
- 6 themes: Dark (default), Darker, Midnight Blue, Forest, Sunset, Light
- New Appearance tab in settings with theme selector
- Live theme preview showing user/assistant message styles
- Theme persistence using localStorage
- Dynamic CSS variable updates for instant theme switching
- Each theme includes custom gradients, accent colors, and text colors

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/index.html

@@ -72,6 +72,7 @@
         <div class="settings-tabs">
           <button class="tab-btn active" data-tab="api">API</button>
           <button class="tab-btn" data-tab="character">Character</button>
+          <button class="tab-btn" data-tab="appearance">Appearance</button>
         </div>
 
         <div id="api-tab" class="tab-content active">
@@ -342,6 +343,36 @@
             </div>
           </form>
         </div>
+
+        <div id="appearance-tab" class="tab-content">
+          <div class="settings-form">
+            <div class="form-group">
+              <label for="theme-select">Theme</label>
+              <select id="theme-select" class="theme-select">
+                <option value="dark">Dark (Default)</option>
+                <option value="darker">Darker</option>
+                <option value="midnight">Midnight Blue</option>
+                <option value="forest">Forest</option>
+                <option value="sunset">Sunset</option>
+                <option value="light">Light</option>
+              </select>
+              <small style="color: var(--text-secondary); margin-top: 4px; display: block;">Choose your preferred color scheme</small>
+            </div>
+
+            <div class="theme-preview-container">
+              <div class="theme-preview-label">Preview</div>
+              <div class="theme-preview">
+                <div class="theme-preview-message user-preview">
+                  <div class="theme-preview-content">User message</div>
+                </div>
+                <div class="theme-preview-message assistant-preview">
+                  <div class="theme-preview-avatar"></div>
+                  <div class="theme-preview-content">Assistant response</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <footer class="input-container">