From da5782c2ab028695ccb702824dfaeb8d76895533 Mon Sep 17 00:00:00 2001
From: Jesper Noordsij <jesper.noordsij@gmail.com>
Date: Wed, 25 Mar 2026 19:07:17 +0100
Subject: [PATCH 1/4] Use module type script instead of DOMContentLoaded
 wrapping in elfinder common styles

---
 resources/views/common_styles.blade.php | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/resources/views/common_styles.blade.php b/resources/views/common_styles.blade.php
index 3ce5513..aa17f86 100644
--- a/resources/views/common_styles.blade.php
+++ b/resources/views/common_styles.blade.php
@@ -34,8 +34,7 @@
 @endBassetBlock
 <span data-elfinder-light-theme-url="{{ Basset::getUrl('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme-gray.min.css') }}" style="display:none"></span>
 @bassetBlock('elfinderThemeSwitcherScript.js')
-<script type="text/javascript">
-document.addEventListener('DOMContentLoaded', function() {
+<script type="module">
     function getElfinderStyleSheet(main = true) {
     const regex = new RegExp(main ? `RobiNN1\/elFinder-Material-Theme@3.0.0\/Material\/css\/theme\.min\.css` : `RobiNN1\/elFinder-Material-Theme@3.0.0\/Material\/css\/theme-gray\.min\.css`);        const linkElements = document.querySelectorAll('link[rel="stylesheet"]');
         // Find the main elfinder stylesheet
@@ -68,7 +67,7 @@ function addElfinderLightStylesheet() {
     }
 
     let colorMode = window.parent.colorMode?.result ?? window.colorMode?.result ?? false;
-   
+
     if(colorMode !== 'dark') {
         addElfinderLightStylesheet();
     }
@@ -87,23 +86,20 @@ function addElfinderLightStylesheet() {
             // in case we switched to dark mode, remove the ligth theme css
             if(scheme === 'dark') {
                 selectedLinkElement.parentNode.removeChild(selectedLinkElement);
-                return true; 
+                return true;
             }
             addElfinderLightStylesheet()
         });
     }
-
-});
 </script>
 @endBassetBlock
+
 @if($styleBodyElement ?? false)
-<script type="text/javascript">
-    document.addEventListener('DOMContentLoaded', function() {
-        // we dont want to style the body when elfinder is loaded as a component in a backpack view
-        // we pass true when loading elfinder inside an iframe to style the iframe body.
-        // use the topbar and footbar darker color as the background to ease transitions
-        document.getElementsByTagName('body')[0].style.background = '#061325';
-        document.getElementsByTagName('body')[0].style.opacity = 1;
-    });
+<script type="module">
+    // we dont want to style the body when elfinder is loaded as a component in a backpack view
+    // we pass true when loading elfinder inside an iframe to style the iframe body.
+    // use the topbar and footbar darker color as the background to ease transitions
+    document.getElementsByTagName('body')[0].style.background = '#061325';
+    document.getElementsByTagName('body')[0].style.opacity = 1;
 </script>
 @endif

From 2d7e2002036f2f076e042db09d847697f03b71d6 Mon Sep 17 00:00:00 2001
From: Jesper Noordsij <jesper.noordsij@gmail.com>
Date: Wed, 25 Mar 2026 19:07:49 +0100
Subject: [PATCH 2/4] Reference document.body directly in elfinder
 common_styles

---
 resources/views/common_styles.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/common_styles.blade.php b/resources/views/common_styles.blade.php
index aa17f86..5bfd732 100644
--- a/resources/views/common_styles.blade.php
+++ b/resources/views/common_styles.blade.php
@@ -99,7 +99,7 @@ function addElfinderLightStylesheet() {
     // we dont want to style the body when elfinder is loaded as a component in a backpack view
     // we pass true when loading elfinder inside an iframe to style the iframe body.
     // use the topbar and footbar darker color as the background to ease transitions
-    document.getElementsByTagName('body')[0].style.background = '#061325';
-    document.getElementsByTagName('body')[0].style.opacity = 1;
+    document.body.style.background = '#061325';
+    document.body.style.opacity = 1;
 </script>
 @endif

From a4f476ef95f68b5ab76f285909d29c1f64041695 Mon Sep 17 00:00:00 2001
From: Jesper Noordsij <jesper.noordsij@gmail.com>
Date: Wed, 25 Mar 2026 19:09:40 +0100
Subject: [PATCH 3/4] Simplify dark/light mode toggling for elfinder by using
 and toggling prefetch link elements

---
 resources/views/common_styles.blade.php | 85 +++++++++----------------
 1 file changed, 30 insertions(+), 55 deletions(-)

diff --git a/resources/views/common_styles.blade.php b/resources/views/common_styles.blade.php
index 5bfd732..9d94386 100644
--- a/resources/views/common_styles.blade.php
+++ b/resources/views/common_styles.blade.php
@@ -8,7 +8,20 @@
     'integrity' => 'sha384-e4Bm/JKXqLbEnnDNLZIbB0u9VBy3H9D+TNdLb22ybxTLsmtWgRhQ3/BKEgJ13zU2',
     'crossorigin' => 'anonymous',
 ])
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme.min.css')
+@php($elFinderLightTheme = 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme-gray.min.css')
+@basset($elFinderLightTheme, false)
+<link
+    rel="prefetch"
+    href="{{ Basset::getUrl($elFinderLightTheme) }}"
+    data-stylesheet-name="elfinder-theme-light"
+/>
+@php($elFinderDarkTheme = 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme.min.css')
+@basset($elFinderDarkTheme, false)
+<link
+    rel="prefetch"
+    href="{{ Basset::getUrl($elFinderDarkTheme) }}"
+    data-stylesheet-name="elfinder-theme-dark"
+/>
 @basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/images/loading.svg', false)
 @basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.eot', false)
 @basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.svg', false)
@@ -17,7 +30,7 @@
 @basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.woff', false)
 @basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.ttf', false)
 @basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.woff2', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme-gray.min.css', false)
+
 @bassetBlock('elfinderCommonStyles.css')
 <style>
     .elfinder .elfinder-toolbar .elfinder-button,
@@ -32,64 +45,26 @@
     }
 </style>
 @endBassetBlock
