Added: CSS template switch in Dashboard.

auth.py

@@ -99,6 +99,9 @@ async def auth_twitch_callback(code: str, state: str, request: Request, db: Sess
             encrypted_tokens=encrypted_tokens
         )
         db.add(user)
+        # Also create a default settings object for the new user
+        new_settings = models.Setting(owner=user)
+        db.add(new_settings)
     
     db.commit()
     

main.py

@@ -1,5 +1,5 @@
 import os
-from fastapi import FastAPI, Request, Depends
+from fastapi import FastAPI, Request, Depends, HTTPException
 from starlette.middleware.sessions import SessionMiddleware
 from starlette.staticfiles import StaticFiles
 from starlette.responses import FileResponse, RedirectResponse
@@ -10,6 +10,7 @@ from sqlalchemy.orm import Session
 import models
 from database import engine
 import auth # Import the new auth module
+import schemas
 from config import settings # Import settings to get the secret key
 
 # --- Absolute Path Configuration ---
@@ -56,8 +57,13 @@ async def read_dashboard(request: Request, db: Session = Depends(auth.get_db)):
     
     user = db.query(models.User).filter(models.User.id == user_id).first()
     overlay_url = f"{settings.APP_BASE_URL}/overlay/{user.id}"
+    
+    # Ensure user has settings, create if they don't for some reason
+    if not user.settings:
+        user.settings = models.Setting()
+        db.commit()
 
-    return templates.TemplateResponse("dashboard.html", {"request": request, "user": user, "overlay_url": overlay_url})
+    return templates.TemplateResponse("dashboard.html", {"request": request, "user": user, "overlay_url": overlay_url, "current_theme": user.settings.overlay_theme})
 
 @app.get("/logout")
 async def logout(request: Request):
@@ -66,7 +72,29 @@ async def logout(request: Request):
     return RedirectResponse(url="/")
 
 @app.get("/overlay/{user_id}")
-async def read_overlay(request: Request, user_id: int):
+async def read_overlay(request: Request, user_id: int, db: Session = Depends(auth.get_db)):
     # This endpoint serves the overlay page.
-    # For now, it just renders the template with placeholder text.
-    return templates.TemplateResponse("overlay.html", {"request": request})
+    user = db.query(models.User).filter(models.User.id == user_id).first()
+    if not user:
+        raise HTTPException(status_code=404, detail="User not found")
+
+    theme = "dark-purple" # Default theme
+    if user.settings and user.settings.overlay_theme:
+        theme = user.settings.overlay_theme
+
+    return templates.TemplateResponse(f"overlay-{theme}.html", {"request": request})
+
+@app.post("/api/settings")
+async def update_settings(settings_data: schemas.SettingsUpdate, request: Request, db: Session = Depends(auth.get_db)):
+    user_id = request.session.get('user_id')
+    if not user_id:
+        raise HTTPException(status_code=401, detail="Not authenticated")
+
+    user = db.query(models.User).filter(models.User.id == user_id).first()
+    if not user.settings:
+        user.settings = models.Setting()
+    
+    user.settings.overlay_theme = settings_data.overlay_theme
+    db.commit()
+    
+    return {"message": "Settings updated successfully"}

models.py

@@ -22,6 +22,7 @@ class Setting(Base):
 
     id = Column(Integer, primary_key=True, index=True)
     custom_css = Column(Text, nullable=True)
+    overlay_theme = Column(String, default="dark-purple")
     user_id = Column(Integer, ForeignKey("users.id"))
 
     owner = relationship("User", back_populates="settings")

schemas.py

@@ -0,0 +1,5 @@
+from pydantic import BaseModel
+from typing import Literal
+
+class SettingsUpdate(BaseModel):
+    overlay_theme: Literal['dark-purple', 'bright-green']

templates/dashboard.html

@@ -21,7 +21,33 @@
             <code>{{ overlay_url }}</code>
         </div>
 
+        <div class="settings-container">
+            <h3>Overlay Theme</h3>
+            <form id="theme-form">
+                <select name="overlay_theme" id="overlay_theme">
+                    <option value="dark-purple" {% if current_theme == 'dark-purple' %}selected{% endif %}>Dark Purple</option>
+                    <option value="bright-green" {% if current_theme == 'bright-green' %}selected{% endif %}>Bright Green</option>
+                </select>
+                <button type="submit">Save Theme</button>
+            </form>
+            <p id="save-status"></p>
+        </div>
+
         <p><a href="/logout">Logout</a></p>
     </div>
+
+    <script>
+        document.getElementById('theme-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const theme = document.getElementById('overlay_theme').value;
+            const response = await fetch('/api/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ overlay_theme: theme })
+            });
+            const result = await response.json();
+            document.getElementById('save-status').textContent = result.message;
+        });
+    </script>
 </body>
 </html>