add dark mode

mix-manifest.json

@@ -1,4 +1,5 @@
 {
     "/templates/Froxlor/assets/js/main.js": "/templates/Froxlor/assets/js/main.js",
-    "/templates/Froxlor/assets/css/main.css": "/templates/Froxlor/assets/css/main.css"
+    "/templates/Froxlor/assets/css/main.css": "/templates/Froxlor/assets/css/main.css",
+    "/templates/Froxlor/assets/css/dark.css": "/templates/Froxlor/assets/css/dark.css"
 }

templates/Froxlor/config.json

@@ -13,7 +13,6 @@
 		},
 		"dark": {
 			"css": [
-				"main.css",
 				"dark.css",
 				"custom.css"
 			],

templates/Froxlor/src/scss/_global.scss

@@ -0,0 +1,39 @@
+@import "~@fortawesome/fontawesome-free/css/all";
+
+.navbar {
+  background: darken($navbar-bg, 3);
+}
+
+.navbar, .card {
+  @extend .shadow-sm;
+}
+
+.alert-icon {
+  padding: .5rem;
+  background: rgba(0, 0, 0, .15);
+  text-align: center;
+  border-radius: $border-radius;
+  margin-right: .75rem;
+}
+
+.card .card-body {
+  p {
+    @extend .card-text;
+  }
+}
+
+.max-w-420 {
+  max-width: 420px;
+}
+
+.max-w-xs {
+  max-width: 575.98px;
+}
+
+.max-w-lg {
+  max-width: 991.98px;
+}
+
+footer {
+  @extend .text-muted;
+}

templates/Froxlor/src/scss/dark.scss

@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+// Bootstrap
+@import "variables/dark";
+@import "~bootstrap/scss/bootstrap";
+
+// Theme
+@import "global";

templates/Froxlor/src/scss/main.scss

@@ -1,39 +1,8 @@
 @charset "UTF-8";
 
-@import "~@fortawesome/fontawesome-free/css/all";
-@import "variables";
+// Bootstrap
+@import "variables/main";
 @import "~bootstrap/scss/bootstrap";
 
-.navbar, .card {
-  @extend .shadow-sm;
-}
-
-.alert-icon {
-  padding: .5rem;
-  background: rgba(0, 0, 0, .15);
-  text-align: center;
-  border-radius: $border-radius;
-  margin-right: .75rem;
-}
-
-.card .card-body {
-  p {
-    @extend .card-text;
-  }
-}
-
-.max-w-420 {
-  max-width: 420px;
-}
-
-.max-w-xs {
-  max-width: 575.98px;
-}
-
-.max-w-lg {
-  max-width: 991.98px;
-}
-
-footer {
-  @extend .text-muted;
-}
+// Theme
+@import "global";

templates/Froxlor/src/scss/variables/_dark.scss

@@ -0,0 +1,16 @@
+@import "main";
+
+// Body
+$body-bg: $dark-bg;
+$body-color: $dark-font-color;
+
+// Card
+$card-bg: lighten($body-bg, 10);
+
+$navbar-bg: $dark-bg;
+
+$light: lighten($dark-bg, 15);
+$list-group-bg: lighten($dark-bg, 10);
+$list-group-color: $body-color;
+
+$nav-link-color: $body-color;

templates/Froxlor/src/scss/variables/_main.scss

@@ -31,4 +31,7 @@ $body-color: $light-font-color;
 $border-radius: 0.5rem;
 
 // Links
-$links: $froxlor-blue-dark;
+$links: $froxlor-blue-dark;
+
+// Navbar
+$navbar-bg: #ffffff;

templates/Froxlor/userarea.html.twig

@@ -17,7 +17,7 @@
 		</div>
 	{% endif %}
 
-	<nav class="navbar navbar-expand navbar-light bg-light py-0">
+	<nav class="navbar navbar-expand py-0">
 		<div class="container-fluid gx-0">
 			<a class="navbar-brand bg-dark p-3" style="width: 280px" href="{{ linker({'section': 'index'}) }}">
 				<img src="{{ header_logo }}" alt="" width="auto" height="24" class="d-inline-block align-text-top">

webpack.mix.js

@@ -4,4 +4,5 @@ let mix = require('laravel-mix');
 
 mix
     .js('templates/Froxlor/src/main.js', 'templates/Froxlor/assets/js')
-    .sass('templates/Froxlor/src/scss/main.scss', 'templates/Froxlor/assets/css');
+    .sass('templates/Froxlor/src/scss/main.scss', 'templates/Froxlor/assets/css')
+    .sass('templates/Froxlor/src/scss/dark.scss', 'templates/Froxlor/assets/css');