-<span data-elfinder-light-theme-url="{{ Basset::getUrl('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme-gray.min.css') }}" style="display:none"></span>
+
 @bassetBlock('elfinderThemeSwitcherScript.js')
 <script type="module">
-    function getElfinderStyleSheet(main = true) {
-    const regex = new RegExp(main ? `RobiNN1\/elFinder-Material-Theme@3.0.0\/Material\/css\/theme\.min\.css` : `RobiNN1\/elFinder-Material-Theme@3.0.0\/Material\/css\/theme-gray\.min\.css`);        const linkElements = document.querySelectorAll('link[rel="stylesheet"]');
-        // Find the main elfinder stylesheet
-        let selectedLinkElement;
-        for (const linkElement of linkElements) {
-            if (regex.test(linkElement.href)) {
-                selectedLinkElement = linkElement;
-                break;
-            }
-        }
-        return selectedLinkElement;
-    }
-
-    function addElfinderLightStylesheet() {
-        let lightThemeEl = document.querySelector('[data-elfinder-light-theme-url]');
-        if (!lightThemeEl) return;
-        let lightThemeUrl = lightThemeEl.getAttribute('data-elfinder-light-theme-url');
-        if (!lightThemeUrl) return;
+    const getElfinderStyleLink = (name) => document.querySelector(`[data-stylesheet-name="elfinder-theme-${name}"]`);
 
-        let mainStyleSheet = getElfinderStyleSheet();
-        let lightStyleSheet = getElfinderStyleSheet(false);
-        // if found append the light mode css to the main theme stylesheet
-        if (mainStyleSheet && ! lightStyleSheet) {
-            let themeLight = document.createElement('link');
-            themeLight.href = lightThemeUrl;
-            themeLight.rel = 'stylesheet';
-            themeLight.type = 'text/css';
-            mainStyleSheet.insertAdjacentElement('afterend', themeLight);
-        }
+    const setElfinderMode = (name) => {
+        const darkModeStyleLink = getElfinderStyleLink('dark');
+        darkModeStyleLink.rel = name === 'dark' ? 'stylesheet' : 'prefetch';
+        const lightModeStyleLink = getElfinderStyleLink('light');
+        lightModeStyleLink.rel = name === 'light' ? 'stylesheet' : 'prefetch';
     }
 
-    let colorMode = window.parent.colorMode?.result ?? window.colorMode?.result ?? false;
-
-    if(colorMode !== 'dark') {
-        addElfinderLightStylesheet();
-    }
-
-    // register a color mode change event so that we remove
-    // the light stylesheet when the color mode change
-    if(colorMode) {
-        let colorModeClass = window.parent.colorMode ?? window.colorMode;
-        colorModeClass.onChange(function(scheme) {
-            let getMainStylesheet = scheme === 'dark' ? false : true;
-            let selectedLinkElement = getElfinderStyleSheet(getMainStylesheet);
-
-            if (! selectedLinkElement) {
-                return true;
-            }
-            // in case we switched to dark mode, remove the ligth theme css
-            if(scheme === 'dark') {
-                selectedLinkElement.parentNode.removeChild(selectedLinkElement);
-                return true;
-            }
-            addElfinderLightStylesheet()
-        });
+    const colorModeClass = window.parent.colorMode ?? window.colorMode ?? null;
+    if (colorModeClass) {
+        // Set mode based on configuration and watch for changes
+        setElfinderMode(colorModeClass.result);
+        colorModeClass.onChange((scheme) => setElfinderMode(scheme));
+    } else {
+        // Default to light mode
+        setElfinderMode('light');
     }
 </script>
 @endBassetBlock

From 838cd548fc67812c33be78ec67ae12cb3bc008a8 Mon Sep 17 00:00:00 2001
From: jnoordsij <j.noordsij@sslleiden.nl>
Date: Mon, 30 Mar 2026 12:17:36 +0200
Subject: [PATCH 4/4] Revert elfinderThemeSwitcherScript to be a 'classic'
 script again

@bassetBlock does not support any way of passing/preserving the type=module attribute yet,
so we should probably be safe here
---
 resources/views/common_styles.blade.php | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/resources/views/common_styles.blade.php b/resources/views/common_styles.blade.php
index 9d94386..b5da55e 100644
--- a/resources/views/common_styles.blade.php
+++ b/resources/views/common_styles.blade.php
@@ -47,7 +47,8 @@
 @endBassetBlock
 
 @bassetBlock('elfinderThemeSwitcherScript.js')
-<script type="module">
+<script type="text/javascript">
+document.addEventListener('DOMContentLoaded', function() {
     const getElfinderStyleLink = (name) => document.querySelector(`[data-stylesheet-name="elfinder-theme-${name}"]`);
 
     const setElfinderMode = (name) => {
@@ -66,6 +67,7 @@
         // Default to light mode
         setElfinderMode('light');
     }
+});
 </script>
 @endBassetBlock