added lightmode option

components/ClientSearch.vue

@@ -1,14 +1,18 @@
 <template>
-  <section class="client-search">
+  <section :class="['client-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
-    <div class="label">Client</div>
+    <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Client</div>
-    <pre class="data">...</pre>
+    <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">...</pre>
   </section>
 </template>
 
 <script>
 export default {
   name: "ClientSearch",
-
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 };
 </script>
 
@@ -20,11 +24,18 @@ export default {
   gap: 1.25em;
   width: 30.125em;
   height: 3.125em;
-  background: #2C2C2C;
   box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
   border-radius: 0.625em;
 }
 
+.section-darkmode {
+  background-color: #2c2c2c;
+}
+
+.section-lightmode {
+  background-color: #fff;
+}
+
 .label {
   width: 2.5625em;
   height: 1.875em;
@@ -34,15 +45,15 @@ export default {
   font-size: 0.875em;
   line-height: 1.875;
   letter-spacing: 0.05em;
+}
+
+.label-darkmode {
   color: #FFFFFF;
 }
 
-
+.label-lightmode {
-  /* flex: 0;
+  color: #000;
-  height: 1.875em; */
+}
-  /* min-width: 1.875em;
-  width: fit-content; 
-  overflow: hidden; */
 
 .data {
   display: flex;
@@ -51,21 +62,17 @@ export default {
   padding: 0 0.625rem;
   border-radius: 0.3125rem;
   box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-    background-color: #212121;
-    color: #fff;
   letter-spacing: 5%;
   font: 400 0.75rem/250% Overpass, sans-serif;
-
-    /* gap: 0.625em;
-    flex: 0; */
 }
 
-.input input {
+.pre-darkmode {
-  flex: 1;
+  background-color: #212121;
-  width: 100%;
+  color: #fff;
-  height: 100%;
+}
-  border: none;
+
-  background: transparent;
+.pre-lightmode {
-  color: #FFFFFF;
+  background-color: #EBEBEB;
+  color: #000;
 }
 </style>

components/Dashboard.vue

@@ -1,11 +1,14 @@
 <template>
-  <section class="dashboard">
+  <section :class="['dashboard', darkMode ? 'section-darkmode' : 'section-lightmode']">
-    <h2 class="heading">My tasks</h2>
+    <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">My tasks</h2>
     <div class="shortcuts">
-      <input type="button" id="maintenance-visits" value="My Maintenance Visits">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits"
-      <input type="button" id="production-orders" value="My Production Orders">
+        value="My Maintenance Visits">
-      <input type="button" id="solutions" value="My Solutions">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders"
-      <input type="button" id="issue-slips" value="My Issue Slips">
+        value="My Production Orders">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions" value="My Solutions">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips"
+        value="My Issue Slips">
     </div>
   </section>
 </template>
@@ -16,7 +19,11 @@
 
 export default {
   name: "Dashboard",
-  
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -25,7 +32,6 @@ export default {
   
   
 <style scoped>
-  
 .dashboard {
   display: flex;
   flex-direction: column;
@@ -37,16 +43,30 @@ export default {
   gap: 1.25rem;
   border-radius: 0.625rem;
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
   background-color: #2c2c2c;
 }
 
+.section-lightmode {
+  background-color: #fff;
+}
+
 .heading {
-    color: #fff;
   letter-spacing: 5%;
   text-decoration-line: underline;
   font: 400 1rem/2rem Overpass, sans-serif;
 }
 
+.heading-darkmode {
+  color: #fff;
+}
+
+.heading-lightmode {
+  color: #000;
+}
+
 .shortcuts {
   display: flex;
   flex-direction: row;
@@ -66,13 +86,17 @@ export default {
   border-radius: 0.625rem;
   padding: 0.9375rem 1.25rem;
   border: none;
-    color: #fff;
   text-align: center;
   letter-spacing: 5%;
   font: 400 0.875rem/2rem Overpass, sans-serif;
+}
+
+.input-darkmode {
+  color: #fff;
   background-color: #343434;
 }
 
-  
+.input-lightmode {
-  
+  color: #000;
-</style>
+  background-color: #E4E4E4;
+}</style>

components/QuickAccess.vue

@@ -1,8 +1,8 @@
 <template>
-  <section class="quick-access">
+  <section :class="['quick-access', darkMode ? 'section-darkmode' : 'section-lightmode']">
-    <h2 class="heading">Quick Access</h2>
+    <h2 :class="['heading', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Quick Access</h2>
     <div class="shortcuts">
-      <input type="button" id="pins" value="Pins">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="pins" value="Pins">
       <!--<input type="button" id="maintenance-visits" value="My Maintenance Visits">
       <input type="button" id="production-orders" value="My Production Orders">
       <input type="button" id="solutions" value="My Solutions">
@@ -16,7 +16,11 @@
 
 export default {
   name: "QuickAccess",
-  
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -25,7 +29,6 @@ export default {
 
 
 <style scoped>
-  
 .quick-access {
   display: flex;
   flex-direction: column;
@@ -37,9 +40,16 @@ export default {
   gap: 1.25rem;
   border-radius: 0.625rem;
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
   background-color: #2c2c2c;
 }
 
+.section-lightmode {
+  background-color: #fff;
+}
+
 .heading {
   color: #fff;
   letter-spacing: 5%;
@@ -47,6 +57,14 @@ export default {
   font: 400 1rem/2rem Overpass, sans-serif;
 }
 
+.h2-darkmode {
+  color: #fff;
+}
+
+.h2-lightmode {
+  color: #000;
+}
+
 .shortcuts {
   display: flex;
   flex-direction: row;
@@ -66,19 +84,25 @@ export default {
   border-radius: 0.625rem;
   padding: 0.9375rem 1.25rem;
   border: none;
-    color: #fff;
   text-align: center;
   letter-spacing: 5%;
   font: 400 0.875rem/2rem Overpass, sans-serif;
+}
+
+.input-darkmode {
+  color: #fff;
   background-color: #343434;
 }
+
+.input-lightmode {
+  color: #000;
+  background-color: #E4E4E4;
+}
+
 input#pins {
   border: 0.0625rem dashed #454545;
   color: #8e8e8e;
   font: 400 0.875rem/2rem Overpass, sans-serif;
   background-color: #34343400;
 }
-  
-  
-  
 </style>

components/server/Asset.vue

@@ -1,48 +1,48 @@
 <template>
-    <section class="information">
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 class="asset-name">Asset name</h2>
+        <h2 :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Asset name</h2>
         <div class="asset-data">
             <div class="client-location">
                 <div class="data-field" id="client">
-                    <pre class="label">Client:</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
                 <div class="data-field" id="location">
-                    <pre class="label">Location:</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
             </div>
             <div class="info">
                 <div class="id-type">
                     <div class="data-field" id="id">
-                        <pre class="label">ID:</pre>
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
-                        <pre class="data">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                     <div class="data-field" id="type">
-                        <pre class="label">Type:</pre>
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
-                        <pre class="data">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                 </div>
                 <div class="data-field" id="remote-location">
-                    <pre class="label">Remote location:</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
             </div>
             <div class="rectangle-container">
-                <div class="rectangle"></div>
+                <div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
             </div>
         </div>
         <div class="asset-data">
             <div class="additional">
                 <div class="description">
-                    <h3 class="area-title">Description:</h3>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
-                    <pre class="data" id="description">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
                 </div>
             </div>
             <div class="additional">
                 <div class="notes">
-                    <h3 class="area-title">Notes:</h3>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
-                    <pre class="data" id="notes">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
                 </div>
             </div>
         </div>
@@ -56,7 +56,11 @@
 
 export default {
     name: "Asset",
-
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
 }
 
 </script>
@@ -74,20 +78,34 @@ export default {
     padding: 1.25rem 1.875rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
     background-color: #2c2c2c;
 }
 
+.section-lightmode {
+    background-color: #fff;
+}
+
 
 .asset-name {
     align-self: stretch;
     padding: 1rem 0;
-    color: #fff;
     letter-spacing: 5%;
     text-decoration-line: underline;
     font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
         sans-serif;
 }
 
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
 .data-field {
     display: flex;
     flex-direction: row;
@@ -108,11 +126,18 @@ export default {
 }
 
 .label {
-    color: #fff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
 .data {
     display: flex;
     flex-direction: row;
@@ -120,12 +145,20 @@ export default {
     padding: 0 0.625rem;
     border-radius: 0.3125rem;
     box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-    background-color: #212121;
-    color: #fff;
     letter-spacing: 5%;
     font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
+.data-darkmode {
+  background-color: #212121;
+  color: #fff;
+}
+
+.data-lightmode {
+  background-color: #EBEBEB;
+  color: #000;
+}
+
 .data#notes,
 .data#description {
     align-self: stretch;
@@ -163,11 +196,17 @@ export default {
 }
 
 .area-title {
-    color: #fff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
 .id-type {
     display: flex;
     flex-direction: row;
@@ -196,9 +235,16 @@ export default {
 .rectangle {
     width: 6.25em;
     height: 6.25em;
-    background: #212121;
     flex: none;
     order: 0;
     flex-grow: 0;
 }
+
+.rectangle-darkmode {
+  background-color: #212121;
+}
+
+.rectangle-lightmode {
+  background-color: #EBEBEB;
+}
 </style>

components/server/AssetTable.vue

@@ -1,20 +1,20 @@
 <template>
-    <div class="data">
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
-        <div class="label">Last viewed:</div>
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" id="asset-table">
-            <tr class="table-row" id="table-head">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th class="Client">Client</th>
+                <th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
-                <th class="Name">Name</th>
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
-                <th class="Type">Type</th>
+                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
-                <th class="State">State</th>
+                <th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
-                <th class="User">User</th>
+                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
-            <tr class="table-row" id="row-1">
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td class="Client">...</td>
+                <td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
-                <td class="Name">...</td>
+                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
-                <td class="Type">...</td>
+                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
-                <td class="State">...</td>
+                <td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
-                <td class="User">...</td>
+                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
     </div>
@@ -26,7 +26,11 @@
 
 export default {
     name: "AssetTable",
-
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
 }
 
 </script>
@@ -46,9 +50,16 @@ export default {
     gap: 1.25rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
     background-color: #2c2c2c;
 }
 
+.div-lightmode {
+    background-color: #fff;
+}
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;
@@ -63,12 +74,24 @@ export default {
     height: 3.125rem;
     padding: 0.625rem;
     gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
     border-top: 0.0625rem solid #000000;
 }
 
-#table-head {
+.tr-lightmode {
-    border-top: none;
+    border-top: 0.0625rem solid #8e8e8e;
-    border-bottom: 0.0625rem solid #000000;
 }
 
 th,
@@ -76,35 +99,72 @@ td {
     height: 1.875rem;
     text-align: left;
     padding: 0;
-    color: #ffffff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
 
 .Client {
     width: 33.3%;
+}
+
+.Client-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Client-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .Name {
     width: 33.3%;
+}
+
+.Name-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .Type {
     width: 12.7%;
+}
+
+.Type-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .State {
     width: 12.7%;
+}
+
+.State-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.State-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .User {
     width: 8%;
 }
@@ -118,6 +178,13 @@ th {
     font-size: 1em;
     line-height: 1.875em;
     letter-spacing: 0.05em;
+}
+
+.label-darkmode {
     color: #FFFFFF;
 }
+
+.label-lightmode {
+    color: #000;
+}
 </style>

components/server/AssetTableNoClient.vue

@@ -1,18 +1,18 @@
 <template>
-    <div class="data">
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
-        <div class="label">Assets:</div>
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets:</div>
         <table class="data-table" id="asset-table-no-client">
-            <tr class="table-row" id="table-head">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th class="Name">Name</th>
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
-                <th class="Type">Type</th>
+                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
-                <th class="State">State</th>
+                <th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
-                <th class="User">User</th>
+                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
-            <tr class="table-row" id="row-1">
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td class="Name">...</td>
+                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
-                <td class="Type">...</td>
+                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
-                <td class="State">...</td>
+                <td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
-                <td class="User">...</td>
+                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
     </div>
@@ -24,7 +24,11 @@
 
 export default {
     name: "AssetTableNoClient",
-
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
 }
 
 </script>
@@ -44,9 +48,17 @@ export default {
     gap: 1.25rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
     background-color: #2c2c2c;
 }
 
+.div-lightmode {
+    background-color: #fff;
+}
+
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;
@@ -61,12 +73,24 @@ export default {
     height: 3.125rem;
     padding: 0.625rem;
     gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
     border-top: 0.0625rem solid #000000;
 }
 
-#table-head {
+.tr-lightmode {
-    border-top: none;
+    border-top: 0.0625rem solid #8e8e8e;
-    border-bottom: 0.0625rem solid #000000;
 }
 
 th,
@@ -74,11 +98,20 @@ td {
     height: 1.875rem;
     text-align: left;
     padding: 0;
-    color: #ffffff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -86,19 +119,40 @@ th {
 
 .Name {
     width: 50%;
+}
+
+.Name-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .Type {
     width: 20%;
+}
+
+.Type-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .State {
     width: 20%;
+}
+
+.State-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.State-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .User {
     width: 10%;
 }
@@ -112,6 +166,13 @@ th {
   font-size: 1em;
   line-height: 1.875em;
   letter-spacing: 0.05em;
+}
+
+.label-darkmode {
     color: #FFFFFF;
 }
+
+.label-lightmode {
+    color: #000;
+}
 </style>

components/server/HardwareSpecifications.vue

@@ -1,39 +1,39 @@
 <template>
-    <section class="hardware-information">
+    <section :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <div class="label" id="hardware">Hardware specifications:</div>
+        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
         <div class="asset-data">
             <div class="model-CPU">
                 <div class="data-field" id="model">
-                    <pre class="label">Model:</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Model:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
                 <div class="data-field" id="CPU">
-                    <pre class="label">CPU:</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">CPU:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
             </div>
             <div class="serial-number-RAM">
                 <div class="data-field" id="serial-number">
-                    <pre class="label">Serial number:</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Serial number:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
                 <div class="data-field" id="RAM">
-                    <pre class="label">RAM:</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">RAM:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
             </div>
         </div>
         <div class="asset-data">
             <div class="additional">
                 <div class="storage-configuration">
-                    <h3 class="area-title">Storage configuration:</h3>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3>
-                    <pre class="data" id="storage-configuration">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="storage-configuration">...</pre>
                 </div>
             </div>
             <div class="additional">
                 <div class="miscellaneous">
-                    <h3 class="area-title">Miscellaneous:</h3>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3>
-                    <pre class="data" id="miscellaneous">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">...</pre>
                 </div>
             </div>
         </div>
@@ -46,7 +46,11 @@
 
 export default {
     name: "HardwareSpecifications",
-
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
 }
 
 </script>
@@ -64,9 +68,17 @@ export default {
     padding: 1.25rem 1.875rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
     background-color: #2c2c2c;
 }
 
+.section-lightmode {
+    background-color: #fff;
+}
+
+
 .data-field {
     display: flex;
     flex-direction: row;
@@ -79,11 +91,20 @@ export default {
 }
 
 .label {
-    color: #fff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.div-darkmode,
+.h3-darkmode {
+    color: #fff;
+}
+
+.div-lightmode,
+.h3-lightmode {
+    color: #000;
+}
+
 .label#hardware {
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -96,12 +117,20 @@ export default {
     padding: 0 0.625rem;
     border-radius: 0.3125rem;
     box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-    background-color: #212121;
-    color: #fff;
     letter-spacing: 5%;
     font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
+.data-darkmode {
+  background-color: #212121;
+  color: #fff;
+}
+
+.data-lightmode {
+  background-color: #EBEBEB;
+  color: #000;
+}
+
 .data#miscellaneous,
 .data#storage-configuration {
     align-self: stretch;
@@ -139,7 +168,6 @@ export default {
 }
 
 .area-title {
-    color: #fff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }

components/server/NetworkSpecifications.vue

@@ -1,25 +1,25 @@
 <template>
-    <section class="network-information">
+    <section :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <div class="label" id="network">Network specifications:</div>
+        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
         <div class="asset-data">
             <div class="IPv4-MAC">
                 <div class="data-field" id="IPv4">
-                    <pre class="label">IPv4:</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv4:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
                 <div class="data-field" id="MAC">
-                    <pre class="label">MAC:</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">MAC:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
             </div>
             <div class="IPv6-subnetmask">
                 <div class="data-field" id="IPv6">
-                    <pre class="label">IPv6:</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv6:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
                 <div class="data-field" id="subnetmask">
-                    <pre class="label">Subnetmask:</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Subnetmask:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
             </div>
         </div>
@@ -32,7 +32,11 @@
 
 export default {
     name: "NetworkSpecifications",
-
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
 }
 
 </script>
@@ -50,9 +54,16 @@ export default {
     padding: 1.25rem 1.875rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
     background-color: #2c2c2c;
 }
 
+.section-lightmode {
+    background-color: #fff;
+}
+
 .data-field {
     display: flex;
     flex-direction: row;
@@ -65,11 +76,18 @@ export default {
 }
 
 .label {
-    color: #fff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.div-darkmode {
+    color: #fff;
+}
+
+.div-lightmode {
+    color: #000;
+}
+
 .label#network {
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -82,12 +100,20 @@ export default {
     padding: 0 0.625rem;
     border-radius: 0.3125rem;
     box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-    background-color: #212121;
-    color: #fff;
     letter-spacing: 5%;
     font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
+.data-darkmode {
+  background-color: #212121;
+  color: #fff;
+}
+
+.data-lightmode {
+  background-color: #EBEBEB;
+  color: #000;
+}
+
 .asset-data {
     display: flex;
     flex-direction: row;

components/server/SoftwareSpecifications.vue

@@ -1,17 +1,17 @@
 <template>
-    <section class="software-information">
+    <section :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <div class="label" id="software">Software specifications:
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-client">
-                    <tr class="table-row" id="table-head">
+                    <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                        <th class="Software">Software</th>
+                        <th :class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">Software</th>
-                        <th class="Version">Version</th>
+                        <th :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">Version</th>
-                        <th class="License">License</th>
+                        <th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
                     </tr>
-                    <tr class="table-row" id="row-1">
+                    <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td class="Software">...</td>
+                        <td :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">...</td>
-                        <td class="Version">...</td>
+                        <td :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Version-darkmode' : 'Version-lightmode']">...</td>
-                        <td class="License">...</td>
+                        <td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                 </table>
             </div>
@@ -25,7 +25,11 @@
 
 export default {
     name: "SoftwareSpecifications",
-
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
 }
 
 </script>
@@ -43,16 +47,29 @@ export default {
     padding: 1.25rem 1.875rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
     background-color: #2c2c2c;
 }
 
+.section-lightmode {
+    background-color: #fff;
+}
 
 .label {
-    color: #fff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
 .label#software {
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -82,12 +99,24 @@ export default {
     height: 3.125rem;
     padding: 0.625rem;
     gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
     border-top: 0.0625rem solid #000000;
 }
 
-#table-head {
+.tr-lightmode {
-    border-top: none;
+    border-top: 0.0625rem solid #8e8e8e;
-    border-bottom: 0.0625rem solid #000000;
 }
 
 th,
@@ -95,11 +124,20 @@ td {
     height: 1.875rem;
     text-align: left;
     padding: 0;
-    color: #ffffff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -107,14 +145,28 @@ th {
 
 .Software {
     width: 50%;
+}
+
+.Software-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Software-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .Version {
     width: 25%;
+}
+
+.Version-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Version-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .License {
     width: 25%;
 }

components/server/Solution.vue

@@ -1,30 +1,30 @@
 <template>
-    <section class="information">
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 class="solution-name">Solution name</h2>
+        <h2 :class="['solution-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Solution name</h2>
         <div class="solution-data">
             <div class="client-asset">
                 <div class="data-field" id="client">
-                    <pre class="label">Client:</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
                 <div class="data-field" id="asset">
-                    <pre class="label">Asset:</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
             </div>
             <div class="info">
                 <div class="data-field" id="user">
-                    <pre class="label">User:</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
                 <div class="type-state">
                     <div class="data-field" id="type">
-                        <pre class="label">Type:</pre>
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
-                        <pre class="data">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                     <div class="data-field" id="state">
-                        <pre class="label">State:</pre>
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
-                        <pre class="data">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                 </div>
             </div>
@@ -32,16 +32,16 @@
         <div class="solution-data">
             <div class="additional">
                 <div class="description">
-                    <h3 class="area-title">Description of the problem/intended use:</h3>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the problem/intended use:</h3>
-                    <pre class="data" id="description">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
                 </div>
             </div>
         </div>
         <div class="solution-data">
             <div class="additional">
                 <div class="notes">
-                    <h3 class="area-title">Notes:</h3>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
-                    <pre class="data" id="notes">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
                 </div>
             </div>
         </div>
@@ -54,7 +54,11 @@
 
 export default {
     name: "Solution",
-
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
 }
 
 </script>
@@ -72,20 +76,35 @@ export default {
     padding: 1.25rem 1.875rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
     background-color: #2c2c2c;
 }
 
+.section-lightmode {
+    background-color: #fff;
+}
+
+
 
 .solution-name {
     align-self: stretch;
     padding: 1rem 0;
-    color: #fff;
     letter-spacing: 5%;
     text-decoration-line: underline;
     font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
         sans-serif;
 }
 
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
 .data-field {
     display: flex;
     flex-direction: row;
@@ -106,11 +125,18 @@ export default {
 }
 
 .label {
-    color: #fff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
 .data {
     display: flex;
     flex-direction: row;
@@ -118,12 +144,20 @@ export default {
     padding: 0 0.625rem;
     border-radius: 0.3125rem;
     box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-    background-color: #212121;
-    color: #fff;
     letter-spacing: 5%;
     font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
+.data-darkmode {
+  background-color: #212121;
+  color: #fff;
+}
+
+.data-lightmode {
+  background-color: #EBEBEB;
+  color: #000;
+}
+
 .solution-data {
     display: flex;
     flex-direction: row;
@@ -156,11 +190,18 @@ export default {
 }
 
 .area-title {
-    color: #fff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
 .type-state {
     display: flex;
     flex-direction: row;

components/server/SolutionChecklist.vue

@@ -1,18 +1,18 @@
 <template>
-    <div class="data">
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
-        <div class="label">Checklist:</div>
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
         <table class="data-table" id="solution-checkklist">
-            <tr class="table-row" id="table-head">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th class="Step">Step</th>
+                <th :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">Step</th>
-                <th class="Asset">Asset</th>
+                <th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
-                <th class="Task">Task</th>
+                <th :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">Task</th>
-                <th class="Comments">Comments</th>
+                <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
             </tr>
-            <tr class="table-row" id="row-1">
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td class="Step">...</td>
+                <td :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">...</td>
-                <td class="Asset">...</td>
+                <td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
-                <td class="Task">...</td>
+                <td :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">...</td>
-                <td class="Comments">...</td>
+                <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
     </div>
@@ -24,7 +24,12 @@
 
 export default {
     name: "SolutionChecklist",
-
+    name: "AssetTable",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
 }
 
 </script>
@@ -44,9 +49,16 @@ export default {
     gap: 1.25rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
     background-color: #2c2c2c;
 }
 
+.div-lightmode {
+    background-color: #fff;
+}
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;
@@ -61,12 +73,24 @@ export default {
     height: 3.125rem;
     padding: 0.625rem;
     gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
     border-top: 0.0625rem solid #000000;
 }
 
-#table-head {
+.tr-lightmode {
-    border-top: none;
+    border-top: 0.0625rem solid #8e8e8e;
-    border-bottom: 0.0625rem solid #000000;
 }
 
 th,
@@ -74,7 +98,6 @@ td {
     height: 1.875rem;
     text-align: left;
     padding: 0;
-    color: #ffffff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -83,22 +106,52 @@ th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
 
 .Step {
     width: 8%;
+}
+
+.Step-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Step-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .Asset {
     width: 22%;
+}
+
+.Asset-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .Task {
     width: 35%;
+}
+
+.Task-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Task-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .Comments {
     width: 35%;
 }
@@ -112,6 +165,13 @@ th {
   font-size: 1em;
   line-height: 1.875em;
   letter-spacing: 0.05em;
+}
+
+.label-darkmode {
     color: #FFFFFF;
 }
+
+.label-lightmode {
+    color: #000;
+}
 </style>

components/server/SolutionTable.vue

@@ -1,20 +1,20 @@
 <template>
-    <div class="data">
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
-        <div class="label">Last viewed:</div>
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" id="solution-table">
-            <tr class="table-row" id="table-head">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th class="Client">Client</th>
+                <th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
-                <th class="Name">Name</th>
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
-                <th class="Asset">Asset</th>
+                <th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
-                <th class="Type">Type</th>
+                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
-                <th class="User">User</th>
+                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
-            <tr class="table-row" id="row-1">
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td class="Client">...</td>
+                <td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
-                <td class="Name">...</td>
+                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
-                <td class="Asset">...</td>
+                <td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
-                <td class="Type">...</td>
+                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
-                <td class="User">...</td>
+                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
     </div>
@@ -26,7 +26,11 @@
 
 export default {
     name: "SolutionTable",
-
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
 }
 
 </script>
@@ -46,9 +50,16 @@ export default {
     gap: 1.25rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
     background-color: #2c2c2c;
 }
 
+.div-lightmode {
+    background-color: #fff;
+}
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;
@@ -63,12 +74,24 @@ export default {
     height: 3.125rem;
     padding: 0.625rem;
     gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
     border-top: 0.0625rem solid #000000;
 }
 
-#table-head {
+.tr-lightmode {
-    border-top: none;
+    border-top: 0.0625rem solid #8e8e8e;
-    border-bottom: 0.0625rem solid #000000;
 }
 
 th,
@@ -76,35 +99,72 @@ td {
     height: 1.875rem;
     text-align: left;
     padding: 0;
-    color: #ffffff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
 
 .Client {
     width: 33.3%;
+}
+
+.Client-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Client-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .Name {
     width: 33.3%;
+}
+
+.Name-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .Asset {
     width: 12.7%;
+}
+
+.Asset-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .Type {
     width: 12.7%;
+}
+
+.Type-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .User {
     width: 8%;
 }
@@ -118,6 +178,13 @@ th {
   font-size: 1em;
   line-height: 1.875em;
   letter-spacing: 0.05em;
+}
+
+.label-darkmode {
     color: #FFFFFF;
 }
+
+.label-lightmode {
+    color: #000;
+}
 </style>

components/server/SolutionTableNoClient.vue

@@ -1,18 +1,18 @@
 <template>
-    <div class="data">
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
-        <div class="label">Solutions:</div>
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
         <table class="data-table" id="solution-table">
-            <tr class="table-row" id="table-head">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th class="Name">Name</th>
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
-                <th class="Asset">Asset</th>
+                <th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
-                <th class="Type">Type</th>
+                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
-                <th class="User">User</th>
+                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
-            <tr class="table-row" id="row-1">
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td class="Name">...</td>
+                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
-                <td class="Asset">...</td>
+                <td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
-                <td class="Type">...</td>
+                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
-                <td class="User">...</td>
+                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
     </div>
@@ -24,7 +24,11 @@
 
 export default {
     name: "SolutionTableNoClient",
-
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
 }
 
 </script>
@@ -44,9 +48,16 @@ export default {
     gap: 1.25rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
     background-color: #2c2c2c;
 }
 
+.div-lightmode {
+    background-color: #fff;
+}
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;
@@ -61,12 +72,24 @@ export default {
     height: 3.125rem;
     padding: 0.625rem;
     gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
     border-top: 0.0625rem solid #000000;
 }
 
-#table-head {
+.tr-lightmode {
-    border-top: none;
+    border-top: 0.0625rem solid #8e8e8e;
-    border-bottom: 0.0625rem solid #000000;
 }
 
 th,
@@ -74,7 +97,6 @@ td {
     height: 1.875rem;
     text-align: left;
     padding: 0;
-    color: #ffffff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -83,21 +105,52 @@ th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
 .Name {
     width: 45%;
+}
+
+.Name-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .Asset {
     width: 22.5%;
+}
+
+.Asset-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .Type {
     width: 22.5%;
+}
+
+.Type-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.Type-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .User {
     width: 10%;
 }
@@ -111,6 +164,13 @@ th {
   font-size: 1em;
   line-height: 1.875em;
   letter-spacing: 0.05em;
+}
+
+.label-darkmode {
     color: #FFFFFF;
 }
+
+.label-lightmode {
+    color: #000;
+}
 </style>

layouts/PageHeader.vue

@@ -1,12 +1,10 @@
 <template>
-    <header>
+    <header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
-        <img id="header-logo"
+        <img id="header-logo" loading="lazy" src="../tüit-logo.svg.png" />
-            loading="lazy" src="../tüit-logo.svg.png" />
         <div class="profile">
-            <div class="username">username</div>
+            <div :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']">username</div>
-            <div class="picture">
+            <div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
-                <img id="picture"
+                <img id="picture" loading="lazy" src="" />
-                    loading="lazy" src="" />
             </div>
         </div>
     </header>
@@ -17,13 +15,17 @@
 
 export default {
     name: "PageHeader",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
 }
 
 </script>
 
 
 <style scoped>
-
 * {
     box-sizing: border-box;
 }
@@ -39,7 +41,16 @@ export default {
     justify-content: space-between;
     align-items: center;
     padding: 0.625rem 1.25rem;
-        background-color: #2c2c2c;
+}
+
+.header-darkmode {
+    background-color: #212121;
+    border-bottom: 0.125em solid #000;
+}
+
+.header-lightmode {
+    background-color: #EBEBEB;
+    border-bottom: 0.125em solid #8e8e8e61;
 }
 
 #header-logo {
@@ -59,20 +70,35 @@ export default {
     gap: 0.625rem;
     padding: 0 0.625rem;
 }
+
 .username {
     align-self: center;
     margin: auto 0;
-        color: #fff;
     text-align: right;
     font: 200 0.875rem Overpass, sans-serif;
     letter-spacing: 5%;
 }
+
+.username-darkmode {
+    color: #fff;
+}
+
+.username-lightmode {
+    color: #000;
+}
+
 .picture {
     display: flex;
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
+}
+
+.picture-darkmode {
     background-color: #fff;
 }
 
+.picture-lightmode {
+    background-color: #000;
+}
 </style>

layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <PageHeader />
-  <main>
+  <main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
     <Navigationbar />
     <slot />
     <Actionbar />
@@ -19,7 +19,12 @@ export default {
     PageHeader,
     Navigationbar,
     Actionbar,
-    }
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -27,7 +32,6 @@ export default {
   
   
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
@@ -38,9 +42,17 @@ export default {
   width: 100%;
   padding: 0.625rem;
   gap: 0.625rem;
+  height: 100vh;
+  width: 100vw;
+  height: 100%;
+  width: 100%;
+}
+
+.main-darkmode {
   background-color: #212121;
 }
 
-  
+.main-lightmode {
-  
+  background-color: #EBEBEB;
+}
 </style>

layouts/empty.vue

@@ -1,6 +1,6 @@
 <template>
   <PageHeader />
-    <main>
+  <main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
     <slot />
   </main>
 </template>
@@ -13,7 +13,12 @@
   name: "Page",
   components: {
     PageHeader,
-      }
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -21,7 +26,6 @@
     
     
 <style scoped>
-  
 * {
   box-sizing: border-box;
 }
@@ -32,9 +36,17 @@
   flex-direction: row;
   gap: 0.625rem;
   padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
+  height: 100vh;
+  width: 100vw;
+  height: 100%;
+  width: 100%;
+}
+
+.main-darkmode {
   background-color: #212121;
 }
 
-    
+.main-lightmode {
-    
+  background-color: #EBEBEB;
+}
 </style>

pages/assets.vue

@@ -1,7 +1,7 @@
 <template>
   <section id="content">
     <div id="content-header">
-            <h1 id="page-name">Assets</h1>
+      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
     </div>
     <div id="content-body">
       <ClientSearch />
@@ -41,7 +41,12 @@ import NetworkSpecifications from "../components/server/NetworkSpecifications.vu
     HardwareSpecifications,
     SoftwareSpecifications,
     NetworkSpecifications,
-    }
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -49,7 +54,6 @@ import NetworkSpecifications from "../components/server/NetworkSpecifications.vu
     
     
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
@@ -75,14 +79,22 @@ import NetworkSpecifications from "../components/server/NetworkSpecifications.vu
   width: 100%;
   height: 3.125rem;
 }
+
 #page-name {
-    color: #fff;
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
     sans-serif;
   text-decoration: underline;
 }
 
+.h1-darkmode {
+  color: #fff;
+}
+
+.h1-lightmode {
+  color: #000;
+}
+
 #content-body {
   display: flex;
   flex-direction: column;

pages/clients.vue

@@ -1,7 +1,7 @@
 <template>
   <section id="content">
     <div id="content-header">
-            <h1 id="page-name">Clients</h1>
+      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Clients</h1>
     </div>
     <div id="content-body">
       <Client />
@@ -32,7 +32,12 @@
     ClientQuickAccess,
     ClientEmployees,
     ClientEmployee,
-    }
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -40,7 +45,6 @@
     
     
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
@@ -66,12 +70,20 @@
   width: 100%;
   height: 3.125rem;
 }
+
 #page-name {
-    color: #fff;
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
 }
 
+.h1-darkmode {
+  color: #fff;
+}
+
+.h1-lightmode {
+  color: #000;
+}
+
 #content-body {
   display: flex;
   flex-direction: column;
@@ -80,6 +92,4 @@
   margin-bottom: 0.625rem;
   border-radius: 0.625rem;
 }
-
-  
 </style>

pages/home.vue

@@ -2,7 +2,7 @@
   <Navigationbar />
   <section id="content">
     <div id="content-header">
-      <pre id="page-name">Home</pre>
+      <pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Home</pre>
     </div>
     <div id="content-body">
       <Dashboard />
@@ -29,7 +29,12 @@
     Navigationbar,
     Dashboard,
     QuickAccess,
-    }
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -37,7 +42,6 @@
     
     
 <style>
-
 * {
   box-sizing: border-box;
 }
@@ -62,12 +66,20 @@
   width: 100%;
   height: 3.125rem;
 }
+
 #page-name {
-    color: #fff;
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
 }
 
+.pre-darkmode {
+  color: #fff;
+}
+
+.pre-lightmode {
+  color: #000;
+}
+
 #content-body {
   display: flex;
   flex-direction: column;
@@ -76,6 +88,4 @@
   margin-bottom: 0.625rem;
   border-radius: 0.625rem;
 }
-
-  
 </style>

pages/index.vue

@@ -1,10 +1,10 @@
 <template>
   <section id="content">
     <div id="content-header">
-            <h1 id="page-name">Pagename</h1>
+      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Pagename</h1>
     </div>
     <div id="content-body">
-            <section id="stuff"></section>
+      <section :class="[darkMode ? 'stuff-darkmode' : 'stuff-lightmode']" id="stuff"></section>
     </div>
   </section>
 </template>
@@ -20,7 +20,12 @@
 export default {
   name: "Testpage",
   components: {
-    }
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -28,7 +33,6 @@
     
     
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
@@ -46,6 +50,14 @@
   padding: 0 1.25rem;
 }
 
+.h1-darkmode {
+  color: #fff;
+}
+
+.h1-lightmode {
+  color: #000;
+}
+
 #content-header {
   display: flex;
   flex-direction: row;
@@ -54,8 +66,8 @@
   width: 100%;
   height: 3.125rem;
 }
+
 #page-name {
-    color: #fff;
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
     sans-serif;
@@ -77,7 +89,14 @@
   gap: 1.25rem;
   padding: 1.25rem 1.875rem;
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  border-radius: 0.625em;
+}
+
+.stuff-darkmode {
   background-color: #2C2C2C;
 }
 
+.stuff-lightmode {
+  background-color: #fff;
+}
 </style>

pages/login.vue

@@ -1,7 +1,7 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <pre id="page-name"> </pre>
+      <pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name"> </pre>
     </div>
     <div id="content-body">
       <LoginForm />
@@ -23,7 +23,12 @@ export default {
   name: "LoginPage",
   components: {
     LoginForm,
-    }
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -31,7 +36,6 @@ export default {
   
   
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
@@ -57,12 +61,20 @@ export default {
   width: 100%;
   height: 3.125rem;
 }
+
 #page-name {
-    color: #fff;
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
 }
 
+.pre-darkmode {
+  color: #fff;
+}
+
+.pre-lightmode {
+  color: #000;
+}
+
 #content-body {
   display: flex;
   flex-direction: column;
@@ -74,7 +86,4 @@ export default {
   margin-bottom: 0.625rem;
   border-radius: 0.625rem;
 }
-
-  
-  
 </style>

pages/solutions.vue

@@ -1,7 +1,7 @@
 <template>
   <section id="content">
     <div id="content-header">
-            <h1 id="page-name">Solutions</h1>
+      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
     </div>
     <div id="content-body">
       <ClientSearch />
@@ -35,7 +35,12 @@ import SolutionChecklist from "../components/server/SolutionChecklist.vue";
     SolutionTableNoClient,
     Solution,
     SolutionChecklist,
-    }
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -43,7 +48,6 @@ import SolutionChecklist from "../components/server/SolutionChecklist.vue";
     
     
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
@@ -69,14 +73,22 @@ import SolutionChecklist from "../components/server/SolutionChecklist.vue";
   width: 100%;
   height: 3.125rem;
 }
+
 #page-name {
-    color: #fff;
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
     sans-serif;
   text-decoration: underline;
 }
 
+.h1-darkmode {
+  color: #fff;
+}
+
+.h1-lightmode {
+  color: #000;
+}
+
 #content-body {
   display: flex;
   flex-direction: column;