Customization

Sass variablesCopy Anchor Link

AdminKit is Bootstrap 5.3 with its own components on top, so most of its look comes from Sass variables. The light values live in src/scss/1-variables/_app.scss and the dark mode's in src/scss/1-variables/_dark.scss; both are passed to Bootstrap before it is imported. Change a value and rebuild with npm run dev or npm run build:

$blue: #266ed8 !default;
$red: #da2839 !default;
$yellow: #fcb92c !default;
$green: #138161 !default;
$cyan: #127d8e !default;
$gray-600: #6a737a !default;

$primary: $blue !default;
$secondary: $gray-600 !default;

$sidebar-width: 260px !default; // 264px in AdminKit PRO

AdminKit 4 darkened the theme colors so that text in them, and white text on them, reaches 4.5:1 contrast: primary is #266ed8 (was #3b7ddd), success #138161, info #127d8e, danger #da2839 and gray-600, the secondary color, #6a737a. Warning keeps its yellow and uses dark text. If you change a color, keep that contrast: Accessibility shows the readable() helper and how to check the result.

Bootstrap's own variables ($font-size-base, $spacer, $grid-breakpoints, $border-radius, ...) are set in the same file. See Bootstrap's Sass documentation for the rest.

The charts and vector maps read their colors from the CSS custom properties of the current color mode (window.theme, see Dark mode), so a new $primary reaches them with the next build. The durations and easings of the animations are variables in the same file; see Animations.

Color modesCopy Anchor Link

Light, dark and auto are set with data-bs-theme on <html> and switched with the navbar toggle, in the free version and in AdminKit PRO. Dark mode covers the attribute, the stored mode, the toggle markup and the charts.

Sidebar colors, layout and sidebar positionCopy Anchor Link

Four data attributes on <body> set the sidebar colors, the container layout and the sidebar:

<body
  data-theme="default"
  data-layout="fluid"
  data-sidebar-position="left"
  data-sidebar-layout="default"
>
  ...
</body>

From the lg breakpoint (992px) up, the navbar toggle switches data-sidebar-layout between default and compact and stores the choice as adminkit_config_sidebarLayout, the same option the settings panel sets, so the two stay in sync; an inline script at the top of <body> in src/layouts/default.hbs applies it before the sidebar renders. Below lg the sidebar is a Bootstrap offcanvas (.offcanvas-lg on #sidebar): the toggle opens it as a sheet over the page from the side set by data-sidebar-position, always in the default layout, and Escape, the backdrop or a link close it. In the free version the toggle hides and shows the sidebar from lg up and opens the same sheet below it.

data-theme combines with either color mode. In 3.x, data-theme="dark" was the dark mode; it still gives dark mode with the default sidebar, but it is deprecated in favour of data-bs-theme="dark" on <html>.

Settings panelCopy Anchor Link

The AdminKit PRO demo pages load js/settings.js, which adds the "Explore AdminKit" panel for trying the color mode and the options above. Every change applies at once, without a reload.

The choices are stored in localStorage: the color mode under adminkit_config_colorMode, shared with the navbar toggle, and the body attributes under adminkit_config_theme, adminkit_config_layout, adminkit_config_sidebarPosition and adminkit_config_sidebarLayout. They are applied again on every page load. adminkit_config_visited records that the panel has opened once, on the first visit. Query parameters replace the stored choices: index.html?colorMode=dark&sidebarPosition=right.

The panel is meant for the demo. In your project, delete the block between <!-- BEGIN SETTINGS --> and <!-- END SETTINGS --> in src/partials/site-meta.hbs and set the data attributes in src/layouts/default.hbs. Keep the color mode script above that block: it applies the stored color mode before the first paint.