feat: implement comprehensive theming system

- Add ThemeContext with support for dark, gray, light, and custom themes
- Create theme switching UI in Settings with theme selector
- Add custom color editor for custom theme mode
- Update styles.css with theme-specific CSS variables
- Add theme storage API methods for persistence
- Update syntax highlighting to match selected theme
- Wrap App with ThemeProvider for global theme access

The theming system allows users to switch between predefined themes
or create their own custom theme with live color editing.

src/components/ToolWidgets.tsx

@@ -51,7 +51,8 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { claudeSyntaxTheme } from "@/lib/claudeSyntaxTheme";
+import { getClaudeSyntaxTheme } from "@/lib/claudeSyntaxTheme";
+import { useTheme } from "@/hooks";
 import { Button } from "@/components/ui/button";
 import { createPortal } from "react-dom";
 import * as Diff from 'diff';
@@ -400,6 +401,8 @@ export const ReadWidget: React.FC<{ filePath: string; result?: any }> = ({ fileP
  */
 export const ReadResultWidget: React.FC<{ content: string; filePath?: string }> = ({ content, filePath }) => {
   const [isExpanded, setIsExpanded] = useState(false);
+  const { theme } = useTheme();
+  const syntaxTheme = getClaudeSyntaxTheme(theme);
   
   // Extract file extension for syntax highlighting
   const getLanguage = (path?: string) => {
@@ -530,7 +533,7 @@ export const ReadResultWidget: React.FC<{ content: string; filePath?: string }>
         <div className="relative overflow-x-auto">
           <SyntaxHighlighter
             language={language}
-            style={claudeSyntaxTheme}
+            style={syntaxTheme}
             showLineNumbers
             startingLineNumber={startLineNumber}
             wrapLongLines={false}
@@ -629,6 +632,9 @@ export const BashWidget: React.FC<{
   description?: string;
   result?: any;
 }> = ({ command, description, result }) => {
+  const { theme } = useTheme();
+  const syntaxTheme = getClaudeSyntaxTheme(theme);
+  
   // Extract result content if available
   let resultContent = '';
   let isError = false;
@@ -695,6 +701,8 @@ export const BashWidget: React.FC<{
  */
 export const WriteWidget: React.FC<{ filePath: string; content: string; result?: any }> = ({ filePath, content, result: _result }) => {
   const [isMaximized, setIsMaximized] = useState(false);
+  const { theme } = useTheme();
+  const syntaxTheme = getClaudeSyntaxTheme(theme);
   
   // Extract file extension for syntax highlighting
   const getLanguage = (path: string) => {
@@ -776,7 +784,7 @@ export const WriteWidget: React.FC<{ filePath: string; content: string; result?:
           <div className="flex-1 overflow-auto">
             <SyntaxHighlighter
               language={language}
-              style={claudeSyntaxTheme}
+              style={syntaxTheme}
               customStyle={{
                 margin: 0,
                 padding: '1.5rem',
@@ -827,7 +835,7 @@ export const WriteWidget: React.FC<{ filePath: string; content: string; result?:
       <div className="overflow-auto flex-1">
         <SyntaxHighlighter
           language={language}
-          style={claudeSyntaxTheme}
+          style={syntaxTheme}
           customStyle={{
             margin: 0,
             padding: '1rem',
@@ -1121,6 +1129,8 @@ export const EditWidget: React.FC<{
   new_string: string;
   result?: any;
 }> = ({ file_path, old_string, new_string, result: _result }) => {
+  const { theme } = useTheme();
+  const syntaxTheme = getClaudeSyntaxTheme(theme);
 
   const diffResult = Diff.diffLines(old_string || '', new_string || '', { 
     newlineIsToken: true,
@@ -1165,7 +1175,7 @@ export const EditWidget: React.FC<{
                 <div className="flex-1">
                   <SyntaxHighlighter
                     language={language}
-                    style={claudeSyntaxTheme}
+                    style={syntaxTheme}
                     PreTag="div"
                     wrapLongLines={false}
                     customStyle={{
@@ -1196,6 +1206,9 @@ export const EditWidget: React.FC<{
  * Widget for Edit tool result - shows a diff view
  */
 export const EditResultWidget: React.FC<{ content: string }> = ({ content }) => {
+  const { theme } = useTheme();
+  const syntaxTheme = getClaudeSyntaxTheme(theme);
+  
   // Parse the content to extract file path and code snippet
   const lines = content.split('\n');
   let filePath = '';
@@ -1245,7 +1258,7 @@ export const EditResultWidget: React.FC<{ content: string }> = ({ content }) =>
       <div className="overflow-x-auto max-h-[440px]">
         <SyntaxHighlighter
           language={language}
-          style={claudeSyntaxTheme}
+          style={syntaxTheme}
           showLineNumbers
           startingLineNumber={startLineNumber}
           wrapLongLines={false}
@@ -1282,6 +1295,8 @@ export const MCPWidget: React.FC<{
   result?: any;
 }> = ({ toolName, input, result: _result }) => {
   const [isExpanded, setIsExpanded] = useState(false);
+  const { theme } = useTheme();
+  const syntaxTheme = getClaudeSyntaxTheme(theme);
   
   // Parse the tool name to extract components
   // Format: mcp__namespace__method
@@ -1396,7 +1411,7 @@ export const MCPWidget: React.FC<{
                 )}>
                   <SyntaxHighlighter
                     language="json"
-                    style={claudeSyntaxTheme}
+                    style={syntaxTheme}
                     customStyle={{
                       margin: 0,
                       padding: '0.75rem',
@@ -1585,6 +1600,8 @@ export const MultiEditWidget: React.FC<{
 }> = ({ file_path, edits, result: _result }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const language = getLanguage(file_path);
+  const { theme } = useTheme();
+  const syntaxTheme = getClaudeSyntaxTheme(theme);
   
   return (
     <div className="space-y-2">
@@ -1645,7 +1662,7 @@ export const MultiEditWidget: React.FC<{
                               <div className="flex-1">
                                 <SyntaxHighlighter
                                   language={language}
-                                  style={claudeSyntaxTheme}
+                                  style={syntaxTheme}
                                   PreTag="div"
                                   wrapLongLines={false}
                                   customStyle={{