diff --git a/static/gontrol-helper.js b/static/gontrol-helper.js
index 2fd257a..8ba7eb7 100644
--- a/static/gontrol-helper.js
+++ b/static/gontrol-helper.js
@@ -18,6 +18,8 @@ document.addEventListener('DOMContentLoaded', () => {
bindRowClicks();
restoreCheckboxState();
+
+ themeToggle();
});
// function prepareAgentNames(event) {
@@ -151,3 +153,29 @@ function updateAgentDropdown() {
}
});
}
+
+function themeToggle() {
+ const body = document.body;
+ const toggleBtn = document.getElementById('themeToggleButton');
+
+ function applyTheme(theme) {
+ body.setAttribute('data-bs-theme', theme);
+ body.classList.remove('bg-light', 'text-dark', 'bg-dark', 'text-light');
+ if (theme === 'dark') {
+ body.classList.add('bg-dark', 'text-light');
+ toggleBtn.innerHTML = '';
+ } else {
+ body.classList.add('bg-light', 'text-dark');
+ toggleBtn.innerHTML = '';
+ }
+ }
+
+ const savedTheme = localStorage.getItem('theme') || 'light';
+ applyTheme(savedTheme);
+
+ toggleBtn.addEventListener('click', () => {
+ const currentTheme = body.getAttribute('data-bs-theme');
+ const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+ applyTheme(newTheme);
+ });
+}
diff --git a/static/gontrol-stylesheet.css b/static/gontrol-stylesheet.css
index afe675d..d2531fe 100644
--- a/static/gontrol-stylesheet.css
+++ b/static/gontrol-stylesheet.css
@@ -38,9 +38,9 @@
color: var(--bs-primary);
}
-.execute-navbar {
- background-color: var(--bs-info-bg-subtle);
-}
+/* .execute-navbar { */
+/* background-color: var(--bs-info-bg-subtle); */
+/* } */
#graph-container {
margin: 0; padding: 0;
diff --git a/templates/index.html b/templates/index.html
index 6be838f..7c60e5d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,6 +7,7 @@
+
@@ -14,7 +15,14 @@
g2: gommand & gontrol
-
+
+
+
-