Common css instead of css replacement

lapo-luchini · May 9, 2024 · c1554d2 · c1554d2
1 parent 6c01961
commit c1554d2
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 76 deletions.
diff --git a/index-dark.css b/index-dark.css
diff --git a/index.css b/index.css
@@ -1,4 +1,4 @@
-:root {
+[data-theme="light"] {
     --main-bg-color: #C0C0C0;
     --main-text-color: #000000;
     --headline-text-color: #8be9fd;
@@ -18,8 +18,50 @@
     --preview-border-color: #505050;
     --dump-bg-color: #C0C0C0;
     --dump-border-color: #E0E0E0;
+    --dump-tag: blue;
+    --dump-dlen: darkcyan;
+    --dump-ulen: darkgreen;
+    --dump-intro: blue;
+    --dump-outro: darkgreen;
+    --dump-skip: #666666;
+    --dump-skip-bg: #C0C0C0;
+    --dump-hex-current: #808080;
+    --dump-hex-current-hex: #A0A0A0;
+    --dump-hex-current-dlen: #004040;
     --hover-bg-color: #E0E0E0;
 }
+[data-theme="dark"] {
+    --main-bg-color: #0d1116;
+    --main-text-color: #f8f8f2;
+    --headline-text-color: #8be9fd;
+    --button-border-color: #505050;
+    --button-bg-color: #303030;
+    --button-bghover-color: #404040;
+    --input-border-color: #505050;
+    --input-bg-color: #0c0e11;
+    --link-color: #58a6ff;
+    --link-hover-color: #9b9bea;
+    --header-bg-color: #161b22;
+    --page-bg-color: #000000;
+    --license-bg-color: #4b4a4a;
+    --license-border-color: black;
+    --sub-border-color: #383838;
+    --preview-bg-color: #989797;
+    --preview-border-color: #b5b3b3;
+    --dump-bg-color: #0c0e11;
+    --dump-border-color: #505050;
+    --dump-tag: #58a6ff;
+    --dump-dlen: darkcyan;
+    --dump-ulen: #00b6b6;
+    --dump-intro: #58a6ff;
+    --dump-outro: #00b6b6;
+    --dump-skip: #707070;
+    --dump-skip-bg: #222222;
+    --dump-hex-current: #727272;
+    --dump-hex-current-hex: #474747;
+    --dump-hex-current-dlen: #00b6b6;
+    --hover-bg-color: #505050;
+}
 html, body {
     background-color: var(--page-bg-color);
     color: var(--main-text-color);
@@ -193,15 +235,15 @@ header {
     white-space: pre;
     padding: 5px;
 }
-#dump .tag             { color: blue; }
-#dump .dlen            { color: darkcyan; }
-#dump .ulen            { color: darkgreen; }
-#dump .intro           { color: blue; }
-#dump .outro           { color: darkgreen; }
-#dump .skip            { color: #666666; background-color: #C0C0C0; }
-#dump .hexCurrent      { background-color: #808080; }
-#dump .hexCurrent .hex { background-color: #A0A0A0; }
-#dump .hexCurrent .dlen { color: #004040; }
+#dump .tag             { color: var(--dump-tag); }
+#dump .dlen            { color: var(--dump-dlen); }
+#dump .ulen            { color: var(--dump-ulen); }
+#dump .intro           { color: var(--dump-intro); }
+#dump .outro           { color: var(--dump-outro); }
+#dump .skip            { color: var(--dump-skip); background-color: var(--dump-skip-bg); }
+#dump .hexCurrent      { background-color: var(--dump-hex-current); }
+#dump .hexCurrent .hex { background-color: var(--dump-hex-current-hex); }
+#dump .hexCurrent .dlen { color: var(--dump-hex-current-dlen); }
 #file { display: none; }
 #area { width: 100%; }
 #contextmenu {

diff --git a/index.html b/index.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html data-theme="dark">
 <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" id="theme-base">
+  <link rel="stylesheet" href="index.css" type="text/css">
   <link rel="icon" type="image/svg+xml" sizes="192x192" href="favicon.svg">
 </head>
 <body>

diff --git a/index.js b/index.js
@@ -159,36 +159,39 @@ for (const [name, onClick] of Object.entries(butClickHandlers)) {
         elem.onclick = onClick;
 }
 // set dark theme depending on OS settings
-function setTheme() {
+function setTheme(theme) {
     if (!selectTheme) {
         console.log('Themes are currently not working with single file version.');
         return;
     }
-    let storedTheme = localStorage.getItem('theme');
-    let theme = 'os';
-    if (storedTheme)
-        theme = storedTheme;
-    selectTheme.value = theme;
     if (theme == 'os') {
         let prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
-        theme = prefersDarkScheme.matches ? 'dark': 'light';
-    }
-    if (theme == 'dark') {
-        const css1 = id('theme-base');
-        const css2 = css1.cloneNode();
-        css2.id = 'theme-override';
-        css2.href = 'index-' + theme + '.css';
-        css1.parentElement.appendChild(css2);
-    } else {
-        const css2 = id('theme-override');
-        if (css2) css2.remove();
+        if (prefersDarkScheme.matches) {
+            theme = 'dark';
+        } else {
+            theme = 'light';
+        }
     }
-}
-setTheme();
+    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 () {
+    selectTheme.addEventListener ('change', function () {
         localStorage.setItem('theme', selectTheme.value);
-        setTheme();
+        setTheme(selectTheme.value);
     });
 }
 // this is only used if window.FileReader