Updated docs related to themes

docs/docs/examples/0011-theme-customization.mdx

@@ -4,32 +4,30 @@ sidebar_label: 'Theme Customization'
 
 import {CodeEditor} from '@site/src/components/CodeEditor/CodeEditor';
 import Link from '@docusaurus/Link';
-import customCss from './0011-theme-customization/example-custom-button-color/theme-overrides.tsx';
 import app from './0011-theme-customization/example-custom-button-color/app';
 import send from './0011-theme-customization/example-custom-button-color/send';
 import personas from './0011-theme-customization/example-custom-button-color/personas';
+import themeVariables from './0011-theme-customization/example-custom-button-color/theme-variables';
 
 # Theme Customization
 
 ---
 
-`NLUX` comes with 2 themes: `nova` and `unstyled`.<br />
-You can use `CSS` to customize the themes to match your brand or design requirements.
+`NLUX` comes with 2 themes: `nova` and `unstyled`.
 
-In the example below, we changed the following details in the `unstyled` theme:
+In the example below, we style the `unstyled` theme by changing the following details:
 
-* Component background color set `#060524` (Dark blue)
-* Assistant message background color set to `#5F9EA0` (Cadet blue)
-* User message background color set to `#DC143C` (Crimson)
+* Border with set to `0`
 * Border radius set to `5px`
 * Send icon replaced with a custom SVG icon.
-
-We also set the `conversationOptions`'s layout to `bubbles` to display the messages in a bubble layout.
+* User message background color set to `#dc143c` (Crimson)
+* Assistant message background color set to `#00bfff` (Cadet blue)
+* Component background color set `#060524` (Dark blue) or `#f9f9f9` (Light gray) depending on dark/light mode.
 
 <CodeEditor
     files={{
         'App.tsx': app,
-        'theme-overrides.css': customCss,
+        'theme-variables.css': themeVariables,
         'personas.tsx': personas,
         'send.ts': send,
     }}

docs/docs/examples/0011-theme-customization/example-custom-button-color/app.tsx

@@ -5,17 +5,19 @@ import { personas } from "./personas";
 // We import the unstyled CSS that gives us the basic layout and structure
 import "@nlux/themes/unstyled.css";
 
-// We add theme variable overrides in theme-overrides.css
-import "./theme-overrides.css";
+// We set the variables in a separate CSS file
+import "./theme-variables.css";
 
 export default () => {
   const adapter = useAsStreamAdapter(send, []);
   return (
     <AiChat
-      conversationOptions={{ layout: "bubbles" }}
-      displayOptions={{ colorScheme: "dark" }}
-      personaOptions={personas}
-      adapter={adapter}
+      displayOptions={{
+        themeId: "MyBrandName",
+        colorScheme: "${colorMode}"
+      }}
+      personaOptions={ personas }
+      adapter={ adapter }
     />
   );
 };

docs/docs/examples/0011-theme-customization/example-custom-button-color/theme-variables.tsx

