Styling

Logos and favicons

Before you share out your app with the rest of the world, make sure your logos and favicons are in order and in the right folders:

  1. Logos should be placed in the public/ folder, and their filename should be configured in config/site.ts (logo.png by default)
  2. Favicons should be placed in the src/app/ folder, as favicon.ico. For Apple phone home screen icons, place an apple-icon.png in the src/app/ folder (learn more on how NextJS handles favicons). You can use Real Favicon Generator to generate these icons.

Themes

TemplateAI uses daisyUI to set themes that define a set of colors used on all the daisyUI elements. This allows you to pick from over 30 pre-configured daisyUI themes or set your own.

To change your app's theme, head over to tailwind.config.ts in the root of your application and edit the themes: [] config under daisyui. To learn more, check out daiyUI's docs on setting themes.

Dark mode

TemplateAI components are designed to be usable in light vs. dark mode if you have set the themes: ['light', 'dark'] daisyUI themes. This is done by setting color classes like text-base-content and bg-base that are "semantic" instead of opinionated on colors like white or black, so you don't have to set dark-mode colors everwyhere. Learn more at daisyUI's docs on colors on how you can implement this when setting color classes for your app.

Icons

TemplateAI uses HeroIcons' library of SVG icons throughout the template.

You can use one of the icons by directly importing it from the library:

import { ChevronLeftIcon } from '@heroicons/react/24/solid';
 
...
 
<ChevronLeftIcon className='w-4 h-4 mr-2' />

The template also has a public/icons/ folder that ships with all the SVG files for the Heroicons "solid" icons, so you can find the right one and directly pass the icon filename into an Image tag:

<Image src='/icons/lock-closed.svg' alt='Authentication' width={10} height={10} />

Last Updated: June 7