Branding and Theming

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

You can place your logo and favicon files into the custom directory e.g. replacing existing default logo.svg and favicon.png files.

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

./index.ts

const admin = new AdminForth({
  ...
  customization: {
    brandName: "myadmin",
    brandName: 'My App',  // used in login page and sidebar
    title: "myadmin",
    title: 'My App Admin',  // used to set HTML title tag
    brandLogo: '@@/assets/logo.svg', // replace with your images in custom/assets  directory
    favicon: '@@/assets/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: '#1a56db',
          primary: '#b400b8',
          // color for sidebar and text
          sidebar: { main: '#f9fafb', text: '#213045' },
          sidebar: { main:'#571e58', text: 'white'},
        },
      }
    } 
  },
  ...
});

Here is how it looks:

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:

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