chore: update readme for style customization

Author: damlayildiz

README.md

@@ -70,18 +70,6 @@ function App() {
 </script>
 ```
 
-**With CSS custom properties for theming:**
-
-```html
-<docs-chatbot
-  search-url="your-edge-function-url"
-  api-key="your-api-key"
-  title="Your Docs"
-  style="--primary: #f5426c; --primary-foreground: #ffffff"
->
-</docs-chatbot>
-```
-
 ## Props / Configuration
 
 ### React Component
@@ -104,3 +92,88 @@ function App() {
 | `title`                   | Yes      | Title displayed in the chatbot header                                                                                      |
 | `empty-state-title`       | No       | Main heading shown before the first message                                                                                |
 | `empty-state-description` | No       | Subtext shown below the empty state title                                                                                  |
+
+## Customizing Theme
+
+You can customize the chatbot's appearance by overriding CSS variables.
+
+### Available CSS Variables
+
+```css
+:root {
+  /* Border radius */
+  --docs-chatbot-radius
+
+  /* Colors */
+  --docs-chatbot-background
+  --docs-chatbot-foreground
+  --docs-chatbot-card
+  --docs-chatbot-card-foreground
+  --docs-chatbot-popover
+  --docs-chatbot-popover-foreground
+  --docs-chatbot-primary
+  --docs-chatbot-primary-foreground
+  --docs-chatbot-secondary
+  --docs-chatbot-secondary-foreground
+  --docs-chatbot-muted
+  --docs-chatbot-muted-foreground
+  --docs-chatbot-accent
+  --docs-chatbot-accent-foreground
+  --docs-chatbot-destructive
+  --docs-chatbot-border
+  --docs-chatbot-input
+  --docs-chatbot-ring
+}
+```
+
+### Usage Examples
+
+**In your global CSS (recommended):**
+
+```css
+/* In your main CSS file, import the chatbot styles first */
+@import "@sqliteai/docs-chatbot/style.css";
+
+/* Then override the variables */
+:root {
+  --docs-chatbot-primary: oklch(0.6 0.2 0);
+  --docs-chatbot-primary-foreground: oklch(1 0 0);
+  --docs-chatbot-border: oklch(0.85 0 0);
+}
+```
+
+**In React:**
+
+```tsx
+import { DocsChatbot } from "@sqliteai/docs-chatbot";
+import "./styles.css"; // Your CSS file with overrides
+
+function App() {
+  return (
+    <DocsChatbot
+      searchUrl="your-edge-function-url"
+      apiKey="your-api-key"
+      title="Your Docs"
+    />
+  );
+}
+```
+
+**In Vanilla JavaScript / HTML:**
+
+```html
+<style>
+  docs-chatbot {
+    --docs-chatbot-primary: oklch(0.6 0.2 0);
+    --docs-chatbot-primary-foreground: oklch(1 0 0);
+    --docs-chatbot-border: oklch(0.85 0 0);
+  }
+</style>
+
+<docs-chatbot
+  search-url="your-edge-function-url"
+  api-key="your-api-key"
+  title="Your Docs"
+>
+</docs-chatbot>
+```

examples/react-app/src/App.tsx

@@ -1,5 +1,5 @@
 import { DocsChatbot } from "../../../dist/esm/index.esm.js";
-import "../../../dist/esm/docs-chatbot.css";
+import "./styles.css";
 
 function App() {
   return (

examples/react-app/src/styles.css

@@ -0,0 +1,7 @@
+@import "../../../dist/esm/docs-chatbot.css";
+
+:root {
+  --docs-chatbot-primary: oklch(70.427% 0.13219 65.637);
+  --docs-chatbot-primary-foreground: oklch(1 0 0);
+  --docs-chatbot-border: oklch(0.85 0 0);
+}

examples/vanilla-js/index.html

@@ -16,6 +16,13 @@
     <script src="../../dist/umd/docs-chatbot.min.js"></script>
     <script src="./config.js"></script>
 
+    <style>
+      docs-chatbot {
+        --docs-chatbot-primary: oklch(65.698% 0.12717 240.619);
+        --docs-chatbot-primary-foreground: oklch(1 0 0);
+      }
+    </style>
+
     <docs-chatbot
       title="SQLite Cloud Docs"
       empty-state-title="Ask questions about SQLite Cloud"
@@ -27,10 +34,6 @@
       const chatbot = document.querySelector("docs-chatbot");
       chatbot.setAttribute("search-url", window.ChatbotConfig.searchUrl);
       chatbot.setAttribute("api-key", window.ChatbotConfig.apiKey);
-      chatbot.setAttribute(
-        "style",
-        "--docs-chatbot-primary: #f5426c; --docs-chatbot-primary-foreground: #ffffff"
-      );
     </script>
   </body>
 </html>