Ticket #4391 - Birthday. Dark mode for calendar.

inc/js/jquery.webForms.js

@@ -307,6 +307,7 @@
                     ]).format(sFormat);
                 }
 
+                var bDatePicker = false;
                 if (this.getAttribute("type") == "date" || this.getAttribute("type") == "date_calendar" || this.getAttribute("type") == "datepicker") { // Date picker
 
                     flatpickr(this, {
@@ -322,6 +323,8 @@
                         formatDate: formatDateUtc,
                     });
 
+                    bDatePicker = true;
+
                 } else if(this.getAttribute("type") == "datetime" || this.getAttribute("type") == "date_time") { // DateTime picker
 
                     var oPickerOptions = {
@@ -355,6 +358,8 @@
                     }
                     flatpickr(this, oPickerOptions);
 
+                    bDatePicker = true;
+
                 } else if(this.getAttribute("type") == "dateselect") { // DateTime selector
                     moment.locale(sLang);
                     $(this).combodate({
@@ -367,6 +372,30 @@
                         customClass: 'bx-def-font-inputs bx-form-input-select block w-full py-2 px-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:text-gray-900 dark:focus:text-gray-100 focus:ring-blue-500 focus:border-opacity-70 focus:ring-opacity-20 focus:border-blue-500 text-sm text-gray-700 dark:text-gray-300 appearance-none',
                     });
                 }
+                
+                if(bDatePicker) {
+                    if (typeof window.glOnColorSchemeChange === 'undefined')
+                        window.glOnColorSchemeChange = [];    
+
+                    window.glOnColorSchemeChange.push(function(iCode) {
+                        var sNameL = 'flatpickr.min.css';
+                        var sNameD = 'themes/dark.css';
+                        var oStylesheet = null;
+                        switch(iCode) {
+                            case 1: //--- light
+                                oStylesheet = document.head.querySelector("link[href*='" + sNameD + "']");
+                                if(oStylesheet)
+                                    oStylesheet.href = oStylesheet.href.replace(sNameD, sNameL);
+                                break;
+
+                            case 2: //--- dark
+                                oStylesheet = document.head.querySelector("link[href*='" + sNameL + "']");
+                                if(oStylesheet)
+                                    oStylesheet.href = oStylesheet.href.replace(sNameL, sNameD);
+                                break;
+                        }
+                    });
+                }
 
                 if (window.navigator.appVersion.search(/Chrome\/(.*?) /) == -1 || parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10) < 24)
                     if( this.getAttribute("allow_input") == null)

modules/boonex/artificer/js/utils.js

@@ -27,6 +27,7 @@ BxArtificerUtils.prototype.init = function()
             window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
                 $this.setColorSchemeIcon();
                 $this.setColorSchemeHtml();
+                $this.onColorSchemeChange();
             });
             break;
 
@@ -43,32 +44,39 @@ BxArtificerUtils.prototype.init = function()
 
     $(document).ready(function() {
         $this.setColorSchemeIcon();
+        $this.onColorSchemeChange();
     });
 };
 
 BxArtificerUtils.prototype.setColorScheme = function(iCode)
 {
     switch(iCode) {
-      case 0:
-        localStorage.removeItem('theme');
-        break;
+        case 0:
+            localStorage.removeItem('theme');
+            break;
 
-      case 1:
-        localStorage.theme = 'sun'
-        break;
+        case 1:
+            localStorage.theme = 'sun'
+            break;
 
-      case 2:
-        localStorage.theme = 'dark'
-        break;
+        case 2:
+            localStorage.theme = 'dark'
+            break;
     }
 
     this.setColorSchemeIcon();
     this.setColorSchemeHtml();
+    this.onColorSchemeChange(iCode);
+};
+
+BxArtificerUtils.prototype.isColorSchemeDark = function()
+{
+    return localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
 };
 
 BxArtificerUtils.prototype.setColorSchemeHtml = function()
 {
-    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) 
+    if(this.isColorSchemeDark())
         $('html').addClass('dark')
     else
         $('html').removeClass('dark')
@@ -76,13 +84,23 @@ BxArtificerUtils.prototype.setColorSchemeHtml = function()
 
 BxArtificerUtils.prototype.setColorSchemeIcon = function() 
 {
-    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    if(this.isColorSchemeDark())
         $('.bx-sb-theme-switcher .sys-icon').addClass('moon').removeClass('sun');
-    }
-
-    if (localStorage.theme === 'sun' || (!('theme' in localStorage) && !window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    else
         $('.bx-sb-theme-switcher .sys-icon').addClass('sun').removeClass('moon');
-    }
+};
+
+BxArtificerUtils.prototype.onColorSchemeChange = function(iCode) 
+{
+    if(typeof glOnColorSchemeChange === 'undefined' || !(glOnColorSchemeChange instanceof Array)) 
+        return;
+
+    if(typeof iCode === 'undefined' || !iCode)
+        iCode = this.isColorSchemeDark() ? 2 : 1;
+
+    for(var i = 0; i < glOnColorSchemeChange.length; i++)
+        if(typeof glOnColorSchemeChange[i] === "function")
+            glOnColorSchemeChange[i](iCode);
 };
 
 BxArtificerUtils.prototype.getColorSchemeMenu = function() {