# Bootstrap Dark Admin & Dashboard Template

Fully-featured dashboard template with dark mode

AdminKit has light, dark and auto color modes in the free version and in PRO, built on Bootstrap 5.3 color modes and checked for WCAG 2.2 AA contrast in both.

## Building a dark mode admin panel

### What's included

Light, dark and auto color modes in one stylesheet, a navbar toggle, and charts, maps, calendars and tables that follow the mode. AdminKit PRO adds sidebar color schemes and a settings panel.

### What you build

Nothing for the colors: keep the toggle or set `data-bs-theme` yourself. Your own components can use Bootstrap's color mode variables. See the [dark mode docs](/bootstrap/docs/getting-started/dark-mode/).

### Which license

Dark mode is part of the MIT-licensed free version. AdminKit PRO is a one-time payment; choose Company or Enterprise for products with paying users, see [pricing](/pricing/).

Published: 2021-10-15 · Last updated: 2026-10-28

## FAQ

**Q: Does AdminKit include a dark mode?**

A: Yes. Both editions have light, dark and auto color modes in one stylesheet, `css/app.css`, built on Bootstrap 5.3 color modes. Every component and page works in both modes, with text that keeps 4.5:1 contrast.

**Q: Is dark mode available in the free version?**

A: Yes. Since AdminKit 4, the free version has the same light, dark and auto color modes and the navbar toggle. AdminKit PRO adds 3 sidebar color schemes and a settings panel.

**Q: What is the difference between color modes and sidebar color schemes?**

A: The color mode (light, dark or auto) sets the colors of the whole page with `data-bs-theme` on the `html` element. In AdminKit PRO, `data-theme` on the `body` picks one of 3 sidebar color schemes in either mode.

**Q: Do charts and plugins work in dark mode too?**

A: Yes. Charts and maps created with AdminKit's chart and map helpers redraw in the new colors when the mode changes, and the date pickers, calendar and tables follow it too.

**Q: Can visitors toggle between light and dark mode?**

A: Yes. The navbar toggle switches between light, dark and auto (the operating system setting) and stores the choice in `localStorage`. The optional `js/head.js` applies it before the first paint, so there is no flash.

**Q: Is a dark-mode-only version available?**

A: Yes. Set `data-bs-theme="dark"` on the `html` element and leave out the toggle. AdminKit 4 has no separate dark stylesheet; `css/app.css` holds both modes.

## Related

- [Vanilla JS Admin & Dashboard Template](https://adminkit.io/use-cases/vanilla-js-admin-template/): AdminKit is a Bootstrap 5.3 admin template in plain JavaScript. Neither the free version nor AdminKit PRO uses jQuery, including the PRO tables.
- [SaaS Admin & Dashboard Template](https://adminkit.io/use-cases/saas-admin-template/): Build a SaaS admin dashboard with AdminKit's Bootstrap 5 dashboard, client, pricing, invoice and account pages, connected to your own auth, billing and APIs.
- [Analytics Admin & Dashboard Template](https://adminkit.io/use-cases/analytics-admin-template/): Build analytics dashboards and reporting panels with AdminKit, a Bootstrap 5 admin template that has reusable UI components, interactive charts and tables.

---

Canonical HTML page: https://adminkit.io/use-cases/bootstrap-dark-admin-template/

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