Add listener for change color mode

Author: jcastroa87

resources/views/standalonepopup.blade.php

@@ -7,6 +7,8 @@
 
         <script type="text/javascript">
             $().ready(function () {
+                var theme = 'default';
+
                 var elf = $('#elfinder').elfinder({
                     // set your elFinder options here
                     @if($locale)
@@ -39,10 +41,29 @@
                         default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
                         dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
                     },
-                    theme: 'default',
+                    theme: theme,
+                },
+                function(fm, extraObj) {
+                    fm.bind('open', function() {
+                        setElFinderColorMode();
+                    });
                 }).elfinder('instance');
 
-                //elf.changeTheme('dark').storage('theme', 'dark');
+                function isElfinderInDarkMode() {
+                    return typeof window.parent.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
+                }
+
+                function setElFinderColorMode() {
+                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
+                    let instance = $('#elfinder').elfinder('instance');
+                    instance.changeTheme(theme).storage('theme', theme);
+                }
+
+                if(typeof window.parent.colorMode !== 'undefined') {
+                    window.parent.colorMode.onChange(function() {
+                        setElFinderColorMode();
+                    });
+                }
             });
         </script>