Haz que sea tu marca
Dónde cambiar el nombre del panel, el logo, el color de marca, las fuentes, el favicon y el crédito del pie de página.
Ejecuta el panel con yarn dev mientras editas: la página se recarga cada vez que guardas.
| Para cambiar | Edita |
|---|---|
| El nombre, el título de la pestaña del navegador y la descripción | El bloque Metadata en messages/common/en.json y messages/common/ar.json |
| El nombre en las páginas de inicio de sesión y de aterrizaje | Login.title y Hero.title en messages/auth/en.json y messages/auth/ar.json |
| El logotipo | public/assets/images/icons/logo.svg |
| El color de marca | DEFAULT_THEME_COLOR en src/Demo/ThemeColorSwitcher/themes.ts |
| Las fuentes | src/app/[locale]/layout.tsx, src/styles/base.css y src/styles/fonts.css |
| El favicon | src/app/favicon.ico |
| El crédito del pie de página | src/app/[locale]/dashboard/layout.tsx |
El nombre
El nombre es Financial Dashboard de fábrica. Cámbialo en los dos idiomas, en cada uno de estos textos:
Metadata.siteNameyMetadata.titleTemplateenmessages/common/<locale>.json: el nombre en la pestaña del navegador.%sen la plantilla se reemplaza por el título de cada página; consérvalo.Metadata.descriptionen los mismos archivos, y eltitley ladescriptionde cada página enMetadata.pages.Login.titleyHero.titleenmessages/auth/<locale>.json: el encabezado de la página de inicio de sesión y de la página de aterrizaje en/en.
El logotipo
El logo es public/assets/images/icons/logo.svg. La barra lateral lo muestra arriba y las tarjetas de pago lo muestran en una esquina. Reemplaza el archivo por tu propio SVG con el mismo nombre y ambos lo seguirán.
El logo incluido es gris claro, así que en modo claro la barra lateral lo oscurece para que se vea sobre el fondo blanco. Si tu logo ya es oscuro, quita brightness-50 de sus clases en src/layouts/Sidebar/components/SidebarLogo.tsx:
className="object-contain dark:brightness-100 brightness-50"Colores
El color de marca es naranja de fábrica, y se incluyen cuatro temas de color: naranja, azul, dorado y plateado. Elige uno con una línea, DEFAULT_THEME_COLOR en src/Demo/ThemeColorSwitcher/themes.ts:
export const DEFAULT_THEME_COLOR = "orange";Fuentes
| Fuente | Se usa para | Se carga en |
|---|---|---|
| Inter | Inglés | src/app/[locale]/layout.tsx, desde Google Fonts mediante next/font, aplicada en src/styles/base.css |
| Noto Sans Arabic | Árabe | src/app/[locale]/layout.tsx, mediante next/font, aplicada a las páginas de derecha a izquierda en src/styles/fonts.css |
Las fuentes se descargan al construir la app y luego las sirve la propia app. Para usar otra fuente de Google, impórtala desde next/font/google en layout.tsx en lugar de una de estas y dale el mismo nombre de variable, --font-inter o --font-noto-arabic.
El favicon
Reemplaza src/app/favicon.ico por tu propio icono con el mismo nombre. Next.js lo sirve en /favicon.ico y lo enlaza desde todas las páginas.
El usuario con sesión iniciada
El nombre y la imagen del menú de usuario del encabezado son los de la cuenta de ejemplo, John Carter, definida en src/config/demo-account.ts. Cuando el inicio de sesión esté conectado a tu API, el menú mostrará el usuario que devuelva tu API.
El crédito del pie de página
Bajo cada página del panel, el pie de página muestra "By Aniq UI" con un enlace. La palabra "By" es Footer.by en los archivos de mensajes comunes; el nombre y el enlace están en src/app/[locale]/dashboard/layout.tsx. Cambia o quita el <footer> ahí como quieras.