Dark mode

AdminKit for Next.js uses Bootstrap's color modes, in the free version and in AdminKit PRO. One stylesheet holds the light and the dark mode, and data-bs-theme on <html> (light or dark) picks one. Switching changes the page in place, without a reload.

Light, dark and autoCopy Anchor Link

The choice is stored in localStorage as adminkit_config_colorMode: light, dark or auto. Auto, and no stored value, follow the operating system setting (prefers-color-scheme) and change with it while the page is open.

A small script in <head> sets data-bs-theme from the stored mode before the page is painted, so there is no flash of the other mode. It is headScript in src/lib/head-scripts.ts, inlined by src/app/layout.tsx. Because it changes <html> before React hydrates, <html> has suppressHydrationWarning.

useColorModeCopy Anchor Link

Read and change the mode with the useColorMode hook in a client component. It returns the chosen mode and a setter, which stores the mode, sets data-bs-theme and fires adminkit:colormodechange on document:

"use client";

import { useColorMode } from "@/hooks/use-config"; // free version: "@/hooks/use-color-mode"

export function DarkModeSwitch() {
  const [colorMode, setColorMode] = useColorMode();

  return (
    <button
      type="button"
      className="btn btn-light"
      onClick={() => setColorMode(colorMode === "dark" ? "light" : "dark")}
    >
      {colorMode === "dark" ? "Light mode" : "Dark mode"}
    </button>
  );
}

colorMode is "auto" during server rendering and becomes the stored mode once the page has hydrated.

ToggleCopy Anchor Link

The navbar has a dropdown with light, dark and auto: NavbarColorMode in src/components/navbar/navbar-color-mode.tsx. Its button shows the icon of the current mode. Remove it from src/components/navbar/navbar.tsx if your app has one mode.

In AdminKit PRO, the settings panel has the same three modes, and demo links can preset one with ?colorMode=light, dark or auto.

Theme colorsCopy Anchor Link

Charts and maps draw with JavaScript, so they read the colors of the current mode from the useTheme hook (src/hooks/use-theme.ts). It returns the colors from the CSS custom properties: primary, secondary, success, info, warning, danger, gray-100 to gray-900, white (the surface color), black (the strongest text color), body-bg, body-color, border-color, and id ("light" or "dark"). Components that use it render again with the new colors when the mode changes. It returns null during server rendering and hydration.

The chart and map components call it for you: pass a function of the theme colors and they redraw when the mode changes. See Charts.

Your own stylesCopy Anchor Link

Colors that follow the mode come from custom properties: Bootstrap's --bs-* variables, the gray scale --bs-gray-100 to --bs-gray-900 (which turns around in dark mode) and --ak-surface-bg, the background of cards, dropdowns and inputs. The Sass values of the dark mode are the $*-dark variables in src/scss/1-variables/_dark.scss, based on $dark-theme-base. For a rule that only applies in dark mode, use Bootstrap's mixin:

.my-panel {
  background: var(--ak-surface-bg);

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

data-bs-theme also works on a single element, for a part that stays dark on a light page:

<div className="card" data-bs-theme="dark">
  <div className="card-body">This card is dark in both modes.</div>
</div>