Small theme refactoring.

index.css

@@ -1,4 +1,4 @@
-[data-theme="light"] {
+html[data-theme="light"] {
     --main-bg-color: #C0C0C0;
     --main-text-color: #000000;
     --headline-text-color: #8be9fd;
@@ -30,7 +30,7 @@
     --dump-hex-current-dlen: #004040;
     --hover-bg-color: #E0E0E0;
 }
-[data-theme="dark"] {
+html[data-theme="dark"] {
     --main-bg-color: #0d1116;
     --main-text-color: #f8f8f2;
     --headline-text-color: #8be9fd;

package.json

@@ -61,6 +61,7 @@
       "strict": [ "error", "function" ],
       "indent": [ "error", 4 ],
       "linebreak-style": [ "error", "unix" ],
+      "eol-last": [ "error", "always" ],
       "semi": [ "warn", "always" ],
       "quotes": [ "error", "single", { "avoidEscape": true } ],
       "no-var": [ "warn" ],

theme.js

@@ -1,10 +1,5 @@
-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) {
@@ -15,7 +10,7 @@ function setTheme(theme) {
     }
     document.documentElement.style['color-scheme'] = theme;
     document.querySelector('html').setAttribute('data-theme', theme);
-    // set tthe theme-color for iOS devices
+    // set the theme-color for iOS devices
     let bgColor = getComputedStyle(document.documentElement).getPropertyValue('--main-bg-color');
     let metaThemeColor = document.querySelector('meta[name=theme-color]');
     metaThemeColor.setAttribute('content', bgColor);
@@ -26,16 +21,17 @@ 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
+// add handler to theme selection element
+const selectTheme = document.getElementById('theme-select');
 if (selectTheme) {
     selectTheme.addEventListener ('change', function () {
         localStorage.setItem('theme', selectTheme.value);
         setTheme(selectTheme.value);
     });
-}
+    if (theme == 'light') {
+        selectTheme.selectedIndex = 2;
+    } else if (theme == 'dark') {
+        selectTheme.selectedIndex = 1;
+    }
+}