@@ -0,0 +1,61 @@
+export default `.nlux-theme-MyBrandName[data-color-scheme='light'] {
+    --nlux-ChatRoom--BackgroundColor: #f9f9f9;
+}
+
+.nlux-theme-MyBrandName[data-color-scheme='dark'] {
+    --nlux-ChatRoom--BackgroundColor: #060524;
+}
+
+.nlux-theme-MyBrandName {
+
+    /* Override top-level chat room colors */
+    --nlux-ChatRoom--BorderColor: #24233d;
+    --nlux-ChatRoom-Divider--Color: #24233d;
+    --nlux-ChatRoom--TextColor: #ffffff;
+
+    /* Override message bubble colors */
+    --nlux-AiMessage--BackgroundColor: #00bfff;
+    --nlux-HumanMessage--BackgroundColor: #dc143c;
+
+    /* Override border width */
+    --nlux-ChatRoom--BorderWidth: 0;
+    --nlux-SubmitButton--BorderWidth: 0;
+    --nlux-PromptInput--BorderWidth: 0;
+    --nlux-ChatItem-Avatar--BorderWidth: 0;
+    --nlux-ChatItem-Message-BubbleLayout--BorderWidth: 0;
+    --nlux-ConversationStarter--BorderWidth: 0;
+
+    /* Override border radius */
+    --nlux-ChatRoom--BorderRadius: 5px;
+    --nlux-PromptInput--BorderRadius: 5px 0 0 5px;
+    --nlux-SubmitButton--BorderRadius: 0 5px 5px 0;
+    --nlux-ChatItem-Avatar--BorderRadius: 5px;
+    --nlux-ChatItem-Message-BubbleLayout--BorderRadius: 5px;
+    --nlux-ConversationStarter--BorderRadius: 5px;
+
+    /* Override input colors */
+    --nlux-PromptInput--BackgroundColor: #24233d;
+    --nlux-PromptInput-Active--BackgroundColor: #24233d;
+    --nlux-PromptInput-Disabled--BackgroundColor: #24233d;
+
+    /* Gap between submit button and input */
+    --nlux-Composer--Gap: 0;
+
+    /* Override submit button colors */
+    --nlux-SubmitButton--BackgroundColor: #24233d;
+    --nlux-SubmitButton-Active--BackgroundColor: #24233d;
+    --nlux-SubmitButton-Disabled--BackgroundColor: #24233d;
+
+    /* Conversation starter colors */
+    --nlux-ConversationStarter--BackgroundColor: #24233d;
+
+    /* Override icon for the send button */
+    --nlux-send-icon: url('data:image/svg+xml,\\
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" \\
+        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\\
+      <circle cx="12" cy="12" r="10"/>\\
+      <path d="M16 12l-4-4-4 4M12 16V9"/>\\
+    </svg>\\
+  ');
+}
+`;

docs/docs/learn/008-customize-theme.mdx

@@ -9,7 +9,7 @@ import {CodeEditor} from '@site/src/components/CodeEditor/CodeEditor';
 import app from './_005-customize-theme/example-custom-button-color/app';
 import adapter from './_005-customize-theme/example-custom-button-color/adapter';
 import personas from './_005-customize-theme/example-custom-button-color/personas';
-import themeOverrides from './_005-customize-theme/example-custom-button-color/theme-overrides';
+import themeVariables from './_005-customize-theme/example-custom-button-color/theme-variables';
 
 import ThemeIdReactJs from './_005-customize-theme/#react/themeId.mdx';
 import ThemeIdJavaScript from './_005-customize-theme/#js/themeId.mdx';
@@ -18,11 +18,13 @@ import ThemeIdJavaScript from './_005-customize-theme/#js/themeId.mdx';
 
 ---
 
-`NLUX` comes with a default theme called `Nova` and an `Unstyled` theme that provides a basic look and layout for the
+`NLUX` comes with a default theme called `nova` and an `unstyled` theme that provides a basic look and layout for the
 chat interface with no styling.
 
-If you would like to fully customize the look and feel of the chat interface, we recommend that you import the `Unstyled`
-theme and override its variables.
+If you would like to fully customize the look and feel of the chat interface, you can import the `unstyled`
+theme and set the CSS variables that you want to override.
+
+---
 
 ## Customizing The Unstyled Theme
 
@@ -32,15 +34,31 @@ this CSS file in your HTML file or in your JavaScript/TypeScript file. You will
 
 <PlatformSelector reactJs={ThemeIdReactJs} javascript={ThemeIdJavaScript}/>
 
+This will enable setting CSS variables via the following CSS selectors:
+
+```css
+.nlux-theme-MyBrandName {
+    /* Theme variables to set, with values that do not depend on color scheme */
+}
+
+.nlux-theme-MyBrandName[data-color-scheme='light'] {
+    /* Values specific to light mode */
+}
+
+.nlux-theme-MyBrandName[data-color-scheme='dark'] {
+    /* Values specific to dark mode */
+}
+```
+
 ---
 
