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(); bindRowClicks();
restoreCheckboxState(); restoreCheckboxState();
themeToggle();
}); });
// function prepareAgentNames(event) { // 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); color: var(--bs-primary);
} }
.execute-navbar { /* .execute-navbar { */
background-color: var(--bs-info-bg-subtle); /* background-color: var(--bs-info-bg-subtle); */
} /* } */
#graph-container { #graph-container {
margin: 0; padding: 0; 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 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"> <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> <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> <script src="https://unpkg.com/htmx.org@1.9.12"></script>
<!-- Include Cytoscape.js --> <!-- Include Cytoscape.js -->
<script src="https://cdn.jsdelivr.net/npm/cytoscape@3.23/dist/cytoscape.min.js"></script> <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> <script type="text/javascript" src="static/gontrol-helper.js"></script>
<title>g2: gommand & gontrol</title> <title>g2: gommand & gontrol</title>
</head> </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="container-fluid px-4 py-3 pb-5">
<div class="row g-4"> <div class="row g-4">
<!-- Agent List --> <!-- Agent List -->
@ -61,7 +69,7 @@
<!-- Graph --> <!-- Graph -->
<div> <div>
<h3>Graph</h3> <!-- <h3>Graph</h3> -->
<div class="border" id="cyto-graph" style="min-height: 320px;"></div> <div class="border" id="cyto-graph" style="min-height: 320px;"></div>
</div> </div>
</div> </div>
@ -115,8 +123,8 @@
</div> </div>
<!-- Sticky Footer Navbar --> <!-- Sticky Footer Navbar -->
<nav class="navbar bg-body-tertiary fixed-bottom"> <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 border-top border-primary-subtle"> <div class="px-4 container-fluid navbar text-primary-emphasis bg-primary-subtle">
<form id="agentCommands" <form id="agentCommands"
hx-post="http://localhost:5555/executeCommand" hx-post="http://localhost:5555/executeCommand"
hx-target="#commandOutput" hx-target="#commandOutput"