# Theming

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

To give AdminKit your brand, change its Sass variables: colors, fonts and sizes. AdminKit PRO adds sidebar color schemes, a boxed layout and a right-hand sidebar, which you pick with attributes on `<body>`.

## Sass variables

AdminKit for React 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 values are in `src/scss/1-variables/_dark.scss`. `src/scss/app.scss` passes both to Bootstrap before it imports it. Change a value and the Vite dev server 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
```

The theme colors reach 4.5:1 contrast, both as text color and behind white text. If you change one, keep that contrast: [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`. Set `$font-family-sans-serif` to use another one.

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](/react/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/#react).

Four data attributes on `<body>`, set in `index.html`, 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 at runtime, use the `useConfig` hook. 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`:

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

## Settings panel

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

The settings panel is the "Explore AdminKit" panel of the demo. It lets people try the color mode, the sidebar color scheme, the sidebar layout and position and the page layout while the app runs. Every change applies at once and is kept in `localStorage` for the next visit.

A button at the right edge of the window opens the panel. The button only shows on screens 1200px and wider (the xl breakpoint). On the first visit, the panel opens by itself after one second, and then stores `adminkit_config_visited` so it does not do that again.

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

The defaults are in bold. The color mode is the [dark mode](/react/docs/customization/dark-mode/) setting, and auto follows the operating system. The other options are the attributes in the table above.

The panel is the `Settings` component in `src/components/settings/settings.tsx`, built on the same hooks as your own controls: `useConfig` and `useColorMode` from `src/hooks/use-config.ts`. `src/app.tsx` renders it once, outside the routes, so it stays open while people change pages.

Demo links can preset the options in the query string, such as `/?colorMode=dark&theme=colored&layout=boxed`. A link with any of these options replaces all stored choices. An option that is not in the URL goes back to its default, and a missing `colorMode` becomes auto.

To ship your app with one fixed look, remove the panel:

1. Delete the `BEGIN SETTINGS` ... `END SETTINGS` block in `src/app.tsx` and the import of `Settings`.
2. Delete the `BEGIN SETTINGS` ... `END SETTINGS` script in `index.html`. It applies the stored options and the query string before the first paint.
3. Delete the `src/components/settings/` folder. Its styles are in `src/scss/3-components/_settings.scss`, imported in `src/scss/app.scss`.

The attributes on `<body>` in `index.html` then set the look. The color mode toggle and the compact sidebar of the navbar toggle keep working and keep their stored values. `useConfig` still changes the other options, but they are no longer restored on a reload.

---

Canonical HTML page: https://adminkit.io/react/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