Mystic is a comprehensive Admin Dashboard HTML5 Template featuring 128 total pages (63 light version pages + 63 dark version pages + root index + documentation), 5 unique dashboard variants, and built on Bootstrap 4.1.1. Unlike most admin templates that ship only a colour toggle, Mystic delivers complete, fully-coded separate builds for both light and dark modes so you can deploy either version immediately without any configuration. Every widget, chart, form, app, and UI component has been designed and tested in both colour schemes.
Mystic is also the only admin dashboard template in its category to carry a full ARIA v1.2 accessibility pass. Skip navigation links, keyboard focus outlines, aria-expanded mobile navigation, aria-label social icons, and keyboard-operable sliders and back-to-top controls are present on every page in both versions. If your project serves enterprise clients, government agencies, or any audience requiring accessibility compliance, Mystic removes that barrier entirely while competitors leave you to solve it yourself.
Key Features
- 128 total pages: 63 light version pages, 63 dark version pages, root chooser index, and documentation
- 5 unique pre-built dashboard variants: Cryptocurrency, Web Analytics, Social Media, Project Management, and Client Management
- Complete separate light and dark version folder structures (not a CSS toggle)
- ARIA v1.2 accessibility pass across every page in both versions
- Bootstrap 4.1.1 grid and component system
- Gradient colour switcher with 6 schemes: Cyan-Green, Purple, Green, Orange, Red, Blue
- Primary colour palette: Blue #357ffa, Secondary/Purple #445cc8, Dark #34334a
- Roboto (Google Fonts) as the base typeface
- Full app suite: Email App, Chat App, To-Do List App
- Chart.js and Morris Charts integration
- Google Maps and Vector Maps integration
- 4-type forms system including multi-step wizard and jQuery Validate
- DataTables with sorting, filtering, and pagination
- 11 UI Basic component categories and 7 UI Advanced component categories
- SweetAlerts and Toast notification systems
- 3 icon libraries: Font Awesome, Flaticon, Materialize Icons
- 11 pre-built utility pages: invoice, lock screen, login (modal + full-page), register, coming soon, error, FAQ, user profile, portfolio
- Shepherd.js guided product tour
- Image cropper, drag-and-drop, range sliders, star rating
- Keyboard shortcut system (Alt+1 through Alt+6 for QuickBar tabs, Alt+Q for configure mode)
- W3C-valid, well-commented HTML5 markup
- Cross-browser compatible (Chrome, Firefox, Safari, Edge)
- Fully responsive across mobile, tablet, and desktop
Complete Light and Dark Versions
- Two entirely separate, self-contained folder structures: light/ and dark/
- Every one of the 63 pages exists in both versions with full styling applied
- Light mode uses body class ms-primary-theme; dark mode uses ms-dark-theme
- Dark backgrounds: deep navy sidebar, near-black canvas, softened card surfaces
- Light backgrounds: clean white cards, light grey canvas, high-contrast text
- Both versions include the full gradient colour switcher panel
- Both versions pass the ARIA v1.2 accessibility audit
- Deploy either version independently or present both on a root chooser page
- No theming JavaScript logic required at runtime: the correct version is pre-built and ready to serve
- Saves significant development time compared to implementing a dark/light toggle from scratch
ARIA and Keyboard Accessibility (v1.2 Competitor Differentiator)
- Full ARIA v1.2 accessibility pass completed 10/03/2026
- Skip navigation link present on every page in both light and dark versions
- main id=”main-content” landmark on every page for screen reader direct navigation
- Keyboard-only focus styles: a:focus-visible and button:focus-visible use a 3px solid outline that does not appear on mouse click
- Social icon aria-labels auto-injected by JavaScript so no manual markup is required
- Slider components use role=”button”, aria-label, and respond to Enter and Space keys
- Back-to-top button carries aria-label and role=”button”
- Mobile navigation includes aria-label and aria-expanded toggling on open/close
- All close buttons carry aria-label=”Close”
- Competes in a market where virtually no other admin dashboard template has implemented ARIA at any level
- Suitable for government, enterprise, education, and healthcare projects with accessibility requirements
5 Dashboard Variants
- Main Dashboard: general KPI summary, revenue chart, recent orders, activity feed, and to-do widget
- Cryptocurrency Dashboard: live coin cards, portfolio balance, market cap chart, transaction history table, and wallet panel
- Web Analytics Dashboard: sessions, bounce rate, page views, acquisition channels chart, device breakdown, and top pages table
- Social Media Dashboard: follower counts, engagement rate, post performance chart, platform breakdown, and audience growth timeline
- Project Management Dashboard: active projects board, milestone timeline, team workload chart, open tasks list, and budget tracker
- Client Management Dashboard: client list, deal pipeline, revenue per client chart, recent activity, and meeting schedule
- Each variant uses the same sidebar navigation and header shell, making it easy to mix and match sections
- Covers the six most in-demand SaaS backend use cases out of the box
Built-in App Suite (Email + Chat + To-Do)
- Email App: three-panel layout with folder list, message list, and message reader; includes compose modal, inbox, sent, and trash
- Chat App: contacts sidebar, active conversation thread, message input area, emoji support, and file attachment UI
- To-Do List App: task creation, priority tagging, completion toggle, and category filtering
- All three apps are fully designed with dummy data so they are ready to wire to a back-end API
- App pages exist in both light and dark versions
- Eliminates the need to purchase or build separate micro-frontends for common SaaS features
Charts and Data Visualization
- Chart.js integration: line, bar, pie, doughnut, radar, and polar area chart examples
- Morris Charts integration: line, area, bar, and donut examples with customised colour schemes
- All chart demos available in both light and dark versions with colour-adjusted backgrounds and label colours
- Chart colour palettes aligned to the primary blue #357ffa and gradient theme tokens
- Responsive chart containers that resize cleanly on mobile and tablet
- Charts used throughout the 5 dashboard variants with real-looking dummy datasets
Interactive Maps (Google + Vector)
- Google Maps page: standard embed with custom pin markers and info windows
- Vector Maps page: SVG-based world and regional maps with hover highlights and data overlays
- Both map pages available in light and dark versions
- Map containers are responsive and scale to the grid column width
- Useful for analytics dashboards showing geographic data, delivery zones, or audience location breakdowns
Forms System (4 Types Including Multi-step Wizard)
- Form Elements: text inputs, textareas, select dropdowns, checkboxes, radio buttons, switches, date pickers, and file upload
- Form Layout: horizontal, vertical, inline, and grid layout patterns ready to copy into any project
- Form Validation: client-side validation using jQuery Validate with styled error and success states
- Form Wizard: multi-step form using jQuery Steps with step indicators, progress tracking, and next/back navigation
- All form components styled consistently across light and dark versions
- Focus states meet ARIA keyboard-navigation standards from the v1.2 accessibility pass
Data Tables (with Sorting and Filtering)
- Basic Tables: standard HTML table styles including striped, bordered, hover, condensed, and responsive variants
- DataTables: full jQuery DataTables integration with column sorting, search/filter input, pagination, and per-page row count selector
- Tables styled to match both light and dark colour schemes
- Responsive tables collapse to horizontal scroll on small viewports
- Used throughout the dashboard variants (transaction history, top pages, client list, etc.)
UI Basic Components (11 Categories)
- Accordions: standard and flush variants with smooth height transitions
- Alerts: contextual colour variants (success, info, warning, danger) with dismissible option
- Badges: pill and square badges in all colour variants, inline and standalone
- Breadcrumbs: default and custom separator styles
- Buttons: solid, outline, ghost, icon-only, loading spinner, and size variants
- Cards: basic card, card with image, card with header/footer, card groups, and card decks
- Pagination: default, rounded, and size variants with disabled and active states
- Preloaders: spinner and bar preloader components for page and section loading states
- Progress Bars: striped, animated, labelled, and multi-segment variants
- Tabs: horizontal and vertical tab panels with pill and underline styles
- Typography: headings, body text, lead paragraphs, blockquotes, lists, code, and utility text classes
UI Advanced Components (7 Categories)
- Image Cropper: Cropper.js integration with zoom, rotate, aspect ratio lock, and crop output preview
- Draggables: drag-and-drop sortable lists and cards using jQuery UI Sortable
- Modals: small, default, large, full-screen, and scrollable modal variants; includes confirm dialog pattern
- Range Slider: single and dual-handle range sliders with value output
- Rating: star rating component with half-star and read-only modes
- Sliders: content and image carousel/slider components (ARIA v1.2: role=button, aria-label, Enter/Space keyboard support)
- Tour: Shepherd.js guided walkthrough with step bubbles, progress indicator, and skip/complete controls
Popup and Notification System
- SweetAlerts: rich modal alert dialogs including basic, success, error, warning, info, input prompt, and chained alerts
- Toast Notifications: lightweight non-blocking toast messages in all contextual colours with auto-dismiss and manual close
- Both systems available in light and dark versions with theme-matched backgrounds
- SweetAlerts styled to match the Mystic primary blue and gradient token system
- Toast stacking behaviour with configurable position (top-right, bottom-right, etc.)
Icon Libraries (3 Sets)
- Font Awesome: comprehensive icon reference page covering solid, regular, and brand icons
- Flaticon: curated set of flat-style icons with search-friendly demo page
- Materialize Icons: Google Material Design icon set reference page
- All three icon libraries loaded and documented so developers can choose the set that fits their project
- Icon pages available in both light and dark versions
- Material Icons font loaded alongside Roboto from Google Fonts
Pre-built Pages (11 Types)
- Coming Soon: countdown timer, email capture, and social links
- Login (Default): full-page login form with logo and background
- Login (Modal): login presented inside a centred modal overlay
- Register (Default): full-page registration form
- Register (Modal): registration in a modal overlay
- Error 404: branded 404 page with return-home button
- FAQ: accordion-based FAQ layout with section grouping
- Invoice: print-ready invoice template with itemised table, totals, and branding area
- Lock Screen: user avatar, name, and PIN/password entry to re-enter the dashboard
- User Profile: avatar, bio, stats bar, activity timeline, and tabbed content sections
- Portfolio: filterable grid portfolio layout suitable for showcasing work within an admin context
Animation System
- Dedicated animation demo page covering CSS and JavaScript-driven entrance and interaction animations
- Fade, slide, zoom, bounce, and flip animation classes available as utilities
- Scroll-triggered animation on dashboard stat counters and progress bars
- Smooth CSS transitions on sidebar open/close, panel slide, and dropdown reveal
- Animation respects prefers-reduced-motion media query to support users who are sensitive to motion
Widgets
- Dedicated widgets page collecting all reusable widget patterns in one reference
- Stat count cards with icon, value, label, and trend indicator
- Mini chart sparkline widgets for inline trend display
- Activity feed widget with avatar, action text, and timestamp
- Weather widget, social follower count cards, and to-do summary widget
- All widgets available in both light and dark versions
- Copy-paste ready with commented HTML structure
Settings and Quick Bar Panel
- Settings panel slides in from the right, accessible from the top navigation bar
- Gradient colour scheme switcher: Cyan-Green (#0ab1e8 to #28f39a), Purple (#926afe to #bd9aff), Green (#12b252 to #31e97a), Orange (#fea837 to #fed257), Red (#eb025d to #fe4749), Blue (#3e60ff to #5ba0fd)
- QuickBar panel with 6 tabbed sections switchable by clicking or using Alt+1 through Alt+6 keyboard shortcuts
- Configure mode toggled with Alt+Q to arrange QuickBar tabs
- Settings persist in the browser session without requiring a back-end store
- Available in both light and dark versions
Keyboard Shortcut System
- Alt+1 through Alt+6: switch between the six QuickBar panel tabs without using a mouse
- Alt+Q: toggle QuickBar configure mode for tab arrangement
- All interactive components (sliders, carousels, back-to-top, close buttons) operable by keyboard using Enter or Space
- Skip link on every page lets keyboard users bypass the navigation and jump directly to main content
- Mobile navigation toggle supports keyboard-only operation with aria-expanded state announced to screen readers
- Keyboard shortcut system is native JavaScript with no dependency on external libraries
Navigation and UX
- Vertical sidebar navigation with collapsible sub-menus and active state highlighting
- Sidebar collapses to icon-only mode on smaller viewports or by user toggle
- Top header bar with search input, notification bell, message icon, and user avatar dropdown
- Breadcrumb trail on inner pages for orientation and quick back-navigation
- Sticky header remains visible while scrolling long content pages
- Back-to-top button with smooth scroll, aria-label, and role=button for keyboard access
- Mobile navigation includes hamburger toggle with aria-expanded for screen reader feedback
- Root index.html chooser page lets users pick the light or dark version before entering the dashboard
Typography System
- Base font: Roboto loaded from Google Fonts (weights 300, 400, 500, 700)
- Type scale covers h1 through h6 with consistent line-height and margin rhythm
- Lead paragraph, small text, muted text, and text-truncate utility classes
- Blockquote with left-border accent in the primary blue #357ffa
- Inline code and code block styles with contrast-adjusted backgrounds for both themes
- Ordered and unordered list styles with proper indent and spacing
- Typography demo page shows every variant in context for quick reference
Cross-Browser and Device Compatibility
- Tested in Google Chrome (latest), Mozilla Firefox (latest), Apple Safari (latest), and Microsoft Edge (latest)
- Fully responsive layout built on Bootstrap 4.1.1 12-column grid
- Breakpoints: xs (under 576px), sm (576px+), md (768px+), lg (992px+), xl (1200px+)
- All dashboard, app, and component pages reflow correctly on smartphone and tablet viewports
- Retina/HiDPI display ready: SVG icons and vector maps render sharply at all pixel densities
- Touch-friendly tap targets throughout the sidebar, modals, and app interfaces
- No IE11 support required (modern browser baseline)
Pages Included
- Root chooser: index.html (Light/Dark Chooser)
- Dashboards
- Main Dashboard (Light)
- Cryptocurrency Dashboard (Light)
- Web Analytics Dashboard (Light)
- Social Media Dashboard (Light)
- Project Management Dashboard (Light)
- Client Management Dashboard (Light)
- Apps
- Chat App (Light)
- Email App (Light)
- To-Do List App (Light)
- Charts
- Chart.js (Light)
- Morris Charts (Light)
- Forms
- Form Elements (Light)
- Form Layout (Light)
- Form Validation (Light)
- Form Wizard (Light)
- Icons
- Flaticons (Light)
- Font Awesome Icons (Light)
- Materialize Icons (Light)
- Maps
- Google Maps (Light)
- Vector Maps (Light)
- Popups
- SweetAlerts (Light)
- Toast Notifications (Light)
- Pre-built Pages
- Coming Soon (Light)
- Login – Default (Light)
- Register – Default (Light)
- Error 404 (Light)
- FAQ (Light)
- Invoice (Light)
- Lock Screen (Light)
- Login – Modal (Light)
- Register – Modal (Light)
- Portfolio (Light)
- User Profile (Light)
- Tables
- Basic Tables (Light)
- DataTables (Light)
- UI Advanced
- Image Cropper (Light)
- Draggables (Light)
- Modals (Light)
- Range Slider (Light)
- Rating (Light)
- Sliders (Light)
- Tour (Light)
- UI Basic
- Accordions (Light)
- Alerts (Light)
- Badges (Light)
- Breadcrumbs (Light)
- Buttons (Light)
- Cards (Light)
- Pagination (Light)
- Preloaders (Light)
- Progress Bars (Light)
- Tabs (Light)
- Typography (Light)
- Other
- Animation (Light)
- Widgets (Light)
- All of the above pages also exist in the dark version at the same paths under dark/
Credits and Sources
- Bootstrap 4.1.1 – https://getbootstrap.com/ – MIT License
- jQuery – https://jquery.com/ – MIT License
- Chart.js – https://www.chartjs.org/ – MIT License
- Morris.js – https://morrisjs.github.io/morris.js/ – Simplified BSD License
- DataTables – https://datatables.net/ – MIT License
- jQuery Validate – https://jqueryvalidation.org/ – MIT License
- jQuery Steps – https://www.jquery-steps.com/ – MIT License
- Shepherd.js – https://shepherdjs.dev/ – MIT License
- Cropper.js – https://fengyuanchen.github.io/cropperjs/ – MIT License
- SweetAlert2 – https://sweetalert2.github.io/ – MIT License
- Font Awesome – https://fontawesome.com/ – SIL OFL 1.1 (icons), MIT License (code)
- Flaticon – https://www.flaticon.com/
- Google Material Icons – https://fonts.google.com/icons – Apache License 2.0
- Google Fonts (Roboto) – https://fonts.google.com/ – Apache License 2.0
- jQuery UI (Sortable/Draggable) – https://jqueryui.com/ – MIT License
- Demo images: Unsplash – https://unsplash.com/ – Unsplash License (not included in download; replace with licensed images for production)
v1.2.0 10/03/2026 - ARIA accessibility pass across all pages in both light and dark versions - Skip navigation link added to every page - main id="main-content" landmark added to every page - a:focus-visible and button:focus-visible keyboard-only 3px outline - Social icon aria-labels auto-injected by JavaScript - Slider components: role=button, aria-label, Enter/Space keyboard support - Back-to-top button: aria-label and role=button - Mobile navigation: aria-label and aria-expanded state toggle - All close buttons: aria-label="Close" v1.1.0 (initial ThemeForest release) - Initial release with 128 pages across light and dark versions - 5 dashboard variants: Cryptocurrency, Web Analytics, Social Media, Project Management, Client Management - Full Email App, Chat App, To-Do List App - Chart.js and Morris Charts integration - Google Maps and Vector Maps - 4-type forms system (elements, layout, validation, wizard) - DataTables with sorting and filtering - 11 UI Basic component categories - 7 UI Advanced component categories (Cropper, Draggables, Modals, Range Slider, Rating, Sliders, Tour) - SweetAlerts and Toast notification system - 3 icon library reference pages (Font Awesome, Flaticon, Materialize) - 11 pre-built utility pages - Gradient colour switcher with 6 schemes - Keyboard shortcut system (Alt+1-6 QuickBar, Alt+Q configure mode) - Animation page and Widgets reference page