Theme moved into own js file as of performance issues

lapo-luchini · May 9, 2024 · 844d85b · 844d85b
1 parent c1554d2
commit 844d85b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="color-scheme" content="light dark">
   <title>ASN.1 JavaScript decoder</title>
   <link rel="stylesheet" href="index.css" type="text/css">
   <link rel="icon" type="image/svg+xml" sizes="192x192" href="favicon.svg">
@@ -109,6 +108,7 @@ <h3>Links</h3>
     </ul>
   </div>
 
+  <script type="module" src="theme.js"></script>
   <script type="module" src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -15,7 +15,6 @@ const
     area = id('area'),
     file = id('file'),
     examples = id('examples'),
-    selectTheme = id('theme-select'),
     selectDefs = id('definitions'),
     selectTag = id('tags');
 
@@ -158,42 +157,6 @@ for (const [name, onClick] of Object.entries(butClickHandlers)) {
     if (elem)
         elem.onclick = onClick;
 }
-// set dark theme depending on OS settings
-function setTheme(theme) {
-    if (!selectTheme) {
-        console.log('Themes are currently not working with single file version.');
-        return;
-    }
-    if (theme == 'os') {
-        let prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
-        if (prefersDarkScheme.matches) {
-            theme = 'dark';
-        } else {
-            theme = 'light';
-        }
-    }
-    document.documentElement.style['color-scheme'] = theme
-    document.querySelector('html').setAttribute('data-theme', theme)
-}
-// activate selected theme
-let theme = 'os';
-const localStorageTheme = localStorage.getItem('theme');
-if (localStorageTheme) {
-    theme = localStorageTheme;
-}
-if (theme == 'light') {
-    selectTheme.selectedIndex = 2;
-} else if (theme == 'dark') {
-    selectTheme.selectedIndex = 1;
-}
-setTheme(theme);
-// add handler to theme selction element
-if (selectTheme) {
-    selectTheme.addEventListener ('change', function () {
-        localStorage.setItem('theme', selectTheme.value);
-        setTheme(selectTheme.value);
-    });
-}
 // this is only used if window.FileReader
 function read(f) {
     area.value = ''; // clear text area, will get b64 content

diff --git a/theme.js b/theme.js
@@ -0,0 +1,37 @@
+const selectTheme = document.getElementById('theme-select')
+// set dark theme depending on OS settings
+function setTheme(theme) {
+if (!selectTheme) {
+    console.log('Themes are currently not working with single file version.');
+    return;
+}
+if (theme == 'os') {
+    let prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+    if (prefersDarkScheme.matches) {
+        theme = 'dark';
+    } else {
+        theme = 'light';
+    }
+}
+document.documentElement.style['color-scheme'] = theme
+document.querySelector('html').setAttribute('data-theme', theme)
+}
+// activate selected theme
+let theme = 'os';
+const localStorageTheme = localStorage.getItem('theme');
+if (localStorageTheme) {
+theme = localStorageTheme;
+}
+if (theme == 'light') {
+selectTheme.selectedIndex = 2;
+} else if (theme == 'dark') {
+selectTheme.selectedIndex = 1;
+}
+setTheme(theme);
+// add handler to theme selction element
+if (selectTheme) {
+selectTheme.addEventListener ('change', function () {
+    localStorage.setItem('theme', selectTheme.value);
+    setTheme(selectTheme.value);
+});
+}