Skip to main content

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 call your dir with other name then custom, just set customComponentsDir option

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 login page and sidebar
    title: 'My App Admin',  // used to set HTML title tag
    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>

Removing brand name from sidebar​

If you are using logo image which has branded title inside, you might want completely remove default text brand name from sidebar:

./index.ts
brandName: 'My App',
showBrandNameInSidebar: false,

brandName will still be used in the other places e.g. login form.

Theming​

AdminForth uses TailwindCSS for styling. You are 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: {
          // color for links, icons etc.
          primary: '#b400b8',
          // color for sidebar and text
          sidebar: {main:'#571e58', text:'white'},
        },
      }
    } 
  },
  ...
});

Here is how it looks: alt text

Square vs rounded buttons?​

Not an issue, just change:

./index.ts
styles: {
  borderRadius: {
    "default": "0px"
  }
}

Login background​

To make login interface less boring background image matters.

For example you might want to get free sweet background from Unsplash like Nate Watson's apartments 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: alt text

You can also set background position and size:

./index.ts

auth: {
  ...
  loginBackgroundImage: '@@/photo-1516501312919-d0cb0b7b60b8.jpeg',
  loginBackgroundPosition: 'over',
}

loginBackgroundPosition accepts values:

  • over - image will be over the whole login page with cover mode
  • 1/2(default), 3/4, 2/5, 3/5 etc. - image will be in the left side of the login page with cover mode