added lightmode for login component

components/LoginForm.vue

@@ -1,37 +1,37 @@
 <template>
-  <form class="login-form">
+  <form :class="['login-form', darkMode ? 'form-darkmode' : 'form-lightmode']">
     <div class="title-field">
       <span class="title-icon" id="logo-icon">
         <img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
       </span>
-      <pre class="title">Login</pre>
+      <pre :class="['title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Login</pre>
     </div>
     <div class="login-field">
       <div class="form-field" id="username-field">
         <label for="username-input" id="username-label">
-          <span class="icon" id="username-icon">
+          <span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
             <img loading="lazy" src="../icons/Mail-Icon.svg" />
           </span>
-          <div class="label">Username:</div>
+          <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
         </label>
-        <div class="input-field">
+        <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
           <input type="text" id="username-input" placeholder="user@example.com">
         </div>
       </div>
       <div class="form-field" id="password-field">
         <label for="password-input" id="password-label">
-          <span class="icon" id="password-icon">
+          <span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
             <img loading="lazy" src="../icons/Lock-Icon.svg" />
           </span>
-          <div class="label">Password:</div>
+          <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
         </label>
-        <div class="input-field">
+        <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
           <input type="text" id="password-input" placeholder="*******">
-          <input type="button" id="show-password-toggle" value="Show">
+          <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
         </div>
       </div>
     </div>
-    <input type="button" id="login-button" value="Login">
+    <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login">
   </form>
 </template>
 
@@ -41,6 +41,11 @@
 
 export default {
   name: "LoginForm",
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -48,7 +53,6 @@ export default {
   
 
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
@@ -64,10 +68,17 @@ export default {
   border-radius: 0.625rem;
   padding: 2.5rem 1.875rem;
   gap: 1.875rem;
+}
+
+.form-darkmode {
   border: 0.0625rem solid #000;
   background-color: #2c2c2c;
 }
 
+.form-lightmode {
+  border: 0.0625rem solid #8e8e8e;
+  background-color: #fff;
+}
 
 .title-field {
   display: flex;
@@ -94,12 +105,20 @@ export default {
 
 .title {
   margin: 0;
-    color: #fff;
   letter-spacing: 5%;
   white-space: nowrap;
   font: 400 1.875rem/1.875rem Overpass, sans-serif;
 }
 
+.pre-darkmode,
+.title-darkmode {
+  color: #fff;
+}
+
+.pre-lightmode,
+.title-lightmode {
+  color: #000;
+}
 
 .login-field {
   display: flex;
@@ -140,26 +159,42 @@ export default {
 }
 
 .icon>img {
-    filter: invert(100%);
   object-fit: contain;
   object-position: center;
   overflow: hidden;
 }
+
+.icon-darkmode>img {
+  filter: invert(100%);
+}
+
+.icon-lightmode>img {
+  filter: invert(0%);
+}
+
 #username-icon>img {
   width: auto;
   height: 0.9375rem;
 }
+
 #password-icon>img {
   width: 0.9375rem;
   height: auto;
 }
 
 .label {
-    color: #fff;
   letter-spacing: 2%;
   font: 400 0.9375rem/1.875rem Overpass, sans-serif;
 }
 
+.label-darkmode {
+  color: #fff;
+}
+
+.label-lightmode {
+  color: #000;
+}
+
 .input-field {
   display: flex;
   flex-direction: row;
@@ -171,9 +206,16 @@ export default {
   border-radius: 0.3125rem;
   padding: 0.1875rem 0.625rem;
   box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+}
+
+.input-darkmode {
   background-color: #212121;
 }
 
+.input-lightmode {
+  background-color: #EBEBEB;
+}
+
 input[type=text] {
   width: 100%;
   height: 100%;
@@ -184,17 +226,25 @@ export default {
   white-space: nowrap;
   font: 100 0.75rem/1.25rem Overpass, sans-serif;
 }
+
 input[type=button] {
   width: fit-content;
   align-self: flex-end;
   background-color: #00000000;
   border: none;
-    color: #fff;
   letter-spacing: 5%;
   white-space: nowrap;
   font: 300 0.75rem/1.25rem Overpass, sans-serif;
 }
 
+.button-darkmode {
+  color: #fff;
+}
+
+.button-lightmode {
+  color: #000;
+}
+
 #login-button {
   width: 13.75rem;
   height: 4.375rem;
@@ -202,12 +252,10 @@ export default {
   border-radius: 0.625rem;
   align-self: center;
   border: none;
+  color: #000;
   background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
-    color: #fff;
   letter-spacing: 2%;
   white-space: nowrap;
   font: 600 1.25rem/1.875rem Overpass, sans-serif;
 }
-  
-  
 </style>

pages/login.vue

@@ -46,7 +46,7 @@ export default {
   flex-direction: column;
   float: left;
   justify-content: stretch;
-  align-items: stretch;
+  align-items: center;
   width: 100%;
   flex-grow: 1;
   gap: 0.625rem;

routerFrontend/index.js

@@ -11,7 +11,7 @@ const router = createRouter({
     history: createWebHistory(),
     routes: [
         {
-            path: '/',
+            path: '/login',
             component: LoginPage
         },
         {