feat: #826 - customizable colors

examples/chat/custom-theme.json

@@ -0,0 +1,223 @@
+{
+  "themes": {
+    "light": {
+      "colors": {
+        "default": {
+          "50": "#f6f8f7",
+          "100": "#eaefec",
+          "200": "#dee5e0",
+          "300": "#d2dcd5",
+          "400": "#c5d2c9",
+          "500": "#b9c9be",
+          "600": "#99a69d",
+          "700": "#78837c",
+          "800": "#585f5a",
+          "900": "#383c39",
+          "foreground": "#000",
+          "DEFAULT": "#b9c9be"
+        },
+        "primary": {
+          "50": "#ecf9f0",
+          "100": "#d1f0dc",
+          "200": "#b6e7c7",
+          "300": "#9cdeb3",
+          "400": "#81d59e",
+          "500": "#66cc8a",
+          "600": "#54a872",
+          "700": "#42855a",
+          "800": "#306142",
+          "900": "#1f3d29",
+          "foreground": "#000",
+          "DEFAULT": "#66cc8a"
+        },
+        "secondary": {
+          "50": "#e6efff",
+          "100": "#c3d8fe",
+          "200": "#a0c1fd",
+          "300": "#7daafc",
+          "400": "#5a93fc",
+          "500": "#377cfb",
+          "600": "#2d66cf",
+          "700": "#2451a3",
+          "800": "#1a3b77",
+          "900": "#11254b",
+          "foreground": "#000",
+          "DEFAULT": "#377cfb"
+        },
+        "success": {
+          "50": "#dff4ed",
+          "100": "#b3e5d4",
+          "200": "#86d6ba",
+          "300": "#59c7a1",
+          "400": "#2db887",
+          "500": "#00a96e",
+          "600": "#008b5b",
+          "700": "#006e48",
+          "800": "#005034",
+          "900": "#003321",
+          "foreground": "#000",
+          "DEFAULT": "#00a96e"
+        },
+        "warning": {
+          "50": "#fff7df",
+          "100": "#ffecb3",
+          "200": "#ffe086",
+          "300": "#ffd559",
+          "400": "#ffc92d",
+          "500": "#ffbe00",
+          "600": "#d29d00",
+          "700": "#a67c00",
+          "800": "#795a00",
+          "900": "#4d3900",
+          "foreground": "#000",
+          "DEFAULT": "#ffbe00"
+        },
+        "danger": {
+          "50": "#ffeaeb",
+          "100": "#ffcdd0",
+          "200": "#ffb0b4",
+          "300": "#ff9298",
+          "400": "#ff757d",
+          "500": "#ff5861",
+          "600": "#d24950",
+          "700": "#a6393f",
+          "800": "#792a2e",
+          "900": "#4d1a1d",
+          "foreground": "#000",
+          "DEFAULT": "#ff5861"
+        },
+        "background": "#f6fffa",
+        "foreground": "#004c1b",
+        "content1": {
+          "DEFAULT": "#e0f5e8",
+          "foreground": "#000"
+        },
+        "content2": {
+          "DEFAULT": "#c2ebd0",
+          "foreground": "#000"
+        },
+        "content3": {
+          "DEFAULT": "#a3e0b9",
+          "foreground": "#000"
+        },
+        "content4": {
+          "DEFAULT": "#85d6a1",
+          "foreground": "#000"
+        },
+        "focus": "#66cc8a",
+        "overlay": "#000000"
+      }
+    },
+    "dark": {
+      "colors": {
+        "default": {
+          "50": "#0e100e",
+          "100": "#1d211d",
+          "200": "#2b312b",
+          "300": "#3a423a",
+          "400": "#485248",
+          "500": "#6d756d",
+          "600": "#919791",
+          "700": "#b6bab6",
+          "800": "#dadcda",
+          "900": "#ffffff",
+          "foreground": "#fff",
+          "DEFAULT": "#485248"
+        },
+        "primary": {
+          "50": "#1f3d29",
+          "100": "#306142",
+          "200": "#42855a",
+          "300": "#54a872",
+          "400": "#66cc8a",
+          "500": "#81d59e",
+          "600": "#9cdeb3",
+          "700": "#b6e7c7",
+          "800": "#d1f0dc",
+          "900": "#ecf9f0",
+          "foreground": "#000",
+          "DEFAULT": "#66cc8a"
+        },
+        "secondary": {
+          "50": "#11254b",
+          "100": "#1a3b77",
+          "200": "#2451a3",
+          "300": "#2d66cf",
+          "400": "#377cfb",
+          "500": "#5a93fc",
+          "600": "#7daafc",
+          "700": "#a0c1fd",
+          "800": "#c3d8fe",
+          "900": "#e6efff",
+          "foreground": "#000",
+          "DEFAULT": "#377cfb"
+        },
+        "success": {
+          "50": "#003321",
+          "100": "#005034",
+          "200": "#006e48",
+          "300": "#008b5b",
+          "400": "#00a96e",
+          "500": "#2db887",
+          "600": "#59c7a1",
+          "700": "#86d6ba",
+          "800": "#b3e5d4",
+          "900": "#dff4ed",
+          "foreground": "#000",
+          "DEFAULT": "#00a96e"
+        },
+        "warning": {
+          "50": "#4d3900",
+          "100": "#795a00",
+          "200": "#a67c00",
+          "300": "#d29d00",
+          "400": "#ffbe00",
+          "500": "#ffc92d",
+          "600": "#ffd559",
+          "700": "#ffe086",
+          "800": "#ffecb3",
+          "900": "#fff7df",
+          "foreground": "#000",
+          "DEFAULT": "#ffbe00"
+        },
+        "danger": {
+          "50": "#4d1a1d",
+          "100": "#792a2e",
+          "200": "#a6393f",
+          "300": "#d24950",
+          "400": "#ff5861",
+          "500": "#ff757d",
+          "600": "#ff9298",
+          "700": "#ffb0b4",
+          "800": "#ffcdd0",
+          "900": "#ffeaeb",
+          "foreground": "#000",
+          "DEFAULT": "#ff5861"
+        },
+        "background": "#010b06",
+        "foreground": "#99d2ad",
+        "content1": {
+          "DEFAULT": "#14291c",
+          "foreground": "#fff"
+        },
+        "content2": {
+          "DEFAULT": "#295237",
+          "foreground": "#fff"
+        },
+        "content3": {
+          "DEFAULT": "#3d7a53",
+          "foreground": "#fff"
+        },
+        "content4": {
+          "DEFAULT": "#52a36e",
+          "foreground": "#000"
+        },
+        "focus": "#66cc8a",
+        "overlay": "#ffffff"
+      }
+    }
+  },
+  "layout": {
+    "disabledOpacity": "0.5"
+  }
+}

