Skip to content

Added dark theme switch to last dropdown menu #6352

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

Merged
dlmarion merged 5 commits into from
May 5, 2026
Merged

Added dark theme switch to last dropdown menu #6352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cd60994
Added dark theme switch to last dropdown menu
dlmarion Apr 30, 2026
e964f45
Use css function light-dark to specify alternate colors
dlmarion May 1, 2026
3ae8c10
Merge branch 'main' into dark-mode-pref2
dlmarion May 1, 2026
06880f2
Remove css instructions to hide underlines on links
dlmarion May 4, 2026
50286de
Dark mode fixes (#63)
DomGarguilo May 5, 2026
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
9 changes: 1 addition & 8 deletions server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ table {

.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
border: 1px solid light-dark(#ddd, #444) !important;
}

table.sortable {
Expand Down Expand Up @@ -170,16 +170,9 @@ tr.details td.details-control {
}

a {
text-decoration: none;
color: #0000ff;
Copy link
Copy Markdown
Contributor Author

@dlmarion dlmarion Apr 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed these colors from the links and replaced it with the link-body-emphasis CSS class. As documented here, it's the only color class that adapts to color.

line-height: 1.5em;
}

a:hover {
color: #004400;
text-decoration: underline;
}

a img {
border: 0px;
}
Expand Down
2 changes: 1 addition & 1 deletion server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/compactions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ $(function () {
"type": "html",
"render": function (data, type, row, meta) {
if (type === 'display') {
data = '<a href="tservers?s=' + row.server + '">' + row.server + '</a>';
data = '<a class="link-body-emphasis" href="tservers?s=' + row.server + '">' + row.server + '</a>';
}
return data;
}
Expand Down
2 changes: 1 addition & 1 deletion server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/coordinator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ $(function () {
"targets": 0,
"render": function (data, type, row) {
if (type === 'display') {
data = '<a href="tables/' + row.tableId + '">' + row.tableName + '</a>';
data = '<a class="link-body-emphasis" href="tables/' + row.tableId + '">' + row.tableName + '</a>';
}
return data;
}
Expand Down
43 changes: 43 additions & 0 deletions server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,8 @@ function updateServerNotifications(statusData) {
* Creates the initial sidebar
*/
$(function () {
setTheme();
updateDarkThemeSwitch();
refreshSidebar();
});

Expand Down Expand Up @@ -138,3 +140,44 @@ function refreshSideBarNotifications() {

updateServerNotifications(statusData);
}

/**
* Set the theme based on the user
* preferences
*/
function setTheme() {
var setDarkMode = false;
var storedValue = localStorage.getItem("dark-theme-enabled");
if (storedValue === null) {
setDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
} else {
setDarkMode = storedValue === 'true';
}

if (setDarkMode === true) {
document.documentElement.setAttribute('data-bs-theme', 'dark');
} else {
document.documentElement.setAttribute('data-bs-theme', 'light');
}
}

/**
* Update the Dark Theme Switch in the Preference list
*/
function updateDarkThemeSwitch() {
var storageKey = "dark-theme-enabled";
var darkThemeSwitchElement = $('#darkThemeSwitch');
var savedValue = localStorage.getItem(storageKey);

if (savedValue === 'true') {
darkThemeSwitchElement.prop('checked', true);
} else {
darkThemeSwitchElement.prop('checked', false);
}

darkThemeSwitchElement.on("change", function () {
var enableDarkTheme = $(this).is(':checked');
localStorage.setItem(storageKey, enableDarkTheme);
document.documentElement.setAttribute('data-bs-theme', enableDarkTheme ? 'dark' : 'light');
});
}
2 changes: 1 addition & 1 deletion server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/overview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ $(function () {
return data;
}

return '<a href="' + sanitize(link) + '">' + sanitize(data) + '</a>';
return '<a class="link-body-emphasis" href="' + sanitize(link) + '">' + sanitize(data) + '</a>';
}
},
{
Expand Down
2 changes: 1 addition & 1 deletion server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/scans.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ $(function () {
"type": "html",
"render": function (data, type, row, meta) {
if (type === 'display') {
data = '<a href="tservers?s=' + row.server + '">' + row.server + '</a>';
data = '<a class="link-body-emphasis" href="tservers?s=' + row.server + '">' + row.server + '</a>';
}
return data;
}
Expand Down
2 changes: 1 addition & 1 deletion server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ function initServerTables(serv) {
"type": "html",
"render": function (data, type, row) {
if (type === 'display') {
data = `<a href="tables/${row.tableID}">${data}</a>`;
data = `<a class="link-body-emphasis" href="tables/${row.tableID}">${data}</a>`;
}
return data;
}
Expand Down
10 changes: 9 additions & 1 deletion server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/default.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,21 @@
<base href="${rootContext}"/>
<title>${title} - Accumulo ${version}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Set the saved theme before loading CSS to reduce light-mode flash on reload -->
<script>
(function() {
if (localStorage.getItem('dark-theme-enabled') === 'true') {
document.documentElement.setAttribute('data-bs-theme', 'dark');
}
})();
</script>
<!-- external resources configurable by setting monitor.resources.external -->
<!-- make sure jquery is included first - other scripts depend on it -->
<#if externalResources?has_content>
<#list externalResources as val>
${val}
</#list>
<#else>
<!-- make sure jquery is included first - other scripts depend on it -->
<script src="resources/external/jquery/jquery-3.7.1.js"></script>
<script src="resources/external/bootstrap/js/bootstrap.bundle.js"></script>
<script src="resources/external/datatables/js/jquery.dataTables.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/ec.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<div class="d-flex justify-content-between align-items-center mb-3">
<div>
<span class="table-caption">Running Compactions</span>&nbsp;&nbsp;
<a href="javascript:refreshRunningCompactions();">
<a class="link-body-emphasis" href="javascript:refreshRunningCompactions();">
<span style="font-size: 1.5em; color: black;" class="bi bi-arrow-repeat"></span>
</a>
</div>
Expand Down
32 changes: 20 additions & 12 deletions server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/navbar.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,11 @@
<span id="statusNotification" class="icon-dot normal"></span>&nbsp;Servers
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="manager"><span id="managerStatusNotification" class="icon-dot normal"></span>&nbsp;Manager&nbsp;Server&nbsp;</a></li>
<li><a class="dropdown-item" href="tservers"><span id="serverStatusNotification" class="icon-dot normal"></span>&nbsp;Tablet&nbsp;Servers&nbsp;</a></li>
<li><a class="dropdown-item" href="sservers"><span id="sserverStatusNotification" class="icon-dot normal"></span>&nbsp;Scan&nbsp;Servers&nbsp;</a></li>
<li><a class="dropdown-item" href="compactors"><span id="compactorStatusNotification" class="icon-dot normal"></span>&nbsp;Compactors</a></li>
<li><a class="dropdown-item" href="gc"><span id="gcStatusNotification" class="icon-dot normal"></span>&nbsp;Garbage&nbsp;collector&nbsp;</a></li>
<li><a class="link-body-emphasis dropdown-item" href="manager"><span id="managerStatusNotification" class="icon-dot normal"></span>&nbsp;Manager&nbsp;Server&nbsp;</a></li>
<li><a class="link-body-emphasis dropdown-item" href="tservers"><span id="serverStatusNotification" class="icon-dot normal"></span>&nbsp;Tablet&nbsp;Servers&nbsp;</a></li>
<li><a class="link-body-emphasis dropdown-item" href="sservers"><span id="sserverStatusNotification" class="icon-dot normal"></span>&nbsp;Scan&nbsp;Servers&nbsp;</a></li>
<li><a class="link-body-emphasis dropdown-item" href="compactors"><span id="compactorStatusNotification" class="icon-dot normal"></span>&nbsp;Compactors</a></li>
<li><a class="link-body-emphasis dropdown-item" href="gc"><span id="gcStatusNotification" class="icon-dot normal"></span>&nbsp;Garbage&nbsp;collector&nbsp;</a></li>
</ul>
</li>
<li>
Expand All @@ -54,10 +54,10 @@
Activity
</a>
<ul class="dropdown-menu col-xs-12" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="bulkImports">Bulk&nbsp;Imports</a></li>
<li><a class="dropdown-item" href="coordinator">Compaction Overview</a></li>
<li><a class="dropdown-item" href="ec">Compaction Details</a></li>
<li><a class="dropdown-item" href="scans">Scans</a></li>
<li><a class="link-body-emphasis dropdown-item" href="bulkImports">Bulk&nbsp;Imports</a></li>
<li><a class="link-body-emphasis dropdown-item" href="coordinator">Compaction Overview</a></li>
<li><a class="link-body-emphasis dropdown-item" href="ec">Compaction Details</a></li>
<li><a class="link-body-emphasis dropdown-item" href="scans">Scans</a></li>
</ul>
</li>
<li>
Expand All @@ -68,8 +68,8 @@
role="button" data-bs-toggle="dropdown" aria-expanded="false">REST
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="rest/xml">XML Summary</a></li>
<li><a class="dropdown-item" href="rest/json">JSON Summary</a></li>
<li><a class="link-body-emphasis dropdown-item" href="rest/xml">XML Summary</a></li>
<li><a class="link-body-emphasis dropdown-item" href="rest/json">JSON Summary</a></li>
</ul>
</li>
<li class="dropdown">
Expand All @@ -78,6 +78,14 @@
<span style="font-size: 1.2em;" class="bi bi-three-dots-vertical"></span>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<div class="dropdown-item d-flex justify-content-between align-items-center">
<label class="mb-0" for="darkThemeSwitch">Dark Theme</label>
<div class="form-check form-switch mb-0 ms-3">
<input id="darkThemeSwitch" class="form-check-input mt-0" type="checkbox" role="switch">
</div>
</div>
</li>
<li>
<div class="dropdown-item d-flex justify-content-between align-items-center">
<label class="mb-0" for="autoRefreshSwitch">Auto-Refresh</label>
Expand All @@ -86,7 +94,7 @@
</div>
</div>
</li>
<li><a class="dropdown-item" data-bs-toggle="modal" href="#aboutModal">About</a></li>
<li><a class="link-body-emphasis dropdown-item" data-bs-toggle="modal" href="#aboutModal">About</a></li>
</ul>
</li>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion server/monitor/src/main/resources/org/apache/accumulo/monitor/templates/tables.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
"type": "html",
"render": function (data, type, row, meta) {
if (type === 'display') {
data = '<a href="tables/' + row.tableId + '">' + row.tableName + '</a>';
data = '<a class="link-body-emphasis" href="tables/' + row.tableId + '">' + row.tableName + '</a>';
}
return data;
}
Expand Down