# Customization

Change AdminKit's colors and sizes with Sass variables, and set the PRO sidebar colors, layout and sidebar position with data attributes.

## Sass variables

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`:

```scss title="src/scss/1-variables/_app.scss"
$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](/bootstrap/docs/getting-started/accessibility/#when-you-change-the-colors) 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](https://getbootstrap.com/docs/5.3/customize/sass/) 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](/bootstrap/docs/getting-started/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](/bootstrap/docs/getting-started/animations/#motion-tokens).

## Color modes

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](/bootstrap/docs/getting-started/dark-mode/) covers the attribute, the stored mode, the toggle markup and the charts.

## Sidebar colors, layout and sidebar position

> This feature is only available in **AdminKit PRO**. [Learn more](/pricing/).

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

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Options</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data-theme</td>
      <td><strong>default</strong>, colored, light</td>
      <td>Sidebar colors: dark navy, the primary color gradient, or the surface color</td>
    </tr>
    <tr>
      <td>data-layout</td>
      <td><strong>fluid</strong>, boxed</td>
      <td>Container layout: full width or boxed</td>
    </tr>
    <tr>
      <td>data-sidebar-position</td>
      <td><strong>left</strong>, right</td>
      <td>Position of the sidebar</td>
    </tr>
    <tr>
      <td>data-sidebar-layout</td>
      <td><strong>default</strong>, compact</td>
      <td>Full sidebar or the compact, icon-only variant</td>
    </tr>
  </tbody>
</table>

```html
<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 panel

> This feature is only available in **AdminKit PRO**. [Learn more](/pricing/).

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.

---

Canonical HTML page: https://adminkit.io/bootstrap/docs/getting-started/customization/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io