diff --git a/docs/docs/examples/0011-theme-customization.mdx b/docs/docs/examples/0011-theme-customization.mdx index 567cf541..ffa4aeb9 100644 --- a/docs/docs/examples/0011-theme-customization.mdx +++ b/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`.
-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. { const adapter = useAsStreamAdapter(send, []); return ( ); }; diff --git a/docs/docs/examples/0011-theme-customization/example-custom-button-color/theme-overrides.tsx b/docs/docs/examples/0011-theme-customization/example-custom-button-color/theme-overrides.tsx deleted file mode 100644 index 3858dbdb..00000000 --- a/docs/docs/examples/0011-theme-customization/example-custom-button-color/theme-overrides.tsx +++ /dev/null @@ -1,48 +0,0 @@ -export default `.nlux-AiChat-root { - /* Override top-level chat room colors */ - --nlux-ChatRoom--BackgroundColor: #060524; - --nlux-ChatRoom--BorderColor: #24233d; - --nlux-ChatRoom-Divider--Color: #24233d; - --nlux-ChatRoom--BorderWidth: 2px; - - /* 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; - - /* 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; - - /* 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; - - /* Override icon for the send button */ - --nlux-send-icon: url('data:image/svg+xml,\\ - \\ - \\ - \\ - \\ - '); -} -`; diff --git a/docs/docs/examples/0011-theme-customization/example-custom-button-color/theme-variables.tsx b/docs/docs/examples/0011-theme-customization/example-custom-button-color/theme-variables.tsx new file mode 100644 index 00000000..1b6084c6 --- /dev/null +++ b/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,\\ + \\ + \\ + \\ + \\ + '); +} +`; diff --git a/docs/docs/learn/008-customize-theme.mdx b/docs/docs/learn/008-customize-theme.mdx index 3a883736..b18b15e0 100644 --- a/docs/docs/learn/008-customize-theme.mdx +++ b/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 +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: -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.
-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 - + ``` 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'; ``` diff --git a/docs/docs/learn/_005-customize-theme/#js/themeId.mdx b/docs/docs/learn/_005-customize-theme/#js/themeId.mdx index 533b0544..a5093fcc 100644 --- a/docs/docs/learn/_005-customize-theme/#js/themeId.mdx +++ b/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' }); ``` diff --git a/docs/docs/learn/_005-customize-theme/#react/themeId.mdx b/docs/docs/learn/_005-customize-theme/#react/themeId.mdx index 9d317c1d..4439ae5e 100644 --- a/docs/docs/learn/_005-customize-theme/#react/themeId.mdx +++ b/docs/docs/learn/_005-customize-theme/#react/themeId.mdx @@ -1,5 +1,3 @@ ```tsx - + ``` diff --git a/docs/docs/learn/_005-customize-theme/example-custom-button-color/app.tsx b/docs/docs/learn/_005-customize-theme/example-custom-button-color/app.tsx index 217c43ef..76bce8fd 100644 --- a/docs/docs/learn/_005-customize-theme/example-custom-button-color/app.tsx +++ b/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 ( ); };`; diff --git a/docs/docs/learn/_005-customize-theme/example-custom-button-color/theme-overrides.tsx b/docs/docs/learn/_005-customize-theme/example-custom-button-color/theme-overrides.tsx deleted file mode 100644 index 2acc3133..00000000 --- a/docs/docs/learn/_005-customize-theme/example-custom-button-color/theme-overrides.tsx +++ /dev/null @@ -1,41 +0,0 @@ -export default `.my-theme.nlux-AiChat-root.nlux-theme-nova { - /* Override top-level chat room colors */ - --nlux-ChatRoom--BackgroundColor: #0c0c0e; - --nlux-ChatRoom--BorderColor: #24233d; - --nlux-ChatRoom-Divider--Color: #24233d; - --nlux-ChatRoom--BorderWidth: 2px; - - /* Override message bubble colors */ - --nlux-AiMessage--BackgroundColor: #00BFFF; - --nlux-HumanMessage--BackgroundColor: #DC143C; - - /* Override border radius */ - --nlux-ChatRoom--BorderRadius: 5px; - --nlux-ChatItem-Avatar--BorderRadius: 5px; - --nlux-ChatItem-Message-BubbleLayout--BorderRadius: 5px; - --nlux-PromptInput--BorderRadius: 5px; - --nlux-SubmitButton--BorderRadius: 5px; - - /* Override input colors */ - --nlux-PromptInput--BackgroundColor: #161620; - --nlux-PromptInput-Active--BackgroundColor: #161620; - --nlux-PromptInput-Disabled--BackgroundColor: #161620; - - /* Override submit button colors */ - --nlux-SubmitButton--BackgroundColor: #161620; - --nlux-SubmitButton-Active--BackgroundColor: #24233d; - --nlux-SubmitButton-Disabled--BackgroundColor: #161620; - - /* Override icon for the send button */ - --nlux-send-icon: url('data:image/svg+xml,\\ - \\ - \\ - \\ - \\ - '); - - /* Gap between submit button and input */ - --nlux-Composer--Gap: 8px; -} -`; diff --git a/docs/docs/learn/_005-customize-theme/example-custom-button-color/theme-variables.tsx b/docs/docs/learn/_005-customize-theme/example-custom-button-color/theme-variables.tsx new file mode 100644 index 00000000..1b6084c6 --- /dev/null +++ b/docs/docs/learn/_005-customize-theme/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,\\ + \\ + \\ + \\ + \\ + '); +} +`; diff --git a/pipeline/npm/versions.json b/pipeline/npm/versions.json index eccf6b3a..dce18225 100644 --- a/pipeline/npm/versions.json +++ b/pipeline/npm/versions.json @@ -1,6 +1,6 @@ { "inherit": true, - "nlux": "2.7", + "nlux": "2.7.1", "peerDependencies": { "react": "18", "react-dom": "18" diff --git a/samples/aiChat/react/src/App.tsx b/samples/aiChat/react/src/App.tsx index e97a622f..be7b1bd6 100644 --- a/samples/aiChat/react/src/App.tsx +++ b/samples/aiChat/react/src/App.tsx @@ -23,7 +23,7 @@ import '@nlux-dev/highlighter/src/themes/stackoverflow/dark.css'; // import '@nlux-dev/themes/src/luna/main.css'; // import '@nlux-dev/themes/src/nova/main.css'; import '@nlux-dev/themes/src/unstyled/main.css'; -import './theme-overrides.css'; +import './theme-variables.css'; function App() { type ThemeId = 'nova' | 'luna' | 'unstyled'; diff --git a/samples/aiChat/react/src/theme-overrides.css b/samples/aiChat/react/src/theme-variables.css similarity index 97% rename from samples/aiChat/react/src/theme-overrides.css rename to samples/aiChat/react/src/theme-variables.css index 781023b4..68c137a2 100644 --- a/samples/aiChat/react/src/theme-overrides.css +++ b/samples/aiChat/react/src/theme-variables.css @@ -1,5 +1,5 @@ .nlux-AiChat-root[data-color-scheme='light'] { - --nlux-ChatRoom--BackgroundColor: white; + --nlux-ChatRoom--BackgroundColor: #f9f9f9; } .nlux-AiChat-root[data-color-scheme='dark'] {