Changed to sepia theme

README.md

@@ -15,6 +15,17 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
 
 An agentic RAG system for the PsTuts dataset that provides AI-powered answers to Adobe Photoshop questions using video tutorial transcripts.
 
+## 🎨 Visual Theme
+
+The application features a beautiful **sepia-toned color scheme** that gives it a vintage, artistic feel perfect for Adobe Photoshop tutorials:
+
+- 🌅 **Light Theme** (default): Warm cream and tan colors reminiscent of old photography
+- 🌙 **Dark Theme**: Rich coffee and amber tones for comfortable nighttime usage
+- 🖼️ **Sepia Filter**: Subtle sepia treatment on images for visual consistency
+- ⚡ **Smooth Transitions**: Elegant animations when switching between themes
+
+Users can toggle between light and dark variants using the theme switcher in the interface.
+
 ## 🚀 Getting Started
 
 1. Install dependencies:

docs/DEVELOPER.md

@@ -134,6 +134,57 @@ This feature enables controlled access to external resources while maintaining a
 - **`evaluator_utils.py`**: RAG evaluation utilities using RAGAS framework
 - **Notebook-based evaluation**: `evaluate_rag.ipynb` for systematic testing
 
+## 🎨 UI Customization & Theming
+
+### Sepia Theme Implementation 🖼️
+
+The application features a custom **sepia-toned color scheme** implemented through CSS variables and theme switching:
+
+#### 📁 Theme Files
+- **`public/sepia-theme.css`**: Custom CSS file with sepia color schemes
+- **`.chainlit/config.toml`**: Configuration enabling custom CSS and default theme
+
+#### 🎨 Color Palette Design
+```css
+/* Light Sepia Colors */
+--sepia-lightest: #faf6f0    /* Warm cream background */
+--sepia-lighter: #f4ede1     /* Secondary background */
+--sepia-light: #e8d5b7       /* Tertiary background */
+--sepia-medium: #d4b896      /* Border and accent */
+--sepia-dark: #c19a6b        /* Darker accents */
+--sepia-darker: #a67c52      /* Strong borders */
+--sepia-darkest: #8b5a3c     /* Deep contrast */
+
+/* Dark Sepia Colors */
+--sepia-dark-bg: #2c1810     /* Rich coffee background */
+--sepia-dark-bg-secondary: #3a2318  /* Warmer secondary */
+--sepia-dark-bg-tertiary: #4a2d20   /* Amber tertiary */
+```
+
+#### 🔧 Technical Implementation
+- **CSS Variables**: Dynamic theming with `--custom-property` pattern
+- **Theme Detection**: `[data-theme="light"]` and `[data-theme="dark"]` selectors
+- **Smooth Transitions**: `transition` properties for seamless theme switching
+- **Component Styling**: Custom styling for chat messages, buttons, inputs, sidebar
+- **Image Treatment**: Subtle `filter: sepia(20%)` on images for visual consistency
+
+#### ⚙️ Configuration Setup
+```toml
+# .chainlit/config.toml
+[UI]
+default_theme = "light"           # Set light theme as default
+custom_css = "/public/sepia-theme.css"  # Enable custom styling
+```
+
+#### 🎯 Features
+- **Responsive Design**: Adapts to both light and dark preferences
+- **Accessibility**: Maintains sufficient contrast ratios in both themes
+- **Visual Cohesion**: Unified sepia treatment across all UI elements
+- **Performance**: CSS-only implementation with minimal runtime overhead
+- **User Control**: Native Chainlit theme switcher toggles between variants
+
+The sepia theme creates a warm, nostalgic atmosphere perfect for Adobe Photoshop tutorials, giving the application a distinctive visual identity that stands out from standard blue/gray interfaces. 📸✨
+
 ## 🚀 Running the Applications
 
 ### Multi-Agent RAG (Recommended) 🤖

public/theme.json

