Customization

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

WARNING

This feature is only available in AdminKit PRO. Learn more.

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>