diff --git a/index-dark.css b/index-dark.css
deleted file mode 100644
index 1e6680e..0000000
--- a/index-dark.css
+++ /dev/null
@@ -1,43 +0,0 @@
-:root {
- --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;
- --hover-bg-color: #505050;
-}
-h1 {
- font-weight: 200;
-}
-.license .hidden {
- background-color: #4b4a4a; /*minimal support for IE11*/
- background-color: var(--license-bg-color);
-}
-.value {
- background-color: #303030; /*minimal support for IE11*/
- background-color: var(--button-bg-color);
-}
-#dump .tag { color: #58a6ff; }
-#dump .dlen { color: darkcyan; }
-#dump .ulen { color: #00b6b6; }
-#dump .intro { color: #58a6ff; }
-#dump .outro { color: #00b6b6; }
-#dump .skip { color: #707070; background-color: #222222; }
-#dump .hexCurrent { background-color: #727272; }
-#dump .hexCurrent .hex { background-color: #474747; }
-#dump .hexCurrent .tag { color: #6db0fc; }
-#dump .hexCurrent .dlen { color: #00b6b6; }
diff --git a/index.css b/index.css
index 4adef4e..2efe09d 100644
--- 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
index 69e0b5d..5f05197 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,11 @@
-
+
+
ASN.1 JavaScript decoder
-
+
diff --git a/index.js b/index.js
index 8275819..4456a9a 100644
--- 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