-## Variables To Override
+## Setting Theme Variables
 
-You can find **all the possible variables** that can be overridden in the following files on GitHub:
+You can find **all the possible variables** that can be set in the following files on GitHub:
 * [`colors.css`](https://github.com/nlkitai/nlux/blob/latest/packages/css/themes/src/dev/colors.css) All the colors
 that can be overridden.
 * [`layout.css`](https://github.com/nlkitai/nlux/blob/latest/packages/css/themes/src/dev/layout.css) All the other
-variables that can be overridden, including layout, font size and family, border radius, etc.
+variables that can be set, including layout, font size and family, border radius, etc.
 
 ---
 
@@ -57,7 +75,7 @@ In the example below, we changed the following details in the `unstyled` theme:
 <CodeEditor
     files={{
         'App.tsx': app,
-        'theme-overrides.css': themeOverrides,
+        'theme-variables.css': themeVariables,
         'personas.tsx': personas,
         'adapter.ts': adapter,
     }}
@@ -69,7 +87,7 @@ In the example below, we changed the following details in the `unstyled` theme:
 
 :::info
 You can change code in the live code editor in this example.<br />
-Try updating `theme-overrides.css` and see the changes in the chatbot above.
+Try updating `theme-variables.css` and see the changes in the chatbot above.
 :::
 
 ---
@@ -81,7 +99,7 @@ Try updating `theme-overrides.css` and see the changes in the chatbot above.
 > ### CSS Selector
 
 You only need to provide one CSS selector `.nlux-AiChat-root` which is the root element of the chat interface.<br />
-All the overrides should go inside this selector:
+All the variables should be set under theme-specific CSS selectors.
 
 ```css
 .nlux-AiChat-root {
@@ -181,11 +199,11 @@ The `url` function is used to provide the SVG icon as a data URL.
 You can add the following to your HTML file to import the relevant CSS files:
 
 ```html
-<link rel="stylesheet" href="./theme-overrides.css" />
+<link rel="stylesheet" href="./theme-variables.css" />
 ```
 
 or if you are using a bundler that's configured to load CSS, you can just import the CSS file in your JSX/TSX file:
 
 ```js
-import './theme-overrides.css';
+import './theme-variables.css';
 ```

docs/docs/learn/_005-customize-theme/#js/themeId.mdx

@@ -1,5 +1,3 @@
 ```tsx
-const aiChat = createAiChat().withDisplayOptions({
-    themeId: 'ciel'
-});
+const aiChat = createAiChat().withDisplayOptions({ themeId: 'MyBrandName' });
 ```

docs/docs/learn/_005-customize-theme/#react/themeId.mdx

@@ -1,5 +1,3 @@
 ```tsx
-<AiChat displayOptions={{
-    themeId: 'ciel'
-}} />
+<AiChat displayOptions={{ themeId: 'MyBrandName' }} />
 ```

docs/docs/learn/_005-customize-theme/example-custom-button-color/app.tsx

@@ -1,20 +1,24 @@
 export default (colorMode: 'dark' | 'light') => `import {useMemo} from 'react';
 import {AiChat} from '@nlux/react';
-import '@nlux/themes/nova.css';
 import {streamAdapter} from './adapter';
 import {personas} from './personas';
 
-// Theme variable overrides are defined in theme-overrides.css
-import './theme-overrides.css';
+// We import the unstyled CSS that gives us the basic layout and structure
+import "@nlux/themes/unstyled.css";
+
+// We set the variables in a separate CSS file
+import "./theme-variables.css";
 
 export default () => {
   const adapter = useMemo(() => streamAdapter, []);
   return (
     <AiChat
-      conversationOptions={{layout: 'bubbles'}}
-      displayOptions={{colorScheme: 'dark'}}
-      personaOptions={personas}
-      adapter={adapter}
+      displayOptions={{
+          themeId: "MyBrandName",
+          colorScheme: "${colorMode}"
+      }}
+      personaOptions={ personas }
+      adapter={ adapter }
     />
   );
 };`;