Customization
Customize AdminKit’s theme, layout, sidebar position and sidebar layout. Match AdminKit with your brand.
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>