# React Bootstrap Dark Mode

React Bootstrap dark mode in AdminKit: let users pick light, dark or auto, switch it from your own components, and style charts and panels for both modes.

Your users can pick how the app looks: light, dark, or auto, which follows their operating system. [AdminKit for React](/react/) has all three modes, in the free version and in AdminKit PRO. Switching changes the page in place, without a reload.

The modes are built on [Bootstrap's color modes](https://getbootstrap.com/docs/5.3/customize/color-modes/). One stylesheet holds both the light and the dark mode. The `data-bs-theme` attribute on `<html>`, `light` or `dark`, picks one.

## Light, dark and auto

The user's choice is stored in `localStorage` as `adminkit_config_colorMode`, with the value `light`, `dark` or `auto`. With auto, or when nothing is stored yet, the page follows the operating system setting (`prefers-color-scheme`). If that setting changes while the page is open, the page changes with it.

To avoid a flash of the other mode, a small inline script in the `<head>` of `index.html` sets `data-bs-theme` from the stored mode before the page is painted. It runs before the app loads, so it must not import anything.

## useColorMode

To read or change the mode from your own component, use the `useColorMode` hook. It returns the chosen mode and a setter. The setter stores the mode, sets `data-bs-theme` and fires `adminkit:colormodechange` on `document`:

```tsx
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>
  );
}
```

In AdminKit PRO the hook is in `src/hooks/use-config.ts`, next to `useConfig`. In the free version it is in `src/hooks/use-color-mode.ts`.

## Toggle

Users switch the mode from a dropdown in the [navbar](/react/docs/navigation/navbar/), with light, dark and auto. Its button shows the icon of the current mode. The dropdown is `NavbarColorMode`, in `src/components/navbar/navbar-color-mode.tsx`. If your app has only one mode, remove it from `src/components/navbar/navbar.tsx`.

In AdminKit PRO, the [settings panel](/react/docs/customization/theming/#settings-panel) has the same three modes, and demo links can preset one with `?colorMode=light`, `dark` or `auto`.

## Theme colors

Charts and maps draw with JavaScript, so they need the colors of the current mode as values. They get them from the `useTheme` hook, in `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"`). When the mode changes, the components that use it render again with the new colors.

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](/react/docs/charts/overview/).

## Your own styles

Your own CSS follows the mode when it uses the colors that change with it. Those colors come from custom properties:

- Bootstrap's `--bs-*` variables
- the gray scale, `--bs-gray-100` to `--bs-gray-900`, which runs the other way in dark mode
- `--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:

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

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

Sometimes one part of a page should stay dark while the rest is light. `data-bs-theme` works on a single element too:

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

## Related

- [Next.js Bootstrap dark mode](/nextjs/docs/customization/dark-mode/): the same color modes in AdminKit for Next.js
- [Bootstrap 5 dark mode](/bootstrap/docs/getting-started/dark-mode/): dark mode in the HTML version
- [Theming](/react/docs/customization/theming/): Sass variables and the sidebar colors
- [Dark mode demo](https://react-demo.adminkit.io/?colorMode=dark)

---

Canonical HTML page: https://adminkit.io/react/docs/customization/dark-mode/

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