feat(web): add theme system with CSS variables and settings modal

- Add ThemeContext with light/dark/system theme support
- Migrate all hardcoded colors to CSS variables
- Add SettingsModal for theme customization
- Add font loader for dynamic font selection
- Add i18n support for Chinese and Turkish locales
- Fix accessibility: add aria-live to pairing error message

Author: nanyuantingfeng

web/src/App.tsx

@@ -1,6 +1,6 @@
 import { Routes, Route, Navigate } from 'react-router-dom';
-import { useState, useEffect, createContext, useContext, Component } from 'react';
-import type { ReactNode, ErrorInfo } from 'react';
+import { useState, useEffect, createContext, useContext, Component, type ReactNode, type ErrorInfo } from 'react';
+import { ThemeProvider } from './contexts/ThemeContext';
 import Layout from './components/layout/Layout';
 import Dashboard from './pages/Dashboard';
 import AgentChat from './pages/AgentChat';
@@ -61,19 +61,19 @@ export class ErrorBoundary extends Component<
     if (this.state.error) {
       return (
         <div className="p-6">
-          <div className="bg-gray-900 border border-red-700 rounded-xl p-6 w-full max-w-lg">
-            <h2 className="text-lg font-semibold text-red-400 mb-2">
+          <div className="card p-6 w-full max-w-lg" style={{ borderColor: 'rgba(239, 68, 68, 0.3)' }}>
+            <h2 className="text-lg font-semibold mb-2" style={{ color: 'var(--color-status-error)' }}>
               Something went wrong
             </h2>
-            <p className="text-gray-400 text-sm mb-4">
+            <p className="text-sm mb-4" style={{ color: 'var(--pc-text-muted)' }}>
               A render error occurred. Check the browser console for details.
             </p>
-            <pre className="text-xs text-red-300 bg-gray-800 rounded p-3 overflow-x-auto whitespace-pre-wrap break-all">
+            <pre className="text-xs rounded-lg p-3 overflow-x-auto whitespace-pre-wrap break-all font-mono" style={{ background: 'var(--pc-bg-base)', color: 'var(--color-status-error)' }}>
               {this.state.error.message}
             </pre>
             <button
               onClick={() => this.setState({ error: null })}
-              className="mt-6 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
+              className="btn-electric mt-6 px-4 py-2 text-sm font-medium"
             >
               Try again
             </button>
@@ -125,36 +125,30 @@ function PairingDialog({ onPair }: { onPair: (code: string) => Promise<void> })
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center" style={{ background: 'radial-gradient(ellipse at center, #0a0a20 0%, #050510 70%)' }}>
+    <div className="min-h-screen flex items-center justify-center" style={{ background: 'var(--pc-bg-base)' }}>
       {/* Ambient glow */}
-      <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] rounded-full opacity-20 pointer-events-none" style={{ background: 'radial-gradient(circle, #0080ff 0%, transparent 70%)' }} />
-
-      <div className="relative glass-card p-8 w-full max-w-md animate-fade-in-scale">
-        {/* Top glow accent */}
-        <div className="absolute -top-px left-1/4 right-1/4 h-px" style={{ background: 'linear-gradient(90deg, transparent, #0080ff, transparent)' }} />
+      <div className="relative surface-panel p-8 w-full max-w-md animate-fade-in-scale">
 
         <div className="text-center mb-8">
           <img
             src="/_app/zeroclaw-trans.png"
             alt="ZeroClaw"
             className="h-20 w-20 rounded-2xl object-cover mx-auto mb-4 animate-float"
-            style={{ boxShadow: '0 0 30px rgba(0,128,255,0.3)' }}
+            onError={(e) => { e.currentTarget.style.display = 'none'; }}
           />
-          <h1 className="text-2xl font-bold text-gradient-blue mb-2">ZeroClaw</h1>
-          {displayCode ? (
-            <p className="text-[#556080] text-sm">Your pairing code</p>
-          ) : (
-            <p className="text-[#556080] text-sm">Enter the pairing code from your terminal</p>
-          )}
+          <h1 className="text-2xl font-bold mb-2 text-gradient-blue">ZeroClaw</h1>
+          <p className="text-sm" style={{ color: 'var(--pc-text-muted)' }}>
+            {displayCode ? 'Your pairing code' : 'Enter the pairing code from your terminal'}
+          </p>
         </div>
 
         {/* Show the pairing code if available (localhost) */}
         {!codeLoading && displayCode && (
-          <div className="mb-6 p-4 rounded-xl text-center" style={{ background: 'rgba(0,128,255,0.08)', border: '1px solid rgba(0,128,255,0.2)' }}>
-            <div className="text-4xl font-mono font-bold tracking-[0.4em] text-white py-2">
+          <div className="mb-6 p-4 rounded-2xl text-center border" style={{ background: 'var(--pc-accent-glow)', borderColor: 'var(--pc-accent-dim)' }}>
+            <div className="text-4xl font-mono font-bold tracking-[0.4em] py-2" style={{ color: 'var(--pc-text-primary)' }}>
               {displayCode}
             </div>
-            <p className="text-[#556080] text-xs mt-2">Enter this code below or on another device</p>
+            <p className="text-xs mt-2" style={{ color: 'var(--pc-text-muted)' }}>Enter this code below or on another device</p>
           </div>
         )}
 
@@ -169,7 +163,7 @@ function PairingDialog({ onPair }: { onPair: (code: string) => Promise<void> })
             autoFocus
           />
           {error && (
-            <p className="text-[#ff4466] text-sm mb-4 text-center animate-fade-in" aria-live="polite">{error}</p>
+            <p aria-live="polite" className="text-sm mb-4 text-center animate-fade-in" style={{ color: 'var(--color-status-error)' }}>{error}</p>
           )}
           <button
             type="submit"
@@ -210,10 +204,10 @@ function AppContent() {
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center" style={{ background: 'radial-gradient(ellipse at center, #0a0a20 0%, #050510 70%)' }}>
+      <div className="min-h-screen flex items-center justify-center" style={{ background: 'var(--pc-bg-base)' }}>
         <div className="flex flex-col items-center gap-4 animate-fade-in">
-          <div className="h-10 w-10 border-2 border-[#0080ff30] border-t-[#0080ff] rounded-full animate-spin" />
-          <p className="text-[#556080] text-sm">Connecting...</p>
+          <div className="h-10 w-10 border-2 rounded-full animate-spin" style={{ borderColor: 'var(--pc-border)', borderTopColor: 'var(--pc-accent)' }} />
+          <p className="text-sm" style={{ color: 'var(--pc-text-muted)' }}>Connecting...</p>
         </div>
       </div>
     );
@@ -250,7 +244,9 @@ function AppContent() {
 export default function App() {
   return (
     <AuthProvider>
-      <AppContent />
+      <ThemeProvider>
+        <AppContent />
+      </ThemeProvider>
     </AuthProvider>
   );
 }