Make it your brand
Where to change the dashboard's name, metadata, logo, icons, colours, fonts and pictures.
For the Full Stack package
Every path below is inside the dashboard's folder: front-end in the Full Stack, the folder itself in the Admin Dashboard package. Run yarn dev while you edit: the page reloads each time you save.
| To change | Edit |
|---|---|
| The name, the page metadata and the footer's name and version | src/config/brand.config.ts |
| The logo | public/assets/images/logo-for-lightmode.png and logo-for-darkmode.png |
| The icons | src/app/favicon.ico, icon0.svg, icon1.png, apple-icon.png, and the two web-app-manifest-*.png in public/ |
| The colours | src/styles/theme-variables.css |
| The Arabic font | src/app/layout.tsx and src/styles/base.css |
| The words on screen and the tab titles | messages/<namespace>/en.json and ar.json |
| The site address | NEXT_PUBLIC_BASE_URL in .env, or a Docker build argument |
Name and metadata
One object, BRAND_CONFIG in src/config/brand.config.ts, holds the brand in English and Arabic where a person reads it. The name is Aniq Dashboard out of the box.
| Field | Used for |
|---|---|
name | The browser tab titles (Users | Aniq Dashboard) and the dashboard footer |
company | The dashboard footer, after "by", and the Organization structured data in the page head |
version | The version in the footer |
logo.icon, logo.alt | The icon in the structured data and the sidebar's image logo |
meta.title, meta.description, meta.keywords, meta.author | The page metadata |
meta.ogImage, meta.twitterImage | The preview image when a link is shared. Put the file in public/ and give its path. |
theme.light, theme.dark | The browser's address-bar colour in each mode |
manifest | The installed app's name, short name, colours and icons |
links, contact | The Organization structured data. Remove what you do not have. |
The logo
The logo in the sidebar and the header is a background image that follows the theme: public/assets/images/logo-for-lightmode.png in light mode and logo-for-darkmode.png in dark mode. Replace the two files and keep the names, or point --logo-bg-image at other files in src/styles/theme-variables.css, once in the light block and once in the dark one.
Icons
| File | What it is |
|---|---|
src/app/favicon.ico | The browser tab icon |
src/app/icon0.svg, src/app/icon1.png | The icons Next.js links in the page head |
src/app/apple-icon.png | The icon on an iPhone or iPad home screen |
public/web-app-manifest-192x192.png, public/web-app-manifest-512x512.png | The installed app's icons, listed in manifest.icons |
Colours
Every colour is a CSS variable in src/styles/theme-variables.css, defined once for light mode (:root) and once for dark mode. The brand colour is --primaryColor, with --primaryColorHover; surfaces, borders and text have their own variables in the same file. Change a value there and every screen follows.
--primaryColor: #2c2c2c;
--primaryColorHover: #1a1a1a;Components use the variables as bg-[var(--surface)], text-[var(--text-muted)] and so on, so a new component keeps both themes when it does the same.
Fonts
English text uses the system font stack. Arabic pages use IBM Plex Sans Arabic, loaded from Google Fonts through next/font in src/app/layout.tsx and applied in src/styles/base.css when the page is in Arabic. The font is downloaded when the app is built and then served by the app itself. To use another font, import it from next/font/google in layout.tsx in its place and keep the variable name, --font-sans-arabic.
Pictures
| File | Where it shows |
|---|---|
public/assets/images/login/login.png | The illustration on the sign-in page |
public/assets/images/avatar/sphere-light.png, sphere-dark.png | The AI assistant's avatar beside its answers |
public/assets/images/avatar/person/*.png, public/assets/images/project/project.png | The pictures of the sample admins, users and projects |
Texts and page titles
Every word on screen comes from the message files in messages/<namespace>/en.json and ar.json. Browser tab titles come from messages/metadata/<locale>.json and show as the page title followed by the name. Edit both languages when you change a text.
Checklist
- Names, metadata and links in
src/config/brand.config.ts. NEXT_PUBLIC_BASE_URLset to your address.- The two logo files.
- The icons in
src/app/andpublic/. --primaryColorand the other colours insrc/styles/theme-variables.css.- The texts in
messages/, in both languages.