Dark Mode Support on BM Dashboard

package.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://json.schemastore.org/package.json",
   "name": "hgnreactapp",
   "version": "0.1.0",
   "license": "GPL-2.0",

public/index.css

@@ -1,4 +1,325 @@
 /* public/index.css */
+
+/* Global Dark Mode Styles */
+body.dark-mode,
+body.bm-dashboard-dark {
+  background-color: #1b2a41 !important;
+  color: #ffffff !important;
+}
+
+body.dark-mode #root,
+body.bm-dashboard-dark #root {
+  background-color: #1b2a41 !important;
+  color: #ffffff !important;
+}
+
+/* Enhanced text visibility for dark mode */
+body.dark-mode *,
+body.bm-dashboard-dark * {
+  color: #ffffff !important;
+}
+
+body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
+body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
+body.bm-dashboard-dark h1, body.bm-dashboard-dark h2, body.bm-dashboard-dark h3,
+body.bm-dashboard-dark h4, body.bm-dashboard-dark h5, body.bm-dashboard-dark h6 {
+  color: #ffffff !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode p, body.dark-mode span, body.dark-mode div,
+body.dark-mode label, body.dark-mode a, body.dark-mode li,
+body.bm-dashboard-dark p, body.bm-dashboard-dark span, body.bm-dashboard-dark div,
+body.bm-dashboard-dark label, body.bm-dashboard-dark a, body.bm-dashboard-dark li {
+  color: #ffffff !important;
+}
+
+body.dark-mode .text-muted,
+body.bm-dashboard-dark .text-muted {
+  color: #b8c5d1 !important;
+}
+
+body.dark-mode .text-secondary,
+body.bm-dashboard-dark .text-secondary {
+  color: #d1d8e0 !important;
+}
+
+body.dark-mode .text-primary,
+body.bm-dashboard-dark .text-primary {
+  color: #66b3ff !important;
+}
+
+body.dark-mode .text-success,
+body.bm-dashboard-dark .text-success {
+  color: #66ff99 !important;
+}
+
+body.dark-mode .text-warning,
+body.bm-dashboard-dark .text-warning {
+  color: #ffcc66 !important;
+}
+
+body.dark-mode .text-danger,
+body.bm-dashboard-dark .text-danger {
+  color: #ff6666 !important;
+}
+
+body.dark-mode .text-info,
+body.bm-dashboard-dark .text-info {
+  color: #66ffff !important;
+}
+
+/* Dark mode for common elements */
+body.dark-mode .container,
+body.dark-mode .container-fluid,
+body.bm-dashboard-dark .container,
+body.bm-dashboard-dark .container-fluid {
+  background-color: #1b2a41;
+  color: #ffffff;
+}
+
+body.dark-mode .card,
+body.bm-dashboard-dark .card {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff;
+}
+
+body.dark-mode .card-body,
+body.bm-dashboard-dark .card-body {
+  color: #ffffff;
+}
+
+body.dark-mode .card-title,
+body.bm-dashboard-dark .card-title {
+  color: #ffffff !important;
+}
+
+body.dark-mode .card-text,
+body.bm-dashboard-dark .card-text {
+  color: #ffffff !important;
+}
+
+body.dark-mode .card-header,
+body.bm-dashboard-dark .card-header {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .form-control,
+body.bm-dashboard-dark .form-control {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .form-control::placeholder,
+body.bm-dashboard-dark .form-control::placeholder {
+  color: #b8c5d1 !important;
+}
+
+body.dark-mode .form-control:focus,
+body.bm-dashboard-dark .form-control:focus {
+  background-color: #2e5061;
+  border-color: #4a6072;
+  color: #ffffff !important;
+  box-shadow: 0 0 0 0.2rem rgba(74, 96, 114, 0.25);
+}
+
+body.dark-mode .form-label,
+body.bm-dashboard-dark .form-label {
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn-primary,
+body.bm-dashboard-dark .btn-primary {
+  background-color: #3a506b;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn-primary:hover,
+body.bm-dashboard-dark .btn-primary:hover {
+  background-color: #4a6072;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn-secondary,
+body.bm-dashboard-dark .btn-secondary {
+  background-color: #2e5061;
+  border-color: #2e5061;
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn-secondary:hover,
+body.bm-dashboard-dark .btn-secondary:hover {
+  background-color: #3a506b;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .btn,
+body.bm-dashboard-dark .btn {
+  color: #ffffff !important;
+}
+
+body.dark-mode .table,
+body.bm-dashboard-dark .table {
+  color: #ffffff !important;
+}
+
+body.dark-mode .table th,
+body.dark-mode .table td,
+body.bm-dashboard-dark .table th,
+body.bm-dashboard-dark .table td {
+  color: #ffffff !important;
+  border-color: #3a506b;
+}
+
+body.dark-mode .table-striped > tbody > tr:nth-of-type(odd),
+body.bm-dashboard-dark .table-striped > tbody > tr:nth-of-type(odd) {
+  background-color: rgba(46, 80, 97, 0.5);
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-content,
+body.bm-dashboard-dark .modal-content {
+  background-color: #2e5061;
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-header,
+body.bm-dashboard-dark .modal-header {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-title,
+body.bm-dashboard-dark .modal-title {
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-body,
+body.bm-dashboard-dark .modal-body {
+  color: #ffffff !important;
+}
+
+body.dark-mode .modal-footer,
+body.bm-dashboard-dark .modal-footer {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .nav-tabs .nav-link,
+body.bm-dashboard-dark .nav-tabs .nav-link {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .nav-tabs .nav-link.active,
+body.bm-dashboard-dark .nav-tabs .nav-link.active {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+/* Navigation and menu items */
+body.dark-mode .nav-link,
+body.bm-dashboard-dark .nav-link {
+  color: #ffffff !important;
+}
+
+body.dark-mode .navbar,
+body.bm-dashboard-dark .navbar {
+  background-color: #1b2a41 !important;
+}
+
+body.dark-mode .navbar-brand,
+body.bm-dashboard-dark .navbar-brand {
+  color: #ffffff !important;
+}
+
+body.dark-mode .dropdown-menu,
+body.bm-dashboard-dark .dropdown-menu {
+  background-color: #2e5061;
+  border-color: #3a506b;
+}
+
+body.dark-mode .dropdown-item,
+body.bm-dashboard-dark .dropdown-item {
+  color: #ffffff !important;
+}
+
+body.dark-mode .dropdown-item:hover,
+body.bm-dashboard-dark .dropdown-item:hover {
+  background-color: #3a506b;
+  color: #ffffff !important;
+}
+
+/* Alert components */
+body.dark-mode .alert,
+body.bm-dashboard-dark .alert {
+  color: #ffffff !important;
+}
+
+body.dark-mode .alert-primary,
+body.bm-dashboard-dark .alert-primary {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
+body.dark-mode .alert-secondary,
+body.bm-dashboard-dark .alert-secondary {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+/* List groups */
+body.dark-mode .list-group-item,
+body.bm-dashboard-dark .list-group-item {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+/* Breadcrumbs */
+body.dark-mode .breadcrumb,
+body.bm-dashboard-dark .breadcrumb {
+  background-color: #2e5061;
+}
+
+body.dark-mode .breadcrumb-item,
+body.bm-dashboard-dark .breadcrumb-item {
+  color: #ffffff !important;
+}
+
+body.dark-mode .breadcrumb-item.active,
+body.bm-dashboard-dark .breadcrumb-item.active {
+  color: #b8c5d1 !important;
+}
+
+/* Pagination */
+body.dark-mode .page-link,
+body.bm-dashboard-dark .page-link {
+  background-color: #2e5061;
+  border-color: #3a506b;
+  color: #ffffff !important;
+}
+
+body.dark-mode .page-item.active .page-link,
+body.bm-dashboard-dark .page-item.active .page-link {
+  background-color: #3a506b;
+  border-color: #4a6072;
+  color: #ffffff !important;
+}
+
 /* Fix the position of the header at the top */
 .top {
     position: fixed;

src/components/App.jsx

@@ -12,6 +12,7 @@ import Loading from './common/Loading';
 import '../App.css';
 import { initMessagingSocket } from '../utils/messagingSocket';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import ThemeManager from './common/ThemeManager';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -228,6 +229,7 @@ class App extends Component {
           <QueryClientProvider client={queryClient}>
             <ModalProvider>
               <Router>
+                <ThemeManager />
                 <UpdateDocumentTitle />
                 {routes}
               </Router>

src/components/AutoUpdate/AutoUpdate.jsx

@@ -17,7 +17,15 @@ function AutoUpdate() {
     headers: noCacheHeaders,
   };
 
-  const hashRequest = new Request('/hash.txt');
+  // Create the hash request with proper URL handling for test environment
+  const hashRequest = (() => {
+    try {
+      return new Request('/hash.txt');
+    } catch (error) {
+      // In test environment, use a fallback URL
+      return new Request('http://localhost/hash.txt');
+    }
+  })();
 
   useEffect(() => {
     fetch(hashRequest, requestParams)