🌙 Release v2.6.0: Complete Dark Mode System - Smart theme toggle with OS detection, real-time switching, comprehensive component integration, CSS variables architecture, and theme-aware Chart.js/FullCalendar/Vector Maps

Author: puikinsh

CHANGELOG.md

@@ -1,5 +1,119 @@
 # Changelog
 
+## [2.6.0] - 2025-01-21
+
+### 🌙 Dark Mode Release
+
+This release introduces a comprehensive dark mode system with seamless theme switching and component integration.
+
+### ✨ New Features
+
+**🎨 Complete Dark Mode System:**
+- **Smart Theme Toggle**: Bootstrap-based switch with sun/moon icons and "Light/Dark" labels
+- **OS Preference Detection**: Automatically detects and applies user's preferred color scheme
+- **Persistent Theme Storage**: Remembers user's theme choice across sessions
+- **Instant Theme Switching**: Real-time theme updates without page reload
+
+**🎯 Theme-Aware Components:**
+- **Chart.js Integration**: Dynamic color schemes for all chart types with proper contrast
+- **FullCalendar Support**: Dark-mode aware calendar with proper border and text colors
+- **Vector Maps**: Custom color palettes for both light and dark themes
+- **Google Maps**: Theme-specific styling for landscapes, highways, and POI markers
+- **Sparkline Charts**: Optimized color sets for dark mode visibility
+- **Skycons Weather Icons**: Adaptive colors for better dark mode contrast
+
+**🎛️ CSS Architecture:**
+- **CSS Custom Properties**: Comprehensive variable system for consistent theming
+- **Semantic Color Naming**: Intuitive color variables (--c-text-base, --c-bkg-card, etc.)
+- **Component Isolation**: Each component respects global theme variables
+- **Responsive Design**: Theme switching works seamlessly across all screen sizes
+
+**🖼️ Visual Enhancements:**
+- **Adaptive Logo**: SVG logo automatically adjusts colors based on theme
+- **Smart Contrast**: Proper text/background contrast ratios in both themes
+- **Border Consistency**: Unified border colors throughout the interface
+- **Loading States**: Theme-aware loaders and progress indicators
+
+### 🔧 Technical Improvements
+
+**🏗️ Architecture Updates:**
+- **Theme Utility Module**: New `src/assets/scripts/utils/theme.js` with comprehensive theme management
+- **CSS Variables File**: New `src/assets/styles/utils/theme.css` with light/dark color schemes
+- **Component Integration**: Updated all major components to support theme switching
+- **Event System**: Custom events for theme change notifications
+
+**⚡ Performance Optimizations:**
+- **Efficient Switching**: Minimal DOM manipulation for theme changes
+- **CSS Variable Updates**: Leverages browser-native CSS custom properties
+- **Memory Management**: Proper cleanup of theme-related event listeners
+- **Build Integration**: Theme assets are properly bundled and optimized
+
+### 🎮 User Experience
+
+**💡 Intuitive Controls:**
+- **Accessible Toggle**: Proper ARIA labels and keyboard navigation support
+- **Visual Feedback**: Clear indication of current theme state
+- **Smooth Transitions**: CSS transitions for theme switching (where appropriate)
+- **Consistent Placement**: Theme toggle integrated into header navigation
+
+**🔄 Smart Behavior:**
+- **First-Time Detection**: Respects OS dark mode preference on first visit
+- **Cross-Session Persistence**: Theme choice remembered across browser sessions
+- **Fallback Handling**: Graceful degradation when localStorage is unavailable
+- **Dynamic Updates**: All components update immediately when theme changes
+
+### 🛠️ Development Experience
+
+**📝 Documentation:**
+- **Theme API**: Comprehensive methods for theme management
+- **Color Guidelines**: Standardized color usage across components
+- **Component Examples**: Updated examples showing theme-aware components
+- **Migration Guide**: Instructions for theme integration in custom components
+
+### 🔍 Enhanced Components
+
+**📊 Charts & Data Visualization:**
+- Chart.js with dynamic color schemes
+- Sparkline charts with theme-optimized colors
+- Easy Pie Charts with adaptive styling
+- Vector maps with custom dark mode palettes
+
+**🗓️ Interactive Elements:**
+- FullCalendar with proper dark mode borders
+- DataTables with theme-consistent styling  
+- Date pickers with adaptive colors
+- Form elements with dark mode support
+
+**🗺️ Maps & Location:**
+- Google Maps with custom dark mode styling
+- Vector maps with region-specific color schemes
+- Marker and overlay theme integration
+
+### ⚠️ Breaking Changes
+
+None. This release is fully backward compatible.
+
+### 🏁 Migration Guide
+
+Existing projects will automatically inherit dark mode capabilities. No code changes required.
+
+**Optional Enhancements:**
+- Add `data-theme` attribute handling for custom components
+- Use CSS variables from `theme.css` for consistent coloring
+- Listen for `adminator:themeChanged` events for custom theme handling
+
+### 📋 Files Added/Modified
+
+**New Files:**
+- `src/assets/scripts/utils/theme.js` - Theme management utility
+- `src/assets/styles/utils/theme.css` - CSS variables and color schemes
+
+**Enhanced Files:**
+- All HTML pages updated with theme-aware components
+- Component JavaScript files updated for theme integration
+- SCSS files enhanced with CSS variable usage
+- Logo SVG updated for theme compatibility
+
 ## [2.5.0] - 2025-06-16
 
 ### 🎉 Major Modernization Release