examples/chat/themed_chat.py

@@ -0,0 +1,49 @@
+"""
+Example chat implementation with custom theme support.
+
+SUPER EASY USAGE:
+1. Go to https://www.heroui.com/themes
+2. Create your theme
+3. Copy the JSON configuration
+4. Save it as 'my-theme.json'
+5. Run: ragbits api run examples.chat.themed_chat:MyChat --theme my-theme.json
+
+That's it! No manual conversion needed!
+"""
+
+from collections.abc import AsyncGenerator
+
+from pydantic import BaseModel
+
+from ragbits.chat.interface import ChatInterface
+from ragbits.chat.interface.types import ChatContext, ChatResponse
+from ragbits.core.llms.litellm import LiteLLM
+from ragbits.core.prompt import Prompt
+
+
+class SimplePromptInput(BaseModel):
+    """Input for the simple chat prompt."""
+
+    query: str
+
+
+class SimplePrompt(Prompt[SimplePromptInput]):
+    """Simple chat prompt with theme support."""
+
+    system_prompt = "You are a helpful assistant with a custom theme."
+    user_prompt = "User: {{ query }}"
+
+
+class MyChat(ChatInterface):
+    """Chat interface implementation with custom theme support."""
+
+    def __init__(self):
+        self.llm = LiteLLM("gpt-3.5-turbo")
+
+    async def chat(self, message: str, history: list[dict], context: ChatContext) -> AsyncGenerator[ChatResponse, None]:
+        """Handle chat messages and return streaming responses."""
+        prompt_input = SimplePromptInput(query=message)
+        prompt = SimplePrompt(prompt_input)
+        response = await self.llm.generate(prompt)
+
+        yield ChatInterface.create_text_response(str(response))

packages/ragbits-chat/CHANGELOG.md

@@ -4,6 +4,8 @@
 - Add automatic topic extraction to be used as conversation title with ability to edit in the client side (#840)
 - Add todo list component to the UI, add support for todo events in API (#827)
 
+- customizable HeroUI theme (#841)
+
 ## 1.3.0 (2025-09-11)
 
 ### Changed