added dark mode design for /key

resources/less/metager/pages/key-dark.less

+// Variables
+@import "../variables-dark.less";
+@import "../general/cards.less";
+#key-site {
+    background-color:@background-color;
+    color:@text-color;
+    .section {
+        .card-medium;
+        margin: 8px 0;
+        .error {
+            color: red;
+            text-align: center;
+            font-weight: bold;
+        }
+    }
+    #form-wrapper {
+        margin-top: 8px;
+        form {
+            text-align: center;
+        }
+    }
+    
+    #back-link {
+        text-align: center;
+        margin-top: 16px;
+    }
+}
\ No newline at end of file

resources/less/metager/pages/key.less

@@ -2,6 +2,8 @@
 @import "../variables.less";
 @import "../general/cards.less";
 #key-site {
+    background-color:@background-color;
+    color:@text-color;
     .section {
         .card-medium;
         margin: 8px 0;

resources/views/key.blade.php

@@ -3,7 +3,15 @@
 @section('title', $title )
 
 @section('content')
-<link type="text/css" rel="stylesheet" href="{{ mix('/css/key.css') }}" />
+
+@if(Cookie::get('dark_mode') === "2")
+	<link type="text/css" rel="stylesheet" href="{{ mix('css/key-dark.css') }}"/>
+@elseif(Cookie::get('dark_mode') === "1")
+	<link type="text/css" rel="stylesheet" href="{{ mix('css/key.css') }}"/>
+@else
+    <link type="text/css" rel="stylesheet" media="(prefers-color-scheme:dark)" href="{{ mix('css/key-dark.css') }}"/>
+	<link type="text/css" rel="stylesheet" media="(prefers-color-scheme:light)" href="{{ mix('css/key.css') }}"/>
+@endif
 <div id="key-site">
     <div class="section">
         <h1>{{ trans('key.h1')}}</h1>

webpack.mix.js

@@ -37,12 +37,12 @@ mix
   .less("resources/less/font-awesome/solid.less", "public/css/fontawesome-solid.css", {
     strictMath: true
   })
-  .less(
-    "resources/less/metager/pages/key.less",
-    "public/css/key.css", {
+  .less("resources/less/metager/pages/key.less", "public/css/key.css", {
     strictMath: true
-  }
-  )
+  })
+  .less("resources/less/metager/pages/key-dark.less", "public/css/key-dark.css", {
+    strictMath: true
+  })
   .less("resources/less/utility.less", "public/css/utility.css", {
     strictMath: true
   })