@@ -8,9 +8,9 @@ Note: In this document, “frontend” refers to the folder at services/frontend
88
99The RAG Template frontend supports several customization options:
1010
11- - ** Bot Name ** : Customize the AI assistant's name in chat messages
12- - ** Logo/Branding ** : Replace the default logo with your organization's branding
13- - ** Theme System ** : Switch between light and dark modes with user preference persistence
11+ - ** Bot name ** and ** initial message **
12+ - ** Logos ** for light and dark mode
13+ - ** Brand colors and themes ** (Tailwind v4 + daisyUI v5)
1414
1515## Configuration Options
1616
@@ -107,40 +107,26 @@ VITE_UI_LOGO_PATH_DARK=/assets/company-logo-dark.svg
107107VITE_UI_LOGO_PATH=/assets/company-logo.svg
108108```
109109
110- ### Theme System
110+ ### Theme System (Tailwind v4 + daisyUI v5)
111111
112- The application supports a flexible theme system with user preference persistence.
112+ The frontend uses Tailwind v4 with daisyUI v5. In the following, we describe how to customize the theme using central CSS (recommended for brand colors shared by both apps):
113113
114- ** Available Themes:**
114+ - File: ` services/frontend/libs/ui-styles/src/tailwind.css `
115+ - This file loads Tailwind v4 and defines daisyUI themes via CSS ` @plugin ` blocks.
116+ - Update semantic tokens under the ` @plugin "daisyui/theme" ` blocks:
115117
116- - ` light ` : Light mode (default)
117- - ` dark ` : Dark mode
118-
119- ** Theme Configuration:**
120-
121- 1 . ** Set Default Theme:**
122-
123- ``` bash
124- # Users will see dark mode by default
125- VITE_UI_THEME_DEFAULT=dark
126- ```
127-
128- 1 . ** Configure Available Options:**
129-
130- ``` bash
131- # Only allow light mode (remove theme toggle)
132- VITE_UI_THEME_OPTIONS=light
133-
134- # Support both themes (default)
135- VITE_UI_THEME_OPTIONS=light,dark
136- ```
118+ ``` css
119+ --color-primary: #a90303; /* CTA/buttons */
120+ --color-primary-content: #ffffff; /* readable text on primary */
121+ --color-base-100: #ffffff; /* page background */
122+ --color-base-200: #EDEDED; /* cards */
123+ ```
137124
138- ** Theme Behavior: **
125+ Theme behavior:
139126
140- - Theme preference is saved in browser's localStorage
141- - Theme persists across browser sessions
142- - Theme toggle button appears only when multiple options are available
143- - Manual theme switching overrides the default setting
127+ - Default theme and options are set by env vars: ` VITE_UI_THEME_DEFAULT ` , ` VITE_UI_THEME_OPTIONS `
128+ - The selected theme is stored in ` localStorage ` under ` app-theme `
129+ - Theme switching updates ` html[data-theme] ` so daisyUI variables apply
144130
145131## Development Setup
146132
@@ -217,7 +203,7 @@ For Docker deployments, the frontend uses a special script (services/frontend/en
217203
218204### Adding Custom Themes
219205
220- To add custom themes beyond light/dark:
206+ To add themes beyond light/dark, update both the settings and the theme source :
221207
2222081. **Update the settings configuration** in [services/frontend/libs/shared/settings.ts](../services/frontend/libs/shared/settings.ts):
223209
@@ -227,31 +213,24 @@ To add custom themes beyond light/dark:
227213 ui : {
228214 theme : {
229215 default : " light" ,
230- options : ["light", "dark", "custom "], // Add your theme
216+ options : ["light", "dark", "brand-red "], // Add your theme
231217 },
232218 },
233219 };
234220 ```
235221
236- 1 . ** Configure DaisyUI themes** in [ services/frontend/tailwind.config.js] ( ../services/frontend/tailwind.config.js ) :
237-
238- ``` javascript
239- module .exports = {
240- daisyui: {
241- themes: [
242- " light" ,
243- " dark" ,
244- {
245- custom: {
246- " primary" : " #your-color" ,
247- " secondary" : " #your-color" ,
248- // ... more theme colors
249- }
250- }
251- ],
252- },
253- };
254- ```
222+ 2 . Define the theme either e.g. in CSS (recommended for shared branding):
223+
224+ CSS (Tailwind v4):
225+
226+ ``` css
227+ @plugin "daisyui/theme" {
228+ name: "brand-red ";
229+ --color-primary: #a90303;
230+ --color-primary-content: #ffffff;
231+ /* ... other tokens ... */
232+ }
233+ ```
255234
256235### Internationalization
257236
0 commit comments