@@ -0,0 +1,64 @@
+{
+    "custom_fonts": [],
+    "variables": {
+        "light": {
+            "--background": "30 40% 92%",
+            "--foreground": "30 90% 15%",
+            "--card": "30 30% 85%",
+            "--card-foreground": "30 90% 15%",
+            "--popover": "30 40% 92%",
+            "--popover-foreground": "30 90% 15%",
+            "--primary": "25 75% 45%",
+            "--primary-foreground": "30 40% 95%",
+            "--secondary": "35 25% 75%",
+            "--secondary-foreground": "30 90% 15%",
+            "--muted": "30 20% 80%",
+            "--muted-foreground": "30 40% 35%",
+            "--accent": "35 35% 70%",
+            "--accent-foreground": "30 90% 15%",
+            "--destructive": "0 84% 60%",
+            "--destructive-foreground": "30 40% 95%",
+            "--border": "30 25% 75%",
+            "--input": "30 25% 75%",
+            "--ring": "25 75% 45%",
+            "--radius": "0.75rem",
+            "--sidebar-background": "35 25% 82%",
+            "--sidebar-foreground": "30 60% 25%",
+            "--sidebar-primary": "30 80% 20%",
+            "--sidebar-primary-foreground": "30 40% 95%",
+            "--sidebar-accent": "35 20% 88%",
+            "--sidebar-accent-foreground": "30 80% 20%",
+            "--sidebar-border": "30 25% 70%",
+            "--sidebar-ring": "25 75% 45%"
+        },
+        "dark": {
+            "--background": "30 60% 8%",
+            "--foreground": "30 40% 85%",
+            "--card": "30 50% 12%",
+            "--card-foreground": "30 40% 85%",
+            "--popover": "30 50% 12%",
+            "--popover-foreground": "30 40% 85%",
+            "--primary": "25 75% 55%",
+            "--primary-foreground": "30 60% 8%",
+            "--secondary": "30 40% 18%",
+            "--secondary-foreground": "30 40% 85%",
+            "--muted": "30 35% 20%",
+            "--muted-foreground": "30 25% 65%",
+            "--accent": "30 30% 25%",
+            "--accent-foreground": "30 40% 85%",
+            "--destructive": "0 62% 30%",
+            "--destructive-foreground": "30 40% 85%",
+            "--border": "30 35% 20%",
+            "--input": "30 35% 20%",
+            "--ring": "25 75% 55%",
+            "--sidebar-background": "30 70% 6%",
+            "--sidebar-foreground": "30 30% 80%",
+            "--sidebar-primary": "25 65% 50%",
+            "--sidebar-primary-foreground": "30 60% 8%",
+            "--sidebar-accent": "30 60% 10%",
+            "--sidebar-accent-foreground": "30 30% 80%",
+            "--sidebar-border": "30 40% 15%",
+            "--sidebar-ring": "25 75% 55%"
+        }
+    }
+} 

pyproject.toml

@@ -15,7 +15,7 @@ dependencies = [
     "langgraph>=0.4.8",
     "qdrant-client>=1.8.0",
     # API integration
-    "chainlit>=2.0.4",
+    "chainlit",
     "requests>=2.31.0",
     "python-dotenv>=0.9.9",
     # Utilities

uv.lock

@@ -3806,7 +3806,7 @@ requires-dist = [
     { name = "aiofiles", specifier = ">=23.1.0" },
     { name = "bidict", specifier = ">=0.23.1" },
     { name = "black", marker = "extra == 'dev'", specifier = ">=22.0.0" },
-    { name = "chainlit", specifier = ">=2.0.4" },
+    { name = "chainlit" },
     { name = "datasets", specifier = ">=3.6.0" },
     { name = "deptry", marker = "extra == 'dev'", specifier = ">=0.23.0" },
     { name = "fastapi", marker = "extra == 'web'", specifier = ">=0.115.3,<0.116" },