work on darkmode

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

templates/Froxlor/src/scss/components/_search.scss

@@ -9,6 +9,7 @@
 	.search-input {
 		outline: none;
 		border: none;
+		background: transparent;
 	}
 
 	.search-results-box {

templates/Froxlor/src/scss/dark.scss

@@ -3,6 +3,61 @@
 // Bootstrap
 @import "variables/dark";
 @import "~bootstrap/scss/bootstrap";
+@import "~@fortawesome/fontawesome-free/scss/fontawesome";
 
 // Theme
 @import "global";
+@import "components/alert";
+@import "components/card";
+@import "components/dropdown";
+@import "components/footer";
+@import "components/form";
+@import "components/navbar";
+@import "components/sidebar";
+@import "components/search";
+
+.input-group-text {
+	background-color: $dark-bg;
+}
+.form-control:disabled, .form-control[readonly] {
+	background-color: $dark-bg;
+	opacity: 1;
+	color: #ddd;
+}
+
+.border-top {
+    border-top: 1px solid var(--bs-body-bg)!important;
+}
+
+.form-select, .form-control,
+section h3,
+section h3 + span,
+section h5 {
+	color: $dark-bg;
+}
+
+.form-control-plaintext {
+	color: $white;
+}
+.navbar {
+	background: $dark;
+
+	.navbar-nav {
+		.nav-link {
+			color: $white;
+
+			&:hover {
+				color: rgba(255,255,255,.45);
+			}
+		}
+	}
+}
+
+.navbar-light {
+	.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/src/scss/variables/_dark.scss

@@ -13,4 +13,7 @@ $light: lighten($dark-bg, 15);
 $list-group-bg: lighten($dark-bg, 10);
 $list-group-color: $body-color;
 
-$nav-link-color: $body-color;
+$nav-link-color: $body-color;
+
+$white: #e9ecef;
+$light: #f8f9fa;

templates/Froxlor/table/table.html.twig

@@ -11,7 +11,7 @@
 			</div>
 		{% else %}
 			<div class="d-flex flex-column align-items-end mt-n2">
-				<div class="rounded-top bg-white small py-1 px-2 me-3 opacity-75">
+				<div class="rounded-top bg-white small py-1 px-2 me-3 opacity-75 text-dark">
 					<span type="button" data-bs-toggle="modal" data-bs-target="#searchColumnsModal" class="me-2"><i class="fa-solid fa-search"></i></span>
 					<span type="button" data-bs-toggle="modal" data-bs-target="#manageColumnsModal"><i class="fa-solid fa-cog"></i></span>
 				</div>