diff --git a/index.html b/index.html index b4555d7..eca4b38 100644 --- a/index.html +++ b/index.html @@ -12,11 +12,25 @@ - +
@@ -29,7 +43,7 @@
- + + + + + +
+ + +
+ +
+
- +
diff --git a/meshmon.css b/meshmon.css index eae3918..6a3ccc7 100644 --- a/meshmon.css +++ b/meshmon.css @@ -1,54 +1,75 @@ -body { +:root { + color-scheme: light; + --font-color: #424242; + --bg-color: white; + --td-border: 1px solid #cbcbcb; + --packet-header-outbound-bg-color: #96f988; + --packet-header-bg-color: #dddddd; + --filter-ok-bg-color: #8caeff; + --filter-error-bg-color: #d5899c; +} + +[data-theme="dark"] { color-scheme: dark; - background-color: #232327; - color: #b1b1b3; + --font-color: #b1b1b3; + --bg-color: #232327; + --td-border: 1px solid #444444; + --packet-header-outbound-bg-color: #156200; + --packet-header-bg-color: #333333; + --filter-ok-bg-color: #005596; + --filter-error-bg-color: #4b2f36; +} + +body { font-family: Verdana, sans-serif; + background-color: var(--bg-color); + color: var(--font-color); } -.main-table td { +.table-main td { white-space: nowrap; padding-left: 8px; padding-right: 8px; } -.main-table thead { +.table-main thead { position: sticky; top: 0; } -.main-table thead, tbody { +.table-main thead, tbody { font-family: monospace; } -.main-table { +.table-main { border-collapse: collapse; border: none; } -.main-table td { - border: 1px solid #444444; +.table-main td { + border: var(--td-border); } -.main-table tr:first-child td { +.table-main tr:first-child td { border-top: none; } -.main-table tr:last-child td { +.table-main tr:last-child td { border-bottom: none; } -.main-table tr td:first-child { +.table-main tr td:first-child { border-left: none; } -.main-table tr td:last-child { +.table-main tr td:last-child { border-right: none; } -.main-table thead tr { +.table-main thead tr { text-align: center; - background: #000000; + background: var(--bg-color); } -.main-table tbody tr { +.table-main tbody tr { text-align: right; } .packet-header-row { - background: #333333; + background: var(--packet-header-bg-color) } .packet-header-row-outbound { - background: #006215; + background: var(--packet-header-outbound-bg-color); } .decoded td { text-align: left; @@ -64,10 +85,10 @@ body { background-color: #2ea043; } .filter-ok { - background-color: #005596; + background-color: var(--filter-ok-bg-color); } .filter-error { - background-color: #4b2f36; + background-color: var(--filter-error-bg-color); } #fit-row { @@ -85,17 +106,72 @@ body { #connect-cell { padding: 0; } -.bottom-table { +.table-foot { padding: 0; width: 100%; } -.bottom-table label, button, input, span { +.table-foot label, button, input, span { font-family: Verdana, sans-serif; } -.bottom-table td { +.table-foot td { padding: 0; border: 0; } -.bottom-table a { - color: white; +.table-foot a { + color: var(--font-color); +} + +.theme-switch-wrapper { + width: 6px; + align-items: right; +} + +.theme-switch { + display: inline-block; + height: 23px; + position: relative; + width: 35px; +} + +.theme-switch input { + display: none; +} + +.theme-slider { + background-color: #232327; + bottom: 0; + cursor: pointer; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: .1s; +} + +.theme-slider:before { + background-color: white; + bottom: 2px; + content: ""; + height: 19px; + left: 2px; + position: absolute; + transition: .1s; + width: 19px; +} + +input:checked+.theme-slider { + background-color: #cbaf21; +} + +input:checked+.theme-slider:before { + background-color: #232327; + transform: translateX(12px); +} + +.theme-slider.round { + border-radius: 23px; +} + +.theme-slider.round:before { + border-radius: 50%; } diff --git a/meshmon.js b/meshmon.js index a71d78c..01d364a 100644 --- a/meshmon.js +++ b/meshmon.js @@ -388,6 +388,7 @@ function onFilterEnter() { } catch { filterInput.classList.remove('filter-ok'); filterInput.classList.add('filter-error'); + filterInput.disabled = false; return; } } @@ -408,6 +409,16 @@ function onClickClear() { tbody.innerHTML = ''; } +function switchTheme(e) { + if (e.target.checked) { + document.documentElement.setAttribute('data-theme', 'dark'); + localStorage.setItem('theme', 'dark'); + } else { + document.documentElement.setAttribute('data-theme', 'light'); + localStorage.setItem('theme', 'light'); + } +} + window.onload = function() { var theadRow = document.getElementById('thead-row'); var fitRow = document.getElementById('fit-row'); @@ -453,5 +464,16 @@ window.onload = function() { mqttUrlInput.value = localStorage.getItem('url') ?? defaultMqttUrl; mqttTopicInput.value = localStorage.getItem('topic') ?? defaultMqttTopic; + const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); + const currentTheme = localStorage.getItem('theme'); + + if (currentTheme) { + document.documentElement.setAttribute('data-theme', currentTheme); + if (currentTheme === 'dark') { + toggleSwitch.checked = true; + } + } + + toggleSwitch.addEventListener('change', switchTheme, false); connectButton.click(); };