README.md

@@ -1,8 +1,10 @@
-# Adminator Bootstrap 5 Admin Template v2.5.0
+# Adminator Bootstrap 5 Admin Template v2.6.0
 
 **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.5.0)**: Completely modernized build system with latest dependencies, ESLint 9.x flat config, and enhanced development experience.
+✨ **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.
 
 Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
 
@@ -27,18 +29,31 @@ Preview of this awesome admin template available here: https://colorlib.com/poly
 - [Authors](#authors)
 - [License](#license)
 
-## What's New in v2.5.0
+## What's New in v2.6.0
+
+🌙 **Dark Mode Release** - Complete dark mode system with seamless theme switching:
 
-🎉 **Major Modernization Release** - Complete overhaul of the development stack:
+### 🎨 Dark Mode Features
+- **🌗 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
 
-- **🚀 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.5), Bootstrap (5.3.6)
-- **📊 Updated Components**: Chart.js 4.5.0, FullCalendar 6.1.17
-- **🛡️ Zero Vulnerabilities**: Complete security audit with all packages secure
-- **🔄 Modern Tooling**: babel-loader 10.x, copy-webpack-plugin 13.x, webpack-cli 6.x
-- **📱 Enhanced Experience**: Better development server, faster builds, improved linting
+### 🛠️ Technical Implementation
+- **🎨 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
+
+### 🚀 Previous Updates (v2.5.0)
+- **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.5), Bootstrap (5.3.6)
+- **Updated Components**: Chart.js 4.5.0, FullCalendar 6.1.17
+- **Zero Vulnerabilities**: Complete security audit with all packages secure
 
 ## Getting Started
 
