Aux couleurs de votre marque
Où changer le nom du tableau de bord, le logo, la couleur de marque, les polices, le favicon et la mention du pied de page.
Lancez le tableau de bord avec yarn dev pendant vos modifications : la page se recharge à chaque enregistrement.
| Pour changer | Modifiez |
|---|---|
| Le nom, le titre de l'onglet du navigateur et la description | Le bloc Metadata dans messages/common/en.json et messages/common/ar.json |
| Le nom sur les pages de connexion et d'accueil | Login.title et Hero.title dans messages/auth/en.json et messages/auth/ar.json |
| Le logo | public/assets/images/icons/logo.svg |
| La couleur de marque | DEFAULT_THEME_COLOR dans src/Demo/ThemeColorSwitcher/themes.ts |
| Les polices | src/app/[locale]/layout.tsx, src/styles/base.css et src/styles/fonts.css |
| Le favicon | src/app/favicon.ico |
| La mention du pied de page | src/app/[locale]/dashboard/layout.tsx |
Le nom
Le nom d'origine est Financial Dashboard. Changez-le dans les deux langues, dans chacun de ces textes :
Metadata.siteNameetMetadata.titleTemplatedansmessages/common/<locale>.json: le nom dans l'onglet du navigateur.%sdans le modèle est remplacé par le titre propre à chaque page ; gardez-le.Metadata.descriptiondans les mêmes fichiers, et letitleet ladescriptionde chaque page sousMetadata.pages.Login.titleetHero.titledansmessages/auth/<locale>.json: le titre de la page de connexion et de la page d'accueil à/en.
Le logo
Le logo est public/assets/images/icons/logo.svg. La barre latérale l'affiche en haut, et les cartes de paiement l'affichent dans leur coin. Remplacez le fichier par votre propre SVG sous le même nom et les deux suivent.
Le logo fourni est gris clair : en mode clair, la barre latérale l'assombrit pour qu'il reste visible sur le fond blanc. Si votre logo est déjà sombre, retirez brightness-50 de ses classes dans src/layouts/Sidebar/components/SidebarLogo.tsx :
className="object-contain dark:brightness-100 brightness-50"Couleurs
La couleur de marque est orange à l'origine, et quatre thèmes de couleur sont fournis : orange, bleu, doré et argenté. Choisissez-en un en une ligne, DEFAULT_THEME_COLOR dans src/Demo/ThemeColorSwitcher/themes.ts :
export const DEFAULT_THEME_COLOR = "orange";Polices
| Police | Utilisé pour | Chargée dans |
|---|---|---|
| Inter | Anglais | src/app/[locale]/layout.tsx, depuis Google Fonts via next/font, appliquée dans src/styles/base.css |
| Noto Sans Arabic | Arabe | src/app/[locale]/layout.tsx, via next/font, appliquée aux pages de droite à gauche dans src/styles/fonts.css |
Les polices sont téléchargées lors de la construction de l'application, puis servies par l'application elle-même. Pour utiliser une autre police Google, importez-la depuis next/font/google dans layout.tsx à la place de l'une de celles-ci et donnez-lui le même nom de variable, --font-inter ou --font-noto-arabic.
Le favicon
Remplacez src/app/favicon.ico par votre propre icône sous le même nom. Next.js la sert à /favicon.ico et la relie depuis chaque page.
L'utilisateur connecté
Le nom et l'image du menu utilisateur de l'en-tête sont ceux du compte réservé, John Carter, défini dans src/config/demo-account.ts. Une fois la connexion reliée à votre API, le menu affiche l'utilisateur que renvoie votre API.
La mention du pied de page
Sous chaque page du tableau de bord, le pied de page affiche « By Aniq UI » avec un lien. Le mot « By » est Footer.by dans les fichiers de messages communs ; le nom et le lien sont dans src/app/[locale]/dashboard/layout.tsx. Modifiez ou retirez le <footer> à cet endroit comme vous le voulez.