Aux couleurs de votre marque

Lancez le site avec yarn dev pendant vos modifications : la page se recharge à chaque enregistrement.

Le nom du site

Le nom est Logo à la livraison. Il apparaît dans plusieurs textes, chacun dans les deux fichiers de messages :

• Metadata.siteName, Metadata.title et Metadata.description dans messages/layout/<locale>.json : le nom que montrent les moteurs de recherche et les cartes sociales, ainsi que le titre et la description de la page d'accueil.
• Footer.copyright et Footer.description dans les mêmes fichiers : la ligne de copyright du pied de page et la phrase sous le logo. {year} dans le copyright est rempli par le site ; gardez-le.
• DashboardMockup.brand dans messages/home/<locale>.json : le nom dans la barre latérale de l'aperçu du tableau de bord.

Chaque autre page a son propre titre et sa propre description dans son bloc meta, comme PricingPage.meta dans messages/pricing/<locale>.json.

Le logo

Le logo est du texte : le mot LOGO suivi d'un ® dans la couleur du thème, dessiné par src/components/Logo.tsx. L'en-tête, le pied de page et les pages de connexion utilisent tous ce seul composant, vous le changez donc à un seul endroit.

Changez le mot dans LogoContent, ou remplacez ses deux éléments <span> par votre propre image, par exemple un fichier que vous placez dans public/ :

import Image from "next/image";

<Image src="/your-logo.svg" alt="Your brand" width={120} height={28} priority />

Couleurs et thèmes

Le site est sombre et livré avec quatre thèmes de couleurs. Le thème utilisé est le defaultTheme passé à <Providers> dans src/app/[locale]/layout.tsx, blue à la livraison :

<Providers defaultTheme="blue">

Pour utiliser la couleur de votre marque, modifiez un thème dans src/Demo/ThemeColorSwitcher/themes.ts, par exemple brandPrimary pour la couleur principale et bgDark pour le fond de la page, et gardez son nom dans defaultTheme.

Avec yarn dev, un panneau flottant permet d'essayer les thèmes. Il n'existe qu'en développement : yarn build, yarn start et l'image Docker ne l'incluent jamais. Le navigateur retient ce que vous y choisissez, et ce choix l'emporte sur defaultTheme pendant le développement.

• Un nouveau thème ne s'affiche pas

Polices

Les polices Google sont téléchargées lors du build, puis servies par le site lui-même. src/styles/base.css choisit la police des titres et du texte pour chaque sens d'écriture.

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, par exemple --font-dm-sans-next.

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'image affichée quand une page est partagée

Les réseaux sociaux et les applications de messagerie affichent public/meta_image.png, 1200 par 630 pixels, quand quelqu'un partage une page. Remplacez-la par votre propre image de la même taille. Si vous changez la taille, changez aussi width et height dans ogImage de src/config/site.ts.

Sa description pour les lecteurs d'écran est Metadata.imageAlt dans les fichiers de messages du layout. Un article de blog partage plutôt sa propre image de couverture.

La ligne de crédit du pied de page

Le bas du pied de page affiche la ligne de copyright et un lien « Made with ❤️ by aniq-ui ». Les mots sont Footer.copyright et Footer.madeWith dans les fichiers de messages du layout ; le lien est dans src/components/shared/layout/footer/components/BottomSection.tsx. Modifiez-le ou supprimez-le à votre guise.

Comment fonctionnent les thèmes de couleurs