Simplify dark/light mode toggling for elfinder by using and toggling prefetch link elements

Author: jnoordsij

resources/views/common_styles.blade.php

@@ -4,7 +4,18 @@
 @basset(base_path('vendor/studio-42/elfinder/img/icons-big.svg'))
 @basset(base_path('vendor/studio-42/elfinder/img/logo.png'))
 @basset(base_path('vendor/studio-42/elfinder/css/elfinder.min.css'))
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme.min.css')
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme.min.css', false)
+<link
+    rel="prefetch"
+    href="{{ Basset::getUrl('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme.min.css') }}"
+    data-stylesheet-name="elfinder-theme-dark"
+/>
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme-gray.min.css', false)
+<link
+    rel="prefetch"
+    href="{{ Basset::getUrl('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme-gray.min.css') }}"
+    data-stylesheet-name="elfinder-theme-light"
+/>
 @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)
@@ -14,64 +25,26 @@
 @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)
-<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