# Theming Guide This project uses **Tailwind CSS v4** with **daisyUI 5** for most UI components. Themes are implemented using daisyUI's custom theme feature. Each theme defines CSS variables that control the colors and styles used by daisyUI classes. ## Adding a New Theme 1. Open `FrontEnd/css/themes.css` and duplicate one of the existing theme blocks created with `@plugin "daisyui/theme"`. 2. Change the `name` value to the new theme name. This is the value that should be used with the `data-theme` attribute. 3. Adjust the `--color-*` variables to match the desired design. All variables listed in the sample themes are required. 4. Save the file. No build step is needed because Tailwind and daisyUI are loaded from a CDN at runtime. 5. Update the database if you want the new theme to be selectable by default (see the `settings`, `customer_settings` and `user_settings` tables). ## Theme Resolution Order 1. **User theme** – stored in the `user_settings` table with the setting name `theme`. 2. **Customer theme** – stored in `customer_settings` with the same setting name. 3. **Global default** – the `settings` table entry `default_theme`. The helper class `Utils\ThemeManager` handles retrieving the correct theme based on this hierarchy. See also [`HierarchicalConfiguration.md`](HierarchicalConfiguration.md) for an overview of settings precedence. ## Applying the Theme Include `themes.css` and the script `public/js/theme.js` on your pages. The script fetches the current user's theme from `/api/theme/current` and sets the `data-theme` attribute on the `` element. ```html ``` This setup allows administrators and users to select among the predefined themes. Support for fully custom themes can be added later by extending the `ThemeManager`.