diff --git a/.github/workflows/lint-and-test.yml b/.github/workflows/lint-and-test.yml
index d9dfdeee..902698e8 100644
--- a/.github/workflows/lint-and-test.yml
+++ b/.github/workflows/lint-and-test.yml
@@ -27,7 +27,7 @@ jobs:
- name: Detect changes
id: changes
- uses: dorny/paths-filter@v2
+ uses: dorny/paths-filter@v3
with:
filters: |
services:
diff --git a/.gitignore b/.gitignore
index 574a8463..d2452241 100644
--- a/.gitignore
+++ b/.gitignore
@@ -158,3 +158,6 @@ dmypy.json
cython_debug/
**/.DS_Store
+
+# Nx workspace caches (frontend uses a nested Nx workspace)
+**/.nx/
diff --git a/docs/UI_Customization.md b/docs/UI_Customization.md
index ca3644fe..0af3a8a6 100644
--- a/docs/UI_Customization.md
+++ b/docs/UI_Customization.md
@@ -8,9 +8,9 @@ Note: In this document, “frontend” refers to the folder at services/frontend
The RAG Template frontend supports several customization options:
-- **Bot Name**: Customize the AI assistant's name in chat messages
-- **Logo/Branding**: Replace the default logo with your organization's branding
-- **Theme System**: Switch between light and dark modes with user preference persistence
+- **Bot name** and **initial message**
+- **Logos** for light and dark mode
+- **Brand colors and themes** (Tailwind v4 + daisyUI v5)
## Configuration Options
@@ -107,40 +107,26 @@ VITE_UI_LOGO_PATH_DARK=/assets/company-logo-dark.svg
VITE_UI_LOGO_PATH=/assets/company-logo.svg
```
-### Theme System
+### Theme System (Tailwind v4 + daisyUI v5)
-The application supports a flexible theme system with user preference persistence.
+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):
-**Available Themes:**
+- File: `services/frontend/libs/ui-styles/src/tailwind.css`
+- This file loads Tailwind v4 and defines daisyUI themes via CSS `@plugin` blocks.
+- Update semantic tokens under the `@plugin "daisyui/theme"` blocks:
-- `light`: Light mode (default)
-- `dark`: Dark mode
-
-**Theme Configuration:**
-
-1. **Set Default Theme:**
-
- ```bash
- # Users will see dark mode by default
- VITE_UI_THEME_DEFAULT=dark
- ```
-
-1. **Configure Available Options:**
-
- ```bash
- # Only allow light mode (remove theme toggle)
- VITE_UI_THEME_OPTIONS=light
-
- # Support both themes (default)
- VITE_UI_THEME_OPTIONS=light,dark
- ```
+```css
+--color-primary: #a90303; /* CTA/buttons */
+--color-primary-content: #ffffff; /* readable text on primary */
+--color-base-100: #ffffff; /* page background */
+--color-base-200: #EDEDED; /* cards */
+```
-**Theme Behavior:**
+Theme behavior:
-- Theme preference is saved in browser's localStorage
-- Theme persists across browser sessions
-- Theme toggle button appears only when multiple options are available
-- Manual theme switching overrides the default setting
+- Default theme and options are set by env vars: `VITE_UI_THEME_DEFAULT`, `VITE_UI_THEME_OPTIONS`
+- The selected theme is stored in `localStorage` under `app-theme`
+- Theme switching updates `html[data-theme]` so daisyUI variables apply
## Development Setup
@@ -217,7 +203,7 @@ For Docker deployments, the frontend uses a special script (services/frontend/en
### Adding Custom Themes
-To add custom themes beyond light/dark:
+To add themes beyond light/dark, update both the settings and the theme source:
1. **Update the settings configuration** in [services/frontend/libs/shared/settings.ts](../services/frontend/libs/shared/settings.ts):
@@ -227,31 +213,24 @@ To add custom themes beyond light/dark:
ui: {
theme: {
default: "light",
- options: ["light", "dark", "custom"], // Add your theme
+ options: ["light", "dark", "brand-red"], // Add your theme
},
},
};
```
-1. **Configure DaisyUI themes** in [services/frontend/tailwind.config.js](../services/frontend/tailwind.config.js):
-
- ```javascript
- module.exports = {
- daisyui: {
- themes: [
- "light",
- "dark",
- {
- custom: {
- "primary": "#your-color",
- "secondary": "#your-color",
- // ... more theme colors
- }
- }
- ],
- },
- };
- ```
+2. Define the theme either e.g. in CSS (recommended for shared branding):
+
+CSS (Tailwind v4):
+
+```css
+@plugin "daisyui/theme" {
+ name: "brand-red";
+ --color-primary: #a90303;
+ --color-primary-content: #ffffff;
+ /* ... other tokens ... */
+}
+```
### Internationalization
diff --git a/services/frontend/.gitignore b/services/frontend/.gitignore
index ade1c5f1..2e7c1398 100644
--- a/services/frontend/.gitignore
+++ b/services/frontend/.gitignore
@@ -37,4 +37,4 @@ testem.log
.DS_Store
Thumbs.db
-.nx/cache
\ No newline at end of file
+.nx/
diff --git a/services/frontend/apps/admin-app/Dockerfile b/services/frontend/apps/admin-app/Dockerfile
index cfaae0b0..9452d670 100644
--- a/services/frontend/apps/admin-app/Dockerfile
+++ b/services/frontend/apps/admin-app/Dockerfile
@@ -18,8 +18,6 @@ COPY --from=builder /usr/src/app/dist/apps/admin-app /app/frontend
COPY --from=builder /usr/src/app/dist/libs /app/frontend/libs
COPY ./services/frontend/default.nginx.conf /etc/nginx/conf.d/default.conf
-
-
COPY ./services/frontend/env.sh /app/env.sh
EXPOSE 8080
diff --git a/services/frontend/apps/admin-app/env.d.ts b/services/frontend/apps/admin-app/env.d.ts
index 64399764..f26577d4 100644
--- a/services/frontend/apps/admin-app/env.d.ts
+++ b/services/frontend/apps/admin-app/env.d.ts
@@ -1,8 +1,6 @@
///
-/* eslint-disable */
declare module '*.vue' {
-import type { DefineComponent } from 'vue';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const component: DefineComponent