From 9c2415e5b2ba1f59e9c8833bf63fb6e2773804e3 Mon Sep 17 00:00:00 2001 From: skidoodle Date: Tue, 26 Aug 2025 20:13:44 +0200 Subject: [PATCH 1/4] web: add dark mode support --- DnsServerCore/www/css/main.css | 224 +++++++++++++++++++++++++++++++++ DnsServerCore/www/index.html | 1 + DnsServerCore/www/js/main.js | 29 +++++ 3 files changed, 254 insertions(+) diff --git a/DnsServerCore/www/css/main.css b/DnsServerCore/www/css/main.css index f4c55f18..476d9bed 100644 --- a/DnsServerCore/www/css/main.css +++ b/DnsServerCore/www/css/main.css @@ -322,3 +322,227 @@ th a { color: rgb(119, 119, 119); text-align: center; } + +.dark-mode { + scrollbar-width: thin; + scrollbar-color: #555 #2c2c2e; +} + + .dark-mode ::-webkit-scrollbar { + width: 12px; + height: 12px; + } + + .dark-mode ::-webkit-scrollbar-track { + background: #2c2c2e; + } + + .dark-mode ::-webkit-scrollbar-thumb { + background-color: #555; + border-radius: 6px; + border: 3px solid #2c2c2e; + } + +body.dark-mode { + background-color: #1a1a1a !important; + color: #dcdcdc !important; +} + +.dark-mode a { + color: #8ab4f8 !important; +} + +.dark-mode th a, +.dark-mode th a:hover { + color: #dcdcdc !important; + text-decoration: none !important; +} + +.dark-mode #header { + background-color: #2c2c2e !important; + box-shadow: 0px 1px 15px 0px #000 !important; +} + +.dark-mode #footer { + background-color: #252525 !important; + color: #888888 !important; + box-shadow: 0px 2px 15px 1px #000 !important; +} + +.dark-mode .about h1, +.dark-mode .about h3 a { + color: #f0f0f0 !important; +} + +.dark-mode .about p { + color: #a0a0a0 !important; +} + +.dark-mode .panel, +.dark-mode .panel-default { + background-color: #2c2c2e !important; + border-color: #3a3a3c !important; +} + +.dark-mode .panel-heading { + background-color: #3a3a3c !important; + border-color: #4a4a4c !important; + color: #f5f5f7 !important; +} + +.dark-mode .panel-body { + background-color: #252525 !important; + color: #dcdcdc !important; +} + +.dark-mode .navbar-default { + background-color: #2c2c2e !important; + border-color: #3a3a3c !important; +} + +.dark-mode .dropdown-menu { + background-color: #2c2c2e !important; + border-color: #3a3a3c !important; +} + + .dark-mode .dropdown-menu > li > a:hover, + .dark-mode .dropdown-menu > li > a:focus { + background-color: #3a3a3c !important; + } + +.dark-mode .divider { + background-color: #3a3a3c !important; +} + +.dark-mode .nav-tabs { + border-bottom: 1px solid #3a3a3c !important; +} + + .dark-mode .nav-tabs > li > a { + border-color: #3a3a3c !important; + background-color: #2c2c2e !important; + } + + .dark-mode .nav-tabs > li > a:hover { + border-color: #4a4a4c !important; + background-color: #3a3a3c !important; + } + + .dark-mode .nav-tabs > li.active > a, + .dark-mode .nav-tabs > li.active > a:hover, + .dark-mode .nav-tabs > li.active > a:focus { + background-color: #007aff !important; + border-color: #007aff !important; + color: #ffffff !important; + border-bottom-color: transparent !important; + } + +.dark-mode .table-hover > tbody > tr:hover { + background-color: #33373a !important; +} + +.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { + background-color: #28282a !important; +} + +.dark-mode .table > thead > tr > th, +.dark-mode .table > tbody > tr > td, +.dark-mode .table > tfoot > tr > th, +.dark-mode .table > tfoot > tr > td { + border-top-color: #3a3a3c !important; +} + +.dark-mode .table-bordered, +.dark-mode .table-bordered > thead > tr > th, +.dark-mode .table-bordered > tbody > tr > td { + border-color: #3a3a3c !important; +} + +.dark-mode .form-control { + background-color: #3a3a3c !important; + border-color: #4a4a4c !important; + color: #f5f5f7 !important; +} + + .dark-mode .form-control[disabled], .dark-mode .form-control[readonly] { + background-color: #2c2c2e !important; + } + +.dark-mode .modal-content { + background-color: #2c2c2e !important; + border-color: #3a3a3c !important; +} + +.dark-mode .modal-header { + border-bottom-color: #3a3a3c !important; +} + +.dark-mode .modal-footer { + border-top-color: #3a3a3c !important; +} + +.dark-mode .well { + background-color: #252525 !important; + border-color: #3a3a3c !important; +} + +.dark-mode pre { + background-color: #222 !important; + color: #dcdcdc !important; + border: 1px solid #4a4a4c !important; +} + +.dark-mode .btn-default { + color: #f5f5f7 !important; + background-color: #3a3a3c !important; + border-color: #4a4a4c !important; +} + + .dark-mode .btn-default:hover, + .dark-mode .btn-default.active { + background-color: #4a4a4c !important; + border-color: #5a5a5c !important; + } + +.dark-mode .input-group-addon { + background-color: #3a3a3c !important; + border-color: #4a4a4c !important; +} + +.dark-mode .stats-panel .stats-item { + color: #fff !important; +} + +.dark-mode .zone-stats-panel .stats-item { + color: #fff !important; +} + +.dark-mode .c3-axis-x text, +.dark-mode .c3-axis-y text, +.dark-mode .c3-legend-item { + fill: #dcdcdc !important; +} + +.dark-mode .c3-grid line { + stroke: #4a4a4c !important; +} + +.dark-mode #dpCustomDayWiseStart, +.dark-mode #dpCustomDayWiseEnd { + color-scheme: dark; +} + + .dark-mode #dpCustomDayWiseStart::-webkit-calendar-picker-indicator, + .dark-mode #dpCustomDayWiseEnd::-webkit-calendar-picker-indicator { + filter: invert(1); + } + +.dark-mode .pager li > a { + background-color: #3a3a3c !important; + border-color: #4a4a4c !important; + color: #f5f5f7 !important; +} + + .dark-mode .pager li > a:hover { + background-color: #4a4a4c !important; + } diff --git a/DnsServerCore/www/index.html b/DnsServerCore/www/index.html index ec83383b..543bd3a3 100644 --- a/DnsServerCore/www/index.html +++ b/DnsServerCore/www/index.html @@ -61,6 +61,7 @@
  • My Profile
  • Create API Token
  • Change Password
    • +
  • Toggle Theme
  • Logout
    • diff --git a/DnsServerCore/www/js/main.js b/DnsServerCore/www/js/main.js index ddf80333..6b1bd93b 100644 --- a/DnsServerCore/www/js/main.js +++ b/DnsServerCore/www/js/main.js @@ -536,6 +536,8 @@ $(function () { $("#btnCustomDayWise").click(function () { refreshDashboard(); }); + + applyTheme(); }); function showAbout() { @@ -2505,3 +2507,30 @@ function restoreSettings() { objAlertPlaceholder: divRestoreSettingsAlert }); } + +function applyTheme() { + const currentTheme = localStorage.getItem('theme'); + if (currentTheme === 'dark') { + document.body.classList.add('dark-mode'); + } else { + document.body.classList.remove('dark-mode'); + } +} + +function toggleTheme() { + document.body.classList.toggle('dark-mode'); + let theme = 'light'; + if (document.body.classList.contains('dark-mode')) { + theme = 'dark'; + } + localStorage.setItem('theme', theme); + + if (window.chartDashboardMain) { + window.chartDashboardMain.update(); + window.chartDashboardPie.update(); + window.chartDashboardPie2.update(); + window.chartDashboardPie3.update(); + } + + return false; +} stener('DOMContentLoaded', applyTheme); \ No newline at end of file From 27184e1d5fcfe45361825541cfe1ec2f935fa183 Mon Sep 17 00:00:00 2001 From: skidoodle Date: Tue, 26 Aug 2025 20:18:10 +0200 Subject: [PATCH 2/4] fix: typo --- DnsServerCore/www/js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/DnsServerCore/www/js/main.js b/DnsServerCore/www/js/main.js index 6b1bd93b..ce0e83e4 100644 --- a/DnsServerCore/www/js/main.js +++ b/DnsServerCore/www/js/main.js @@ -2533,4 +2533,4 @@ function toggleTheme() { } return false; -} stener('DOMContentLoaded', applyTheme); \ No newline at end of file +} From f4ccba4836a9194a1e849e1a6ccb739e4d20c823 Mon Sep 17 00:00:00 2001 From: skidoodle Date: Wed, 27 Aug 2025 00:00:36 +0200 Subject: [PATCH 3/4] web: fix about section --- DnsServerCore/www/css/main.css | 25 +++++++++++++++++++------ DnsServerCore/www/index.html | 16 ++++++++-------- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/DnsServerCore/www/css/main.css b/DnsServerCore/www/css/main.css index 476d9bed..e0a805ca 100644 --- a/DnsServerCore/www/css/main.css +++ b/DnsServerCore/www/css/main.css @@ -1,6 +1,7 @@  html, body { height: 100% !important; + scrollbar-gutter: stable; } body { @@ -323,6 +324,10 @@ th a { text-align: center; } +.about h3 a { + color: rgb(51, 51, 51); +} + .dark-mode { scrollbar-width: thin; scrollbar-color: #555 #2c2c2e; @@ -352,6 +357,10 @@ body.dark-mode { color: #8ab4f8 !important; } + .dark-mode a:hover { + color: #99c0ff !important; + } + .dark-mode th a, .dark-mode th a:hover { color: #dcdcdc !important; @@ -369,8 +378,11 @@ body.dark-mode { box-shadow: 0px 2px 15px 1px #000 !important; } -.dark-mode .about h1, -.dark-mode .about h3 a { + .dark-mode #footer .content { + color: #888888 !important; + } + +.dark-mode .about h1 { color: #f0f0f0 !important; } @@ -378,6 +390,10 @@ body.dark-mode { color: #a0a0a0 !important; } +.dark-mode .about h3 a { + color: #f0f0f0 !important; +} + .dark-mode .panel, .dark-mode .panel-default { background-color: #2c2c2e !important; @@ -509,10 +525,7 @@ body.dark-mode { border-color: #4a4a4c !important; } -.dark-mode .stats-panel .stats-item { - color: #fff !important; -} - +.dark-mode .stats-panel .stats-item, .dark-mode .zone-stats-panel .stats-item { color: #fff !important; } diff --git a/DnsServerCore/www/index.html b/DnsServerCore/www/index.html index 543bd3a3..ce9d8db2 100644 --- a/DnsServerCore/www/index.html +++ b/DnsServerCore/www/index.html @@ -639,7 +639,7 @@ 

    -                                                    
+
    @@ -678,7 +678,7 @@ 

    -                                                    
+
    @@ -717,7 +717,7 @@ 

    -                                                    
+
    @@ -2986,13 +2986,13 @@

    Technitium DNS Server

    Source code available under GNU General Public License v3.0 on  GitHub

    -

    What's New?

    +

    What's New?

    Read the change log to know what's new in this release.

    -

    API Documentation

    +

    API Documentation

    The DNS server HTTP API allows any 3rd party app or script to configure the DNS server. The HTTP API is used by this web console and thus all the actions that this web console does can be performed via the API. Read the HTTP API documentation for complete details.

    -

    Help Topics

    +

    Help Topics

    Read the latest online help topics which contains the DNS Server user manual and covers frequently asked questions.

    Support

    @@ -3005,7 +3005,7 @@

    Support

    Join /r/technitium on Reddit.

    -

    Donate

    +

    Donate

    Make a contribution to Technitium and help making new software, updates, and features possible.

    Donate Now! @@ -6228,4 +6228,4 @@

    Edit Permissions - - \ No newline at end of file + From cc30a842975caf82246d8b3d6a65ab7b83ab85b4 Mon Sep 17 00:00:00 2001 From: skidoodle Date: Wed, 27 Aug 2025 00:04:49 +0200 Subject: [PATCH 4/4] web: fix logs date selector dark mode --- DnsServerCore/www/css/main.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/DnsServerCore/www/css/main.css b/DnsServerCore/www/css/main.css index e0a805ca..7bf2cd8a 100644 --- a/DnsServerCore/www/css/main.css +++ b/DnsServerCore/www/css/main.css @@ -541,12 +541,16 @@ body.dark-mode { } .dark-mode #dpCustomDayWiseStart, -.dark-mode #dpCustomDayWiseEnd { +.dark-mode #dpCustomDayWiseEnd, +.dark-mode #txtQueryLogStart, +.dark-mode #txtQueryLogEnd { color-scheme: dark; } .dark-mode #dpCustomDayWiseStart::-webkit-calendar-picker-indicator, - .dark-mode #dpCustomDayWiseEnd::-webkit-calendar-picker-indicator { + .dark-mode #dpCustomDayWiseEnd::-webkit-calendar-picker-indicator, + .dark-mode #txtQueryLogStart::-webkit-calendar-picker-indicator, + .dark-mode #txtQueryLogEnd::-webkit-calendar-picker-indicator { filter: invert(1); }