Make it your brand

Run the site with yarn dev while you edit: the page reloads each time you save.

The site's name

The name is Logo out of the box. It appears in several texts, each in both message files:

• Metadata.siteName, Metadata.title and Metadata.description in messages/layout/<locale>.json: the name search engines and social cards show, and the home page's title and description.
• Footer.copyright and Footer.description in the same files: the footer's copyright line and the sentence under the logo. {year} in the copyright is filled in by the site; keep it.
• DashboardMockup.brand in messages/home/<locale>.json: the name in the dashboard preview's sidebar.

Each other page has its own title and description in its meta block, such as PricingPage.meta in messages/pricing/<locale>.json.

The logo

The logo is text: the word LOGO followed by a ® in the theme colour, drawn by src/components/Logo.tsx. The header, the footer and the sign-in pages all use that one component, so you change it in one place.

Change the word in LogoContent, or replace its two <span> elements with your own image, for example a file you put in public/:

import Image from "next/image";

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

Colours and themes

The site is dark and ships with four colour themes. The theme in use is the defaultTheme passed to <Providers> in src/app/[locale]/layout.tsx, blue out of the box:

<Providers defaultTheme="blue">

To use your own brand colour, edit one theme in src/Demo/ThemeColorSwitcher/themes.ts, such as brandPrimary for the main colour and bgDark for the page background, and keep its name in defaultTheme.

With yarn dev, a floating panel lets you preview the themes. It is only there in development: yarn build, yarn start and the Docker image never include it. The browser remembers what you pick in it, and that choice wins over defaultTheme while you develop.

• A new theme does not show

Fonts

The Google fonts are downloaded when the site is built and then served by the site itself. src/styles/base.css picks the heading and text font for each direction.

To use another Google font, import it from next/font/google in layout.tsx in place of one of these and give it the same variable name, such as --font-dm-sans-next.

The favicon

Replace src/app/favicon.ico with your own icon under the same name. Next.js serves it at /favicon.ico and links it from every page.

The image shown when a page is shared

Social networks and chat apps show public/meta_image.png, 1200 by 630 pixels, when someone shares a page. Replace it with your own image of the same size. If you change the size, change width and height in ogImage in src/config/site.ts too.

Its description for screen readers is Metadata.imageAlt in the layout message files. A blog post shares its own cover image instead.

The footer's credit line

The bottom of the footer shows the copyright line and a "Made with ❤️ by aniq-ui" link. The words are Footer.copyright and Footer.madeWith in the layout message files; the link is in src/components/shared/layout/footer/components/BottomSection.tsx. Change or remove it as you like.

How the colour themes work