[ENH] bootstrap themes across light and dark mode

public/styles/style-bootstrap.css

@@ -266,20 +266,6 @@ body {
     right: 3px;
 }
 
-.textnewui {
-    color: white;
-    font-weight: bold;
-    padding-top: 5px;
-    cursor: pointer;
-    position: absolute;
-    right: 0; 
-    margin-right: 10px;
-}
-
-.LogoffLinkColor {
-    color:white;
-}
-
 #logoutControlSpan2 {
     cursor: pointer;
     color: white;
@@ -348,7 +334,7 @@ body {
     -ms-box-sizing:border-box;
     -moz-box-sizing:border-box;
     box-sizing:border-box;
-    -webkit-box-sizing:border-box; 
+    -webkit-box-sizing:border-box;
 }
 
 .night #column_l {
@@ -562,7 +548,7 @@ body {
     padding: 3px;
     margin-right: 3px;
     cursor: pointer;
-    background-color: white; 
+    background-color: white;
 }
 
 #id_dialogtitle {
@@ -768,7 +754,7 @@ body {
     margin-left: 5px;
 }
 
-/* Example if <table> is relplaced with <div><p> then image can be defined in css 
+/* Example if <table> is relplaced with <div><p> then image can be defined in css
 #NoMeshesPanel {
     background: url(../images/info.png) no-repeat 23px 20px;
     height: 48px;
@@ -2082,7 +2068,7 @@ nav .lbbuttonsel2 {
 #d2notifyMsg,
 #d2devNotes,
 #d2devEvent,
-#d2runcmd, 
+#d2runcmd,
 #d2devMessage,
 #d2smsText,
 #d2emailSubject,
@@ -2128,10 +2114,245 @@ nav .lbbuttonsel2 {
     background-color: #d3d9d6;
     background-repeat: repeat;
     background-attachment: scroll;
+    color: var(--title-color, #212529); /* fallback: dark gray */
+}
+
+/* Light theme text colors */
+[data-bs-theme="light"] h1,
+[data-bs-theme="light"] h2,
+[data-bs-theme="light"] h3,
+[data-bs-theme="light"] h4,
+[data-bs-theme="light"] h5,
+[data-bs-theme="light"] h6,
+[data-bs-theme="light"] .fs-4,
+[data-bs-theme="light"] .content-heading,
+[data-bs-theme="light"] .panel-title,
+[data-bs-theme="light"] b,
+[data-bs-theme="light"] span {
+    color: #212529 !important; /* Darker gray for better contrast */
+}
+
+/* Dark theme text colors */
+[data-bs-theme="dark"] h1,
+[data-bs-theme="dark"] h2,
+[data-bs-theme="dark"] h3,
+[data-bs-theme="dark"] h4,
+[data-bs-theme="dark"] h5,
+[data-bs-theme="dark"] h6,
+[data-bs-theme="dark"] .fs-4,
+[data-bs-theme="dark"] .content-heading,
+[data-bs-theme="dark"] .panel-title,
+[data-bs-theme="dark"] b,
+[data-bs-theme="dark"] span {
+    color: #bbb !important;
+}
+
+/* Main content areas */
+[data-bs-theme="light"] .content-area,
+[data-bs-theme="light"] .panel-content,
+[data-bs-theme="light"] .card-body,
+[data-bs-theme="light"] .modal-content,
+[data-bs-theme="light"] .table,
+[data-bs-theme="light"] .list-group-item {
+    color: #212529;
+    background-color: #ffffff;
 }
 
-.night .h1 {
-    background-image: linear-gradient(to right, #000 0%, #333 100%);
+[data-bs-theme="dark"] .content-area,
+[data-bs-theme="dark"] .panel-content,
+[data-bs-theme="dark"] .card-body,
+[data-bs-theme="dark"] .modal-content,
+[data-bs-theme="dark"] .table,
+[data-bs-theme="dark"] .list-group-item {
+    color: #f8f9fa;
+    background-color: #212529;
+}
+
+/* Form elements */
+[data-bs-theme="light"] .form-control,
+[data-bs-theme="light"] .form-select,
+[data-bs-theme="light"] label,
+[data-bs-theme="light"] input,
+[data-bs-theme="light"] textarea,
+[data-bs-theme="light"] select,
+[data-bs-theme="light"] .ms-2 {
+    color: #212529;
+}
+
+[data-bs-theme="dark"] .form-label,
+[data-bs-theme="dark"] .form-text,
+[data-bs-theme="dark"] label,
+[data-bs-theme="dark"] .ms-2 {
+    color: #f8f9fa;
+}
+
+[data-bs-theme="dark"] .form-control,
+[data-bs-theme="dark"] .form-select {
+    background-color: #2b3035;
+    border-color: #6c757d;
+    color: #f8f9fa;
+}
+
+/* Ensure form controls are visible in dark mode */
+[data-bs-theme="dark"] input[type="text"],
+[data-bs-theme="dark"] input[type="password"],
+[data-bs-theme="dark"] input[type="email"],
+[data-bs-theme="dark"] input[type="number"],
+[data-bs-theme="dark"] textarea,
+[data-bs-theme="dark"] select,
+[data-bs-theme="dark"] .form-select {
+    color: #f8f9fa !important;
+    background-color: #2b3035 !important;
+}
+
+/* Fix for select dropdown options in dark mode */
+[data-bs-theme="dark"] select option {
+    color: #f8f9fa !important;
+    background-color: #2b3035 !important;
+}
+
+/* Ensure checkboxes are visible in both light and dark mode */
+[data-bs-theme="light"] input[type="checkbox"] {
+    opacity: 1 !important;
+    appearance: checkbox !important;
+}
+
+[data-bs-theme="light"] input[type="checkbox"]:checked {
+    background-color: #0d6efd !important;
+    border-color: #0d6efd !important;
+}
+
+[data-bs-theme="dark"] input[type="checkbox"] {
+    opacity: 1 !important;
+    appearance: checkbox !important;
+}
+
+/* Ensure select dropdown remains visible when focused */
+[data-bs-theme="dark"] select:focus {
+    color: #f8f9fa !important;
+    background-color: #2b3035 !important;
+    border-color: #86b7fe;
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+/* Fix for placeholder text in inputs */
+[data-bs-theme="dark"] ::placeholder {
+    color: #adb5bd !important;
+    opacity: 1;
+}
+
+/* Ensure labels are visible in dark mode */
+[data-bs-theme="dark"] label {
+    color: #f8f9fa !important;
+}
+
+/* Buttons */
+[data-bs-theme="light"] .btn {
+    color: #fff;
+}
+
+[data-bs-theme="dark"] .btn-outline-secondary {
+    color: #adb5bd;
+}
+
+/* Context menus */
+[data-bs-theme="light"] .contextMenu {
+    background-color: #ffffff;
+    border: 1px solid #dee2e6;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+[data-bs-theme="dark"] .contextMenu {
+    background-color: #343a40;
+    border: 1px solid #495057;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+[data-bs-theme="light"] .cmtext {
+    color: #212529;
+}
+
+[data-bs-theme="dark"] .cmtext {
+    color: #f8f9fa;
+}
+
+/* Navigation and headers */
+[data-bs-theme="light"] .topbar_td,
+[data-bs-theme="light"] .masthead {
+    background-color: #f8f9fa;
+    color: #212529;
+}
+
+[data-bs-theme="dark"] .topbar_td,
+[data-bs-theme="dark"] .masthead {
+    background-color: #343a40;
+    color: #f8f9fa;
+}
+
+/* Tables */
+[data-bs-theme="light"] .table,
+[data-bs-theme="light"] .table td,
+[data-bs-theme="light"] .table th,
+[data-bs-theme="light"] .table tr {
+    --bs-table-bg: #ffffff;
+    --bs-table-striped-bg: #f8f9fa;
+    --bs-table-hover-bg: #e9ecef;
+    color: #212529 !important;
+}
+
+/* Power state indicators in tables */
+[data-bs-theme="light"] .table .pwState {
+    border: 1px solid #dee2e6;
+    min-width: 2px;
+}
+
+[data-bs-theme="light"] .table .pwsBlack {
+    background-color: #212529 !important;
+}
+
+[data-bs-theme="light"] .table .pwsTransparent {
+    background-color: #f8f9fa !important;
+    border-left: none;
+    border-right: none;
+}
+
+[data-bs-theme="dark"] .table {
+    --bs-table-bg: #212529;
+    --bs-table-striped-bg: #2c3034;
+    --bs-table-hover-bg: #32383e;
+    color: #f8f9fa;
+}
+
+/* Tabs */
+[data-bs-theme="light"] .nav-tabs .nav-link {
+    color: #495057;
+}
+
+[data-bs-theme="dark"] .nav-tabs .nav-link {
+    color: #f8f9fa;
+}
+
+/* Custom scrollbars */
+[data-bs-theme="light"] ::-webkit-scrollbar-thumb {
+    background-color: #adb5bd;
+}
+
+[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
+    background-color: #6c757d;
+}
+
+.textnewui {
+    color: white !important;
+    font-weight: bold;
+    padding-top: 5px;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    margin-right: 10px;
+}
+
+.LogoffLinkColor {
+    color:white !important;
 }
 
 .h2end {
@@ -2664,7 +2885,7 @@ nav .lbbuttonsel2 {
     .deskToolsBar:hover {
         background-color: #EFE8B6;
     }
- 
+
     .night .deskToolsBar {
         color: #ddd;
     }
@@ -3298,7 +3519,7 @@ nav .lbbuttonsel2 {
 .sidebar .nav-link {
     font-size: xx-large;
 }
-  
+
 .card:hover, #p2AccountImage:hover, #p2canvas:hover {
     background: #f3f5f7 !important;
 }
@@ -3324,8 +3545,33 @@ nav .lbbuttonsel2 {
     padding: 0.05rem !important; /* Decrease padding to reduce row height */
 }
 
+/* Close button styles for both themes */
 .btn-close {
-    background-color: white !important;
+    background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
+    opacity: 0.8 !important;
+    transition: all 0.2s ease-in-out;
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+[data-bs-theme="dark"] .btn-close {
+    background: #2b3035 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+/*  Text directly displayed in div light/dark mode visibility */
+[data-bs-theme="light"] .col-md-10:not(.text-muted),
+[data-bs-theme="light"] .col-lg-10:not(.text-muted) {
+    color: #212529 !important;
+}
+
+[data-bs-theme="dark"] .col-md-10:not(.text-muted),
+[data-bs-theme="dark"] .col-lg-10:not(.text-muted) {
+    color: #f8f9fa !important;
+}
+
+.btn-close:hover {
     opacity: 1 !important;
 }
 
@@ -3404,11 +3650,11 @@ nav .lbbuttonsel2 {
 /* .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
     display: inline;
 }
-    
+
 .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
     display: inline-flex;
 }
-    
+
 .select2-container--bootstrap-5 .select2-selection--multiple .select2-search {
     display: inline !important;
 } */