Image de marque
Où se trouvent le nom, le logo, les icônes, les couleurs et les polices du produit, et quoi modifier pour en faire votre propre marque.
Pour le pack Full Stack
Où se trouve la marque
La marque se définit dans des fichiers, pas dans un écran de réglages. Les chemins sont relatifs à dashboard/.
| Élément | Emplacement |
|---|---|
| Nom, description, liens, contact | src/config/brand.config.ts |
| Le logo à côté du nom | src/components/icons/KinoraMark.tsx, dessiné en code plutôt qu'en fichier image |
| Favicon et icônes de l'application | src/app/ (favicon.ico, icon0.svg, icon1.png, apple-icon.png) ainsi que public/web-app-manifest-192x192.png et -512x512.png |
| Le crédit du pied de page | src/config/author.config.ts |
| Couleurs | src/styles/theme-variables.css |
| Polices | src/app/layout.tsx |
| Textes | messages/<namespace>/<locale>.json, et les libellés de la barre latérale dans src/layouts/dashboard/sidebar/config/navigationData.ts |
yarn dev affiche une modification immédiatement. Un build de production compile la marque dans l'application : relancez donc yarn build, ou docker compose up --build pour le pack Full Stack.
Le nom
Le produit est livré sous le nom Kinora (كينورا en arabe). Tout se trouve dans BRAND_CONFIG, dans src/config/brand.config.ts ; les champs de texte ont une valeur en et une valeur ar.
| Champ | Où il apparaît |
|---|---|
name | La barre latérale à côté du logo, la barre supérieure des pages de connexion, d'inscription et de mot de passe, le pied de page du tableau de bord, le titre de la carte d'accueil, la bannière d'analyse de l'activité et le créateur d'un parcours GPX exporté. |
version | Le pied de page du tableau de bord, après le nom. |
company | Le nom de l'organisation lu par les moteurs de recherche. |
meta.title, meta.description, meta.keywords, meta.author | Le titre de l'onglet du navigateur, ainsi que la description et les mots-clés de chaque page. |
meta.ogImage, meta.twitterImage | L'image affichée quand une page est partagée, un chemin sous public/. Les deux sont livrées avec l'icône d'application de 512 px. |
domain.url | L'adresse de base des métadonnées de partage. Elle est livrée avec https://yourdomain.com : indiquez la vôtre. |
theme.light, theme.dark | La couleur de la barre d'outils du navigateur sur téléphone. |
manifest | Le nom, les couleurs et les icônes de l'application installée. |
links, contact | Les informations sur l'organisation que lisent les moteurs de recherche. Elles pointent à la livraison vers l'éditeur du template : remplacez-les. |
Le nom est aussi écrit dans quelques messages : la carte de bienvenue dans messages/dashboard/en.json (« Welcome to Kinora ») et les salutations de l'assistant dans messages/ai-assistant/en.json (« Ask Kinora about… »), avec leurs jumeaux ar.json. Cherchez Kinora et كينورا dans les deux dossiers.
Le logo et les icônes
- Le logo, deux chevrons montants, est le SVG de
src/components/icons/KinoraMark.tsx. Il prend sa couleur du thème et reste donc correct en clair comme en sombre. Remplacez ses tracés par votre propre logo, ou affichez votre logo à sa place danssrc/layouts/dashboard/sidebar/components/SidebarBrand.tsxet sur la page de connexion (src/layouts/auth/login/components/AuthTopBar.tsxetAuthPanel.tsx). - L'icône de l'onglet du navigateur est
src/app/favicon.icoavecicon0.svgeticon1.png;apple-icon.pngest l'icône de l'écran d'accueil de l'iPhone. - L'application installée utilise
public/web-app-manifest-192x192.pngetpublic/web-app-manifest-512x512.png, quebrand.config.tsutilise aussi comme image de partage. Gardez les noms de fichiers, ou changez les chemins dansbrand.config.ts.
public/assets/images/logo-for-lightmode.png et logo-for-darkmode.png sont aussi livrés, mais aucun écran ne les affiche : seule la barre de navigation de src/layouts/app/NavBar les lit, et aucune page n'affiche cette barre. Les remplacer ne change rien à l'écran.
Le crédit du pied de page
Le pied de page du tableau de bord affiche l'année, name et version d'un côté et « by Aniq UI » de l'autre, un lien vers le créateur du template. Le pied de la boîte de recherche porte le même crédit. Les deux le lisent dans src/config/author.config.ts (name, url, byLabel) et l'affichent dans src/layouts/dashboard/dashboardFooter.tsx et src/components/SearchModal/components/SearchFooter.tsx.
Couleurs
Chaque couleur est un token dans src/styles/theme-variables.css, avec un bloc pour le thème clair et un pour le sombre. L'accent est vert citron : --primaryColor vaut #9ae600 dans les deux, avec --primaryColorHover et les tokens --accent-* à côté pour le texte, la lueur et les dégradés. Changez-les, et chaque bouton, anneau et graphique qui utilise l'accent suit.
- Chaque compte peut aussi choisir son propre accent et son thème dans Settings, sous Appearance. Ce choix est enregistré avec le compte et reconstruit les tokens d'accent autour de lui.
manifest.themeColor(#9AE600) etthemedansbrand.config.tssont les couleurs propres au navigateur, en dehors de la page : réglez-les en accord.
Polices
Deux polices Google sont chargées dans src/app/layout.tsx via next/font : Inter pour le texte latin et IBM Plex Sans Arabic pour l'arabe. Remplacez l'un ou l'autre import par une autre police next/font/google, en gardant son nom variable.
Textes
Chaque mot visible se trouve dans messages/, un dossier par namespace avec un en.json et un ar.json dans chacun. Changez la valeur, gardez la clé, et faites la modification dans les deux fichiers.
Dans l'API
L'API ne contient ni logo ni couleur. Le seed écrit Kinora à deux endroits que vous voudrez peut-être changer : le réglage d'application site_name (enregistré, mais rien ne le lit), et l'appareil « Kinora Band Pro » dans back-end/src/database/seeders/fitness-devices-data.ts.