Adminator is a responsive Bootstrap 5 Admin Template built with modern development tools. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets.
β¨ Latest Update (v2.6.0): Complete Dark Mode System with smart theme switching, OS preference detection, and seamless component integration.
π Dark Mode Features: Automatic theme detection, persistent user preferences, theme-aware components (charts, calendars, maps), and a beautiful toggle switch.
π Complete Documentation - Detailed setup guides, API reference, and examples
Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
Demo Site: Here
- What's New in v2.6.0
- Getting Started
- Adminator for other platforms and frameworks
- Files/Folder Structure
- Deployment
- Built With
- Changelog
- Authors
- License
π Dark Mode Release - Complete dark mode system with seamless theme switching:
- π Smart Theme Toggle: Bootstrap-based switch with sun/moon icons and intuitive labels
- π OS Preference Detection: Automatically detects and applies your preferred color scheme
- πΎ Persistent Storage: Remembers your theme choice across browser sessions
- β‘ Instant Switching: Real-time theme updates without page reload
- π― Component Integration: All charts, calendars, maps, and UI elements are theme-aware
- π¨ CSS Variables Architecture: Comprehensive color system with semantic naming
- π Chart.js Integration: Dynamic color schemes for all chart types
- ποΈ FullCalendar Support: Dark-mode aware calendar with proper contrast
- πΊοΈ Vector Maps: Custom color palettes for both light and dark themes
- πͺ Component Compatibility: Theme support across all interactive elements
- Latest Dependencies: All 22+ dependencies updated to latest versions
- Modern Build Tools: webpack 5.99.9, webpack-dev-server 5.2.2
- ESLint 9.x: Migrated to modern flat config format
- Enhanced CSS: Latest Sass (1.89.2), PostCSS (8.5.6), Bootstrap (5.3.7)
- Updated Components: Chart.js 4.5.0, FullCalendar 6.1.17
- Zero Vulnerabilities: Complete security audit with all packages secure
In order to run Adminator on your local machine all what you need to do is to have the prerequisites stated below installed on your machine and follow the installation steps down below. Prebuilt static assets can be found under releases.
- Node.js 18.12.0 or higher (tested with Node.js 23.11.0)
- npm (included with Node.js) or Yarn
- Git
Start by typing the following commands in your terminal in order to get Adminator full package on your machine and starting a local development server with live reload feature.
# Clone the repository
git clone https://github.com/puikinsh/Adminator-admin-dashboard.git adminator
# Navigate to the project directory
cd adminator
# Install dependencies
npm install
# Start development server (available at http://localhost:4000)
npm start
# Alternative: Start with webpack dashboard
npm run dev
# Development server with hot reload
npm start
# Development server with dashboard
npm run dev
# Build for production (optimized)
npm run build
# Build for production (unminified)
npm run release:unminified
# Build for production (minified)
npm run release:minified
# Preview production build
npm run preview
# Lint JavaScript files
npm run lint:js
# Lint SCSS files
npm run lint:scss
# Run all linters
npm run lint
Adminator now includes a comprehensive dark mode system that works out of the box:
- Dark mode is automatically initialized on page load
- Detects your OS preference (light/dark) on first visit
- Remembers your choice across browser sessions
- Look for the Light/Dark toggle switch in the header navigation
- Click to instantly switch between light and dark themes
- Visual feedback with sun βοΈ and moon π icons
π Complete Theme API Documentation β
Using the Theme API:
// Get current theme
const currentTheme = Theme.current(); // 'light' or 'dark'
// Switch themes programmatically
Theme.toggle();
// Set specific theme
Theme.apply('dark');
// Listen for theme changes
window.addEventListener('adminator:themeChanged', (event) => {
console.log('Theme changed to:', event.detail.theme);
});
CSS Variables for Custom Styling:
.my-component {
background: var(--c-bkg-card);
color: var(--c-text-base);
border: 1px solid var(--c-border);
}
Available CSS Variables:
--c-bkg-body
- Main background--c-bkg-card
- Card backgrounds--c-text-base
- Primary text color--c-text-muted
- Secondary text color--c-border
- Border colors--c-primary
- Primary brand color
π View Complete CSS Variables Reference β
π Complete Documentation Site - Comprehensive guides and API reference
- π Installation Guide - Complete setup instructions
- π Theme System - Dark mode and theming
- π§ API Reference - JavaScript API documentation
- π‘ Examples - Integration examples
- Adminator right to left - Adminator modified to work with right to left languages like Persian and Arabic
Here is a brief explanation of the template folder structure and some of its main files usage:
βββ src # Contains all template source files.
β βββ assets # Contains JS, CSS, images and icon fonts.
β β βββ scripts # Contains all JavaScript files.
β β β βββ charts # Chart.js, Sparkline & Pie Chart plugins init.
β β β βββ chat # All chat app JS code.
β β β βββ constants # Template constant values like color values.
β β β βββ datatable # Date table plugin init.
β β β βββ datepicker # Bootstrap datepicker init.
β β β βββ email # All email app code.
β β β βββ fullcalendar # Fullcalendar plugin init.
β β β βββ googleMaps # Google maps API integration code.
β β β βββ masonry # Masonry layout code.
β β β βββ popover # Bootstrap popover plugin init.
β β β βββ scrollbar # Perfect scrollbar plugin init.
β β β βββ search # Topbar toggle search init.
β β β βββ sidebar # Sidebar JS code.
β β β βββ skycons # Animated icons plugin init.
β β β βββ utils # Basic utils used for proper rendering.
β β β βββ vectorMaps # Vector maps plugin init.
β β β βββ app.js # Main application entry point.
β β β
β β βββ static # Contains the non-code files.
β β β βββ fonts # Contains icon fonts.
β β β βββ images # Contains all template images/svg.
β β β
β β βββ styles # Contains all SCSS files.
β β βββ spec # Contains custom SCSS files.
β β β βββ components # Contains all template components.
β β β βββ generic # Contains basic scaffolding styles.
β β β βββ screens # Contains views specific styles.
β β β βββ settings # Contains all template variables.
β β β βββ tools # Contains all mixins.
β β β βββ utils # Contains helper classes.
β β β βββ index.scss # Indicator file.
β β β
β β βββ vendor # Contains all plugin files & custom styles.
β β βββ index.scss # Main style entry point.
β β
β βββ *.html # All HTML template pages.
βββ webpack # Contains Webpack configuration.
β βββ plugins # Contains all Webpack plugins config.
β βββ rules # Contains Webpack loaders config.
β βββ config.js # Main Webpack configuration.
β βββ devServer.js # Development server configuration.
β βββ manifest.js # Build system constants.
β
βββ .babelrc # Babel ES6 transpiler configuration.
βββ .editorconfig # Code editor consistency settings.
βββ eslint.config.mjs # ESLint 9.x flat configuration.
βββ .gitattributes # Git attributes configuration.
βββ .gitignore # Git ignore patterns.
βββ .stylelintrc.json # SCSS/CSS linting configuration.
βββ browserslist # Supported browsers configuration.
βββ CHANGELOG.md # Version history and updates.
βββ package.json # Node.js package configuration.
βββ README.md # This documentation file.
βββ webpack.config.js # Webpack entry configuration.
In deployment process, you have several commands:
- Production Build - Generate optimized assets for production:
npm run build
- Production Preview - Preview the production build locally:
npm run preview
- Custom Builds:
# Unminified production build (for debugging)
npm run release:unminified
# Minified production build (smallest size)
npm run release:minified
The built files will be available in the dist/
directory.
- Bootstrap 5.3.7 - Modern CSS framework
- Webpack 5.99.9 - Module bundler and build tool
- Babel 7.27.x - JavaScript transpiler
- Sass 1.89.2 - CSS preprocessor
- PostCSS 8.5.6 - CSS transformations
- ESLint 9.29.0 - JavaScript linting (flat config)
- Stylelint 16.21.0 - CSS/SCSS linting
- Chart.js 4.5.0 - Modern charting library
- FullCalendar 6.1.17 - Interactive calendar
- DataTables - Advanced table functionality
- Easy Pie Chart - Animated pie charts
- Perfect Scrollbar 1.5.6 - Custom scrollbars
- jQuery 3.7.1 - DOM manipulation library
- Lodash 4.17.21 - Utility library
- Day.js 1.11.13 - Modern 2KB date library (replaces Moment.js)
- Masonry 4.2.2 - Grid layouts
- jQuery Sparkline - Inline charts
- jVectorMap - Interactive vector maps
- Font Awesome - Icon library
- Themify Icons - Additional icons
- Roboto Font - Google Fonts
- Bootstrap Datepicker - Date selection
- Skycons - Animated weather icons
- Load Google Maps API - Maps integration
See CHANGELOG.md for detailed version history.
π Online Documentation includes comprehensive guides for all features.
- π Complete Dark Mode System with intelligent theme switching
- π¨ CSS Variables Architecture for comprehensive theming
- π Component Integration - Charts, calendars, and maps are theme-aware
- β‘ Smart Toggle with OS preference detection
- πΎ Persistent Storage remembers user theme choice
- V 2.1.0: Upgraded all dependencies
- V 2.0.0: Upgrade to Bootstrap 5
- V 1.1.0: Upgrade to webpack 5
- V 1.0.0: Initial Release
- Bootstrap Dashboards
- Bootstrap Templates
- HTML Templates
- Free Admin Dashboards
- Website Templates
- Free CSS Templates
- WordPress Themes
Adminator is licensed under The MIT License (MIT). Which means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the final products. But you always need to state that Colorlib is the original author of this template.