@@ -101,6 +116,56 @@ npm run lint:scss
 npm run lint
 ```
 
+## 🌙 Dark Mode Usage
+
+Adminator now includes a comprehensive dark mode system that works out of the box:
+
+### **Automatic Setup**
+- Dark mode is automatically initialized on page load
+- Detects your OS preference (light/dark) on first visit
+- Remembers your choice across browser sessions
+
+### **Theme Toggle**
+- 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
+
+### **For Developers**
+
+**Using the Theme API:**
+```javascript
+// 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:**
+```css
+.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
+
 ## Adminator for other platforms and frameworks
 * [Adminator right to left](https://github.com/mortezakarimi/Adminator-admin-dashboard-rtl) - Adminator modified to work with right to left languages like Persian and Arabic
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminator",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "private": true,
   "description": "HTML Admin Template",
   "scripts": {

src/assets/scripts/app.js

@@ -6,6 +6,7 @@
 import bootstrap from 'bootstrap';
 import DOM from './utils/dom';
 import DateUtils from './utils/date';
+import Theme from './utils/theme';
 import Sidebar from './components/Sidebar';
 import ChartComponent from './components/Chart';
 
@@ -50,6 +51,7 @@ class AdminatorApp {
       this.initCharts();
       this.initDataTables();
       this.initDatePickers();
+      this.initTheme();
 
       // Setup global event listeners
       this.setupGlobalEvents();
@@ -250,6 +252,49 @@ class AdminatorApp {
     });
   }
 
+  /**
+   * Initialize theme
+   */
+  initTheme() {
+    Theme.init();
+
+    // inject toggle switch if missing
+    const navRight = document.querySelector('.nav-right');
+    if (navRight && !document.getElementById('theme-toggle')) {
+      const li = document.createElement('li');
+      li.className = 'theme-toggle d-flex ai-c';
+      li.innerHTML = `
+        <div class="form-check form-switch d-flex ai-c" style="margin: 0; padding: 0;">
+          <label class="form-check-label me-2 text-nowrap c-grey-700" for="theme-toggle" style="font-size: 12px; margin-right: 8px;">
+            <i class="ti-sun" style="margin-right: 4px;"></i>Light
+          </label>
+          <input class="form-check-input" type="checkbox" id="theme-toggle" style="margin: 0;">
+          <label class="form-check-label ms-2 text-nowrap c-grey-700" for="theme-toggle" style="font-size: 12px; margin-left: 8px;">
+            Dark<i class="ti-moon" style="margin-left: 4px;"></i>
+          </label>
+        </div>
+      `;
+      navRight.insertBefore(li, navRight.firstElementChild);
+
+      const toggleInput = li.querySelector('#theme-toggle');
+
+      const updateSwitch = () => {
+        toggleInput.checked = Theme.current() === 'dark';
+      };
+      updateSwitch();
+
+      toggleInput.addEventListener('change', (e) => {
+        Theme.apply(e.target.checked ? 'dark' : 'light');
+      });
+
+      window.addEventListener('adminator:themeChanged', () => {
+        updateSwitch();
+        const charts = this.components.get('charts');
+        if (charts) charts.redrawCharts();
+      });
+    }
+  }
+
   /**
    * Setup global event listeners
    */

src/assets/scripts/charts/sparkline/index.js

@@ -2,21 +2,24 @@ import * as $ from 'jquery';
 import 'jquery-sparkline';
 import { debounce } from 'lodash';
 import { COLORS } from '../../constants/colors';
+import Theme from '../../utils/theme.js';
 
 export default (function () {
   // ------------------------------------------------------
   // @Dashboard Sparklines
   // ------------------------------------------------------
 
   const drawSparklines = () => {
+    const sparkColors = Theme.getSparklineColors();
+    
     if ($('#sparklinedash').length > 0) {
       $('#sparklinedash').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
         type: 'bar',
         height: '20',
         barWidth: '3',
         resize: true,
         barSpacing: '3',
-        barColor: '#4caf50',
+        barColor: sparkColors.success,
       });
     }
 
@@ -27,7 +30,7 @@ export default (function () {
         barWidth: '3',
         resize: true,
         barSpacing: '3',
-        barColor: '#9675ce',
+        barColor: sparkColors.purple,
       });
     }
 
@@ -38,7 +41,7 @@ export default (function () {
         barWidth: '3',
         resize: true,
         barSpacing: '3',
-        barColor: '#03a9f3',
+        barColor: sparkColors.info,
       });
     }
 
@@ -49,7 +52,7 @@ export default (function () {
         barWidth: '3',
         resize: true,
         barSpacing: '3',
-        barColor: '#f96262',
+        barColor: sparkColors.danger,
       });
     }
   };
@@ -58,6 +61,9 @@ export default (function () {
 
   // Redraw sparklines on resize
   $(window).resize(debounce(drawSparklines, 150));
+  
+  // Listen for theme changes
+  window.addEventListener('adminator:themeChanged', debounce(drawSparklines, 150));
 
   // ------------------------------------------------------
   // @Other Sparklines
@@ -77,7 +83,7 @@ export default (function () {
     {
       type: 'bar',
       resize: true,
-      barColor: '#aaf',
+      barColor: Theme.getSparklineColors().light,
       height: '20',
     }
   );