Customize

Customization Guide

Use the existing asset, setting, and routing conventions to personalize the template without changing its layout foundation.

Branding and user images

Change	Location	Guidance
Full logo	`src/assets/images/logos/logo-light.png` `logo-dark.png`	Replace with matching full-width assets for light and dark surfaces.
Collapsed logo	`logo-icon.png`, `logo-icon-light.png`, `logo-icon-dark.png`	Use the symbol-only version; preserve transparency and aspect ratio.
Favicon	`src/assets/images/logos/favicon.png` `public/favicon.png`, `public/favicon.ico`	Replace the source and static public copies with the icon-only mark.
User avatars	`src/assets/images/users/`	Replace image files with the same filenames to retain existing references and dimensions.

Theme and layout

Open src/lib/nova-settings.ts to review settings, default mode, skins, sidebar size/color, header mode, and width.
Open src/styles.css to adjust semantic OKLCH tokens and the accent ramps.
Use the existing Customizer UI to confirm your changes work in light, dark, fluid, boxed, compact, collapsed, LTR, and RTL states.

Add a page and menu item

// 1. Create a matching file under src/routes/, for example:
src/routes/reports.tsx

// 2. Add a matching navigation item in:
src/data/navigation.ts

// 3. Keep the page UI in the appropriate src/components/ folder.

Do not edit generated outputMake changes under src/. Build output is regenerated by npm run build.

Settings and defaults

Import settings from @/lib/vexui-settings. It re-exports the implementation in src/lib/nova-settings.ts. Defaults are light mode, sapphire skin, LTR, comfortable density, default light sidebar, fixed header, and fluid width. Preferences use the vexui-admin-settings localStorage key.

LTR and RTL

Open Customize → Layout direction and choose LTR or RTL.
The document direction and layout update immediately; the browser saves the choice.
Reset to defaults restores LTR along with the other defaults.
Direction changes layout and control navigation, not the language of page content.
Use logical utilities such as ms-*, me-*, ps-*, pe-*, start-*, and end-*. Use rtl: only for directional icons or deliberate exceptions.

Customize new workspaces

Update shared sample records in each feature folder and dedicated components for attendance, employees, leave requests, doctors, wards, insights, conversations, predictions, and model settings. Preserve semantic colors and logical spacing in new cards, dialogs, and charts. Regenerate the documentation after changing routes or navigation.