Skip to content

Added dark mode and theme switcher #1444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Added dark mode and theme switcher #1444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9c2415e
web: add dark mode support
skidoodle Aug 26, 2025
27184e1
fix: typo
skidoodle Aug 26, 2025
f4ccba4
web: fix about section
skidoodle Aug 26, 2025
cc30a84
web: fix logs date selector dark mode
skidoodle Aug 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
241 changes: 241 additions & 0 deletions DnsServerCore/www/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@

html, body {
height: 100% !important;
scrollbar-gutter: stable;
}

body {
Expand Down Expand Up @@ -322,3 +323,243 @@ th a {
color: rgb(119, 119, 119);
text-align: center;
}

.about h3 a {
color: rgb(51, 51, 51);
}

.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 a:hover {
color: #99c0ff !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 #footer .content {
color: #888888 !important;
}

.dark-mode .about h1 {
color: #f0f0f0 !important;
}

.dark-mode .about p {
color: #a0a0a0 !important;
}

.dark-mode .about h3 a {
color: #f0f0f0 !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,
.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,
.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 #txtQueryLogStart::-webkit-calendar-picker-indicator,
.dark-mode #txtQueryLogEnd::-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;
}
17 changes: 9 additions & 8 deletions DnsServerCore/www/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
<li><a href="#" onclick="showMyProfileModal(); return false;">My Profile</a></li>
<li><a href="#" onclick="showCreateMyApiTokenModal(); return false;">Create API Token</a></li>
<li><a href="#" onclick="showChangePasswordModal(); return false;">Change Password</a></li>
<li><a href="#" onclick="toggleTheme(); return false;">Toggle Theme</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" onclick="logout(); return false;">Logout</a></li>
</ul>
Expand Down Expand Up @@ -638,7 +639,7 @@ <h3 style="margin: 4px 0;"><span id="titleEditZone" style="margin-right: 10px;">

<div class="panel-body">
<pre id="preCachedZoneViewerBody">

</pre>
</div>
</div>
Expand Down Expand Up @@ -677,7 +678,7 @@ <h3 style="margin: 4px 0;"><span id="titleEditZone" style="margin-right: 10px;">

<div class="panel-body">
<pre id="preAllowedZoneViewerBody">

</pre>
</div>
</div>
Expand Down Expand Up @@ -716,7 +717,7 @@ <h3 style="margin: 4px 0;"><span id="titleEditZone" style="margin-right: 10px;">

<div class="panel-body">
<pre id="preBlockedZoneViewerBody">

</pre>
</div>
</div>
Expand Down Expand Up @@ -2985,13 +2986,13 @@ <h1>Technitium DNS Server</h1>
</p>
<p>Source code available under <a href="https://go.technitium.com/?id=24" target="_blank">GNU General Public License v3.0</a> on <a href="https://github.com/TechnitiumSoftware/DnsServer" target="_blank"><i class="fa fa-github"></i>&nbsp;GitHub</a></p>

<h3 style="margin-top: 40px;"><a style="color: rgb(51,51,51) !important;" href="https://go.technitium.com/?id=23" target="_blank">What's New?</a></h3>
<h3 style="margin-top: 40px;"><a href="https://go.technitium.com/?id=23" target="_blank">What's New?</a></h3>
<p>Read the <a href="https://go.technitium.com/?id=23" target="_blank">change log</a> to know what's new in this release.</p>

<h3 style="margin-top: 40px;"><a style="color: rgb(51,51,51) !important;" href="https://github.com/TechnitiumSoftware/DnsServer/blob/master/APIDOCS.md" target="_blank">API Documentation</a></h3>
<h3 style="margin-top: 40px;"><a href="https://github.com/TechnitiumSoftware/DnsServer/blob/master/APIDOCS.md" target="_blank">API Documentation</a></h3>
<p>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 <a href="https://github.com/TechnitiumSoftware/DnsServer/blob/master/APIDOCS.md" target="_blank">HTTP API documentation</a> for complete details.</p>

<h3 style="margin-top: 40px;"><a style="color: rgb(51,51,51) !important;" href="https://go.technitium.com/?id=25" target="_blank">Help Topics</a></h3>
<h3 style="margin-top: 40px;"><a href="https://go.technitium.com/?id=25" target="_blank">Help Topics</a></h3>
<p>Read the latest <a href="https://go.technitium.com/?id=25" target="_blank">online help topics</a> which contains the DNS Server user manual and covers frequently asked questions.</p>

<h3 style="margin-top: 40px;">Support</h3>
Expand All @@ -3004,7 +3005,7 @@ <h3 style="margin-top: 40px;">Support</h3>
Join <a href="https://www.reddit.com/r/technitium/" target="_blank">/r/technitium</a> on Reddit.
</p>

<h3 style="margin-top: 40px;"><a style="color: rgb(51,51,51) !important;" href="https://go.technitium.com/?id=35" target="_blank">Donate</a></h3>
<h3 style="margin-top: 40px;"><a href="https://go.technitium.com/?id=35" target="_blank">Donate</a></h3>
<p>Make a contribution to Technitium and help making new software, updates, and features possible.</p>
<p>
<a href="https://go.technitium.com/?id=35" target="_blank">Donate Now!</a>
Expand Down Expand Up @@ -6227,4 +6228,4 @@ <h4 class="modal-title">Edit Permissions - <span id="lblEditPermissionsName"></s

<div id="footer"></div>
</body>
</html>
</html>
29 changes: 29 additions & 0 deletions DnsServerCore/www/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -536,6 +536,8 @@ $(function () {
$("#btnCustomDayWise").click(function () {
refreshDashboard();
});

applyTheme();
});

function showAbout() {
Expand Down Expand Up @@ -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;
}