Aux couleurs de votre marque

Où changer le nom du tableau de bord, ses métadonnées, son logo, ses icônes, ses couleurs, ses polices et ses images.

Pour le pack Front + Back

Chaque chemin ci-dessous est dans le dossier du tableau de bord : front-end dans le Full Stack, le dossier lui-même dans le pack Admin Dashboard. Lancez yarn dev pendant vos modifications : la page se recharge à chaque enregistrement.

Pour changer	Modifiez
Le nom, les métadonnées de la page, ainsi que le nom et la version du pied de page	`src/config/brand.config.ts`
Le logo	`public/assets/images/logo-for-lightmode.png` et `logo-for-darkmode.png`
Les icônes	`src/app/favicon.ico`, `icon0.svg`, `icon1.png`, `apple-icon.png`, et les deux `web-app-manifest-*.png` dans `public/`
Les couleurs	`src/styles/theme-variables.css`
La police arabe	`src/app/layout.tsx` et `src/styles/base.css`
Les mots à l'écran et les titres des onglets	`messages/<namespace>/en.json` et `ar.json`
L'adresse du site	`NEXT_PUBLIC_BASE_URL` dans `.env`, ou un argument de build Docker

Nom et métadonnées

Un seul objet, BRAND_CONFIG dans src/config/brand.config.ts, contient la marque en anglais et en arabe là où une personne la lit. Le nom est Aniq Dashboard par défaut.

Champ	Utilisé pour
`name`	Les titres des onglets du navigateur (`Users \| Aniq Dashboard`) et le pied de page du tableau de bord
`company`	Le pied de page du tableau de bord, après « by », et les données structurées Organization dans l'en-tête de la page
`version`	La version dans le pied de page
`logo.icon`, `logo.alt`	L'icône dans les données structurées et le logo image de la barre latérale
`meta.title`, `meta.description`, `meta.keywords`, `meta.author`	Les métadonnées de la page
`meta.ogImage`, `meta.twitterImage`	L'image d'aperçu quand un lien est partagé. Placez le fichier dans `public/` et donnez son chemin.
`theme.light`, `theme.dark`	La couleur de la barre d'adresse du navigateur dans chaque mode
`manifest`	Le nom, le nom court, les couleurs et les icônes de l'application installée
`links`, `contact`	Les données structurées Organization. Retirez ce que vous n'avez pas.

Le logo

Le logo de la barre latérale et de l'en-tête est une image de fond qui suit le thème : public/assets/images/logo-for-lightmode.png en mode clair et logo-for-darkmode.png en mode sombre. Remplacez les deux fichiers en gardant les noms, ou faites pointer --logo-bg-image vers d'autres fichiers dans src/styles/theme-variables.css, une fois dans le bloc clair et une fois dans le bloc sombre.

Icônes

Fichier	Description
`src/app/favicon.ico`	L'icône de l'onglet du navigateur
`src/app/icon0.svg`, `src/app/icon1.png`	Les icônes que Next.js lie dans l'en-tête de la page
`src/app/apple-icon.png`	L'icône sur l'écran d'accueil d'un iPhone ou d'un iPad
`public/web-app-manifest-192x192.png`, `public/web-app-manifest-512x512.png`	Les icônes de l'application installée, listées dans `manifest.icons`

Couleurs

Chaque couleur est une variable CSS dans src/styles/theme-variables.css, définie une fois pour le mode clair (:root) et une fois pour le mode sombre. La couleur de la marque est --primaryColor, avec --primaryColorHover ; les surfaces, les bordures et le texte ont leurs propres variables dans le même fichier. Changez une valeur là et chaque écran suit.

src/styles/theme-variables.css

--primaryColor: #2c2c2c;
--primaryColorHover: #1a1a1a;

Les composants utilisent les variables sous la forme bg-[var(--surface)], text-[var(--text-muted)] et ainsi de suite, un nouveau composant garde donc les deux thèmes s'il fait de même.

Polices

Le texte anglais utilise la pile de polices du système. Les pages arabes utilisent IBM Plex Sans Arabic, chargée depuis Google Fonts via next/font dans src/app/layout.tsx et appliquée dans src/styles/base.css quand la page est en arabe. La police est téléchargée au build puis servie par l'application elle-même. Pour utiliser une autre police, importez-la depuis next/font/google dans layout.tsx à sa place et gardez le nom variable, --font-sans-arabic.

Images

Fichier	Où il apparaît
`public/assets/images/login/login.png`	L'illustration de la page de connexion
`public/assets/images/avatar/sphere-light.png`, `sphere-dark.png`	L'avatar de l'assistant IA à côté de ses réponses
`public/assets/images/avatar/person/*.png`, `public/assets/images/project/project.png`	Les photos des admins, utilisateurs et projets d'exemple

Textes et titres de page

Chaque mot à l'écran vient des fichiers de messages dans messages/<namespace>/en.json et ar.json. Les titres des onglets du navigateur viennent de messages/metadata/<locale>.json et s'affichent sous la forme du titre de la page suivi du nom. Modifiez les deux langues quand vous changez un texte.

Langues

Liste de vérification

Noms, métadonnées et liens dans src/config/brand.config.ts.
NEXT_PUBLIC_BASE_URL réglé sur votre adresse.
Les deux fichiers de logo.
Les icônes dans src/app/ et public/.
--primaryColor et les autres couleurs dans src/styles/theme-variables.css.
Les textes dans messages/, dans les deux langues.