⭐️ If you like this product, please support us by starring our GitHub repository! Star ⭐️
GitHub Download Get AdminKit Pro

Customization

Customize AdminKit’s theme, layout, sidebar position and sidebar layout. Match AdminKit with your brand.

This feature is only available in AdminKit PRO. Upgrade now.

Themes

AdminKit includes two stylesheets, one for dark mode & one for light mode.

Light mode:

<link href="{PATH}/dist/css/light.css" rel="stylesheet">

Dark mode:

<link href="{PATH}/dist/css/dark.css" rel="stylesheet">

Make sure to set data-theme to dark if you’re planning to use the dark mode, as documented in the section below.

Color scheme, sidebar, layout

You are able to customize the layout of the page by adjusting the data attributes on the body element in your HTML files.

The following options are available:

Name Options Description
data-theme default, dark, light, colored Color scheme
data-layout fluid, boxed Container layout system
data-sidebar-position left, right Position of the sidebar
data-sidebar-layout default, compact Layout of the sidebar
<body
  data-theme="default"
  data-layout="fluid"
  data-sidebar-position="left"
  data-sidebar-layout="default"
>
...
</body>