Branding and Theming

The first things you would probably like to change are the logo, favicon and the name of the application.

First of all create directory named custom at the same level with your TypeScript/JavaScript index file.

We will use this directory for all custom components. If you want to use other name then custom, use customComponentsDir

Place your logo file into the custom directory e.g. (logo.svg)

Also place your favicon into the custom directory e.g. (favicon.png)

Then you can change the branding of the application in the configuration:

./index.ts

const admin = new AdminForth({
  ...
  customization: {
    brandName: 'My App',  // used in header
    title: 'My App Admin',  // used to set the title (HTML title tag in your pages)
    brandLogo: '@@/logo.svg',
    favicon: '@@/favicon.png',
  },
  ...
});

Please note that @@/ is a special prefix which tells AdminForth to look for the file in the custom directory. You can use @@/ prefix for all paths in the configuration and also import images like this in your custom components e.g.:

<template>
  <img src="@@/myFile.svg" alt="logo">
</template>

Theming

AdminForth uses TailwindCSS for styling. By default both black and light thems the same as for Tailwind, but you able to customize the look of the application by changing the TailwindCSS configuration.

Use styles.ts file to see which variables are available for change.

Let's say your brand has a primary purple color and you wish to make side bar purple with white text.

In index.ts file set the styles property in the configuration:

./index.ts

const admin = new AdminForth({
  ...
  customization:{
    styles:{
      colors: {
        light: {
          sidebar: {main:'#571e58', text:'white'},
        },
      }
    } 
  },
  ...
});

Square vs rounded buttons?

Not an issue, just change:

./index.ts

styles: {
  borderRadius: {
    "default": "0px"
  }
}

Login background

Some why login background image matters.

For example you might want to get free sweet background from Unsplash like Nate Watson's appartments view.

Download it to custom directory, and just set it in the configuration:

./index.ts

const admin = new AdminForth({
  ...
  auth: {
    ...
    loginBackgroundImage: '@@/photo-1516501312919-d0cb0b7b60b8.jpeg',
  },
  ...
});

Here is how it looks: