more work on bootstrap darkmode implementation

Signed-off-by: Michael Kaufmann <d00p@froxlor.org>

templates/Froxlor/assets/scss/_variables-dark.scss

@@ -1,65 +1,2 @@
-// Color
-//$primary: $froxlor-700;
-//$secondary: $gray-500;
-//$info: $froxlor-800;
-
-// Body
-//$body-bg: $gray-900;
-//$body-color: $gray-100;
-
-// Borders
-//$border-color: $gray-900;
-//$border-color-translucent: $gray-900;
-
-// Link
-//$link-color: $froxlor-500;
-//$nav-link-color: $body-color;
-
-// List groups
-//$list-group-bg: $gray-800;
-//$list-group-color: $body-color;
-//$list-group-hover-bg: $gray-700;
-//$list-group-action-color: $body-color;
-
-// Navbar
-//$navbar-bg: $gray-800;
-//$navbar-bg-mobile: $navbar-bg;
-//$navbar-light-color: $gray-200;
-//$navbar-light-hover-color: $gray-500;
-//$navbar-light-active-color: $gray-500;
-
-// Sidebar
-//$sidebar-width: 256px;
-
-// Card
-//$card-bg: $gray-800;
-//$card-border-color: $gray-600;
-
 // Heading
-//$heading-bg: $gray-800;
+$heading-border-color-dark: rgba(0,0,0,0.15);
-//$heading-color: $body-color;
-//$heading-border-color: rgba(0,0,0,0.15);
-
-// Dropdown
-//$dropdown-bg: $gray-800;
-//$dropdown-color: $gray-100;
-//$dropdown-link-color: $gray-100;
-//$dropdown-link-hover-bg: $gray-900;
-
-// Modal
-//$modal-content-bg: $gray-800;
-
-// Form control
-//$input-bg: $gray-900;
-//$input-border-color: $black;
-//$input-group-addon-bg: $gray-800;
-
-// Progress bar
-//$progress-bg: $gray-900;
-
-// Search
-//$search-bg: $gray-800;
-
-// Popover
-//$popover-bg: $gray-800;
-//$popover-body-color: $gray-100;

templates/Froxlor/assets/scss/components/_dropdown.scss

@@ -10,3 +10,15 @@
 		}
 	}
 }
+
+@include color-mode(dark) {
+	.dropdown {
+		.dropdown-menu {
+			.dropdown-item {
+				i {
+					color: $body-secondary-color-dark;
+				}
+			}
+		}
+	}
+}

templates/Froxlor/assets/scss/components/_generic.scss

@@ -87,3 +87,9 @@
 a {
 	text-decoration: none;
 }
+
+@include color-mode(dark) {
+	.table>:not(caption)>*>* {
+		background-color: transparent;
+	}
+}

templates/Froxlor/assets/scss/components/_heading.scss

@@ -11,5 +11,9 @@
 @include color-mode(dark) {
 	.heading {
 		background: $dark-bg;
+		border-top: $heading-border-color-dark solid 1px;
+	}
+	.heading h5 {
+		color: $body-color-dark;
 	}
 }

templates/Froxlor/assets/scss/components/_navbar.scss

@@ -19,6 +19,14 @@
 	}
 }
 
+@include color-mode(dark) {
+	@include media-breakpoint-up(md) {
+		.navbar {
+			background: $dark-bg;
+		}
+	}
+}
+
 @include media-breakpoint-down(md) {
 	.navbar {
 		background: $navbar-bg-mobile;
@@ -31,7 +39,7 @@
 				color: $white;
 
 				&:hover {
-					color: rgba(255,255,255,.45);
+					color: rgba(255, 255, 255, .45);
 				}
 			}
 
@@ -53,6 +61,7 @@
 		.navbar-toggler {
 			border-color: transparent;
 		}
+
 		.navbar-toggler-icon {
 			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 		}

templates/Froxlor/user/index.html.twig

@@ -59,7 +59,7 @@
 						<i class="fa-solid fa-gears me-1"></i>
 						{{ lng('admin.systemdetails') }}
 						<div class="float-end">
-							<button id="copySysInfo" class="btn btn-outline-dark" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .5rem;" title="Copy to clipboard"><i class="fa-solid fa-copy"></i></button>
+							<button id="copySysInfo" class="btn btn-outline-secondary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .5rem;" title="Copy to clipboard"><i class="fa-solid fa-copy"></i></button>
 						</div>
 						<div id="ccSysInfo" class="d-none">
 - Froxlor: {{ call_static('\\Froxlor\\Froxlor', 'getVersionString') }}