Theming

Sass variablesCopy Anchor Link

AdminKit for Next.js uses the Sass of AdminKit for Bootstrap: Bootstrap 5.3 with AdminKit's components on top. The light values are in src/scss/1-variables/_app.scss, the dark mode's in src/scss/1-variables/_dark.scss; src/scss/app.scss passes both to Bootstrap before it imports it. Change a value and the dev server restyles the page:

$blue: #266ed8 !default;
$red: #da2839 !default;
$green: #138161 !default;
$gray-600: #6a737a !default;

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

$font-size-base: 0.875rem !default;
$sidebar-width: 264px !default; // 260px in the free version

The theme colors reach 4.5:1 contrast for text in them and white text on them. If you change one, keep that contrast: Accessibility shows the readable() helper the Sass uses. The font is Inter, bundled from @fontsource/inter in 3-components/_fonts.scss; set $font-family-sans-serif for another one.

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

Your own stylesCopy Anchor Link

Add a partial, for example src/scss/3-components/_reports.scss, and import it in src/scss/app.scss next to the other components. Colors that follow the color mode come from CSS custom properties: Bootstrap's --bs-* and AdminKit's --ak-*, such as --ak-surface-bg, the background of cards, dropdowns and inputs.

.report-panel {
  background: var(--ak-surface-bg);
  border: 1px solid var(--bs-border-color);

  @include color-mode(dark) {
    box-shadow: none;
  }
}

Sidebar colors, layout and sidebar positionCopy Anchor Link

Four data attributes on <body>, set in src/app/layout.tsx, choose the sidebar colors and the layout. Change them there to change the defaults:

To change one at runtime, use the useConfig hook in a client component. It returns the current value and a setter, which applies the value to <body>, stores it in localStorage as adminkit_config_<name> and fires adminkit:configchange on document:

"use client";

import { useConfig } from "@/hooks/use-config";

export function BoxedToggle() {
  const [layout, setLayout] = useConfig("layout");

  return (
    <button
      type="button"
      className="btn btn-light"
      onClick={() => setLayout(layout === "boxed" ? "fluid" : "boxed")}
    >
      {layout === "boxed" ? "Full width" : "Boxed"}
    </button>
  );
}

The names are theme, layout, sidebarPosition and sidebarLayout. The navbar toggle switches sidebarLayout (see Sidebar).

Settings panelCopy Anchor Link

The settings panel (src/components/settings/) opens from the settings button of the demo. It sets the color mode, the sidebar colors, the sidebar layout and position and the layout, and keeps them in localStorage. Demo links can preset the same options with query parameters, such as /?colorMode=dark&theme=colored&layout=boxed.

To remove it, delete the two BEGIN SETTINGS ... END SETTINGS blocks in src/app/layout.tsx (the panel and the script in <head> that applies its stored options and the query parameters) and the src/components/settings/ folder. The attributes on <body> in src/app/layout.tsx are then the layout; the color mode and the compact sidebar the navbar toggle stores keep working.