# Theming

Change the colors, fonts and sizes of AdminKit for Next.js with Sass variables, and set the PRO sidebar colors, layout and position on <body>.

Most of the look of AdminKit for Next.js comes from Sass variables, so a few changes give it your brand colors, font and sizes. In AdminKit PRO, attributes on `<body>` also choose the sidebar colors, a boxed layout and the side of the sidebar.

## Sass variables

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

```scss title="src/scss/1-variables/_app.scss"
$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
```

Each theme color has at least 4.5:1 contrast as text and behind white text. Keep that contrast when you change one: [Accessibility](/bootstrap/docs/getting-started/accessibility/#when-you-change-the-colors) shows the `readable()` helper the Sass uses. The font is Inter, bundled from `@fontsource/inter` in `3-components/_fonts.scss`. For another font, set `$font-family-sans-serif`.

Bootstrap's own variables (`$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.

## Your own styles

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](/nextjs/docs/customization/dark-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.

```scss title="src/scss/3-components/_reports.scss"
.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 position

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

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:

| Attribute | Options | Description |
| --- | --- | --- |
| `data-theme` | **default**, colored, light | Sidebar colors: dark navy, the primary color gradient, or the surface color |
| `data-layout` | **fluid**, boxed | Full width or a boxed container |
| `data-sidebar-position` | **left**, right | The side of the sidebar |
| `data-sidebar-layout` | **default**, compact | The full sidebar or the icon-only one |

To change one while the app runs, use the `useConfig` hook. It returns the current value and a setter. The setter applies the value to `<body>`, stores it in `localStorage` as `adminkit_config_<name>` and fires `adminkit:configchange` on `document`.

The hook reads `<body>` and `localStorage`, which only exist in the browser, so use it in a client component. During the static build and hydration it returns the default value, then the stored one. Hydration is React taking over the HTML that Next.js built.

```tsx
"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](/nextjs/docs/layout/sidebar/)).

## Settings panel

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

The "Explore AdminKit" panel of the demo switches the color mode, the sidebar and the layout in place. Each choice is kept in `localStorage`, so it is still there on the next visit.

The panel opens from a button at the right edge of the window, shown from the xl breakpoint (1200px) up. It opens by itself one second into the first visit. It then stores `adminkit_config_visited` and stays closed until someone opens it.

| Option | Values | Name |
| --- | --- | --- |
| Color mode | light, dark, **auto** | `colorMode` |
| Sidebar color scheme | **default**, colored, light | `theme` |
| Sidebar layout | **default**, compact | `sidebarLayout` |
| Sidebar position | **left**, right | `sidebarPosition` |
| Layout | **fluid**, boxed | `layout` |

Bold values are the defaults. The color mode sets [dark mode](/nextjs/docs/customization/dark-mode/), and auto follows the operating system. The other four are the `<body>` attributes above.

`Settings`, in `src/components/settings/settings.tsx`, is a client component: it has state and reacts to clicks. The root layout renders it once, so it stays mounted when people move between pages. The layout itself stays a server component and passes `Settings` no props. The panel uses the same `useConfig` and `useColorMode` hooks from `src/hooks/use-config.ts` that your own controls can use.

Demo links preset the options in the query string, such as `/?colorMode=dark&theme=colored&layout=boxed`. A script in `<head>` reads them in the browser, which is why presets work on the static export, where no server sees the URL. A link with any of the options replaces all stored choices. Options missing from the URL go back to their default, and a missing `colorMode` becomes auto.

If your app has one fixed look, remove the panel:

1. Delete both `BEGIN SETTINGS` ... `END SETTINGS` blocks in `src/app/layout.tsx`, and the imports of `Settings` and `settingsHeadScript`.
2. Delete `settingsHead` and `settingsHeadScript` in `src/lib/head-scripts.ts`.
3. Delete the `src/components/settings/` folder. Its styles are in `src/scss/3-components/_settings.scss`, imported in `src/scss/app.scss`.

From then on, the attributes on `<body>` in `src/app/layout.tsx` set the look. The color mode and the compact sidebar of the navbar toggle still survive a reload, through `headScript`. `useConfig` still changes the other options, but they are no longer restored on a reload.

---

Canonical HTML page: https://adminkit.io/nextjs/docs/customization/theming/

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