whx
/
gontrol
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added dark mode and switch

This commit is contained in:
gurkenhabicht 2025-06-12 02:00:08 +02:00
parent 083567bcfc
commit bb6bbfdffd
3 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
static/gontrol-helper.js
View File

@ -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 = '<i class="bi bi-moon"></i>';
} else {
body.classList.add('bg-light', 'text-dark');
toggleBtn.innerHTML = '<i class="bi bi-sun"></i>';
}
}
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);
});
}

6
static/gontrol-stylesheet.css
View File

@ -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;

16
templates/index.html
View File

@ -7,6 +7,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="static/gontrol-stylesheet.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<!-- Include Cytoscape.js -->
<script src="https://cdn.jsdelivr.net/npm/cytoscape@3.23/dist/cytoscape.min.js"></script>
@ -14,7 +15,14 @@
<script type="text/javascript" src="static/gontrol-helper.js"></script>
<title>g2: gommand & gontrol</title>
</head>
<body>
<!-- <body class="bg-dark text-light" data-bs-theme="dark"> -->
<body class="bg-light text-dark" data-bs-theme="light">
<button id="themeToggleButton"
class="btn btn-outline-secondary position-fixed"
style="top: 1rem; right: 1rem; z-index: 1050;"
aria-label="Toggle Theme">
<i class="bi bi-sun"></i>
</button>
<div class="container-fluid px-4 py-3 pb-5">
<div class="row g-4">
<!-- Agent List -->
@ -61,7 +69,7 @@
<!-- Graph -->
<div>
<h3>Graph</h3>
<!-- <h3>Graph</h3> -->
<div class="border" id="cyto-graph" style="min-height: 320px;"></div>
</div>
</div>
@ -115,8 +123,8 @@
</div>
<!-- Sticky Footer Navbar -->
<nav class="navbar bg-body-tertiary fixed-bottom">
<div class="px-4 container-fluid navbar text-primary-emphasis bg-primary-subtle border-top border-primary-subtle">
<nav class="navbar bg-body-tertiary fixed-bottom bg-primary-subtle border-top border-primary-subtle">
<div class="px-4 container-fluid navbar text-primary-emphasis bg-primary-subtle">
<form id="agentCommands"
hx-post="http://localhost:5555/executeCommand"
hx-target="#commandOutput"