From 3fd31bcc43695a3587a5a066cdad8e1579a4c94d Mon Sep 17 00:00:00 2001
From: "selina.mail" <selina.mail@tueit.de>
Date: Wed, 22 Nov 2023 13:41:53 +0100
Subject: [PATCH] added lightmode option

---
 components/ClientSearch.vue                  |  69 +++++----
 components/Dashboard.vue                     | 140 ++++++++++--------
 components/QuickAccess.vue                   | 144 ++++++++++--------
 components/server/Asset.vue                  |  94 +++++++++---
 components/server/AssetTable.vue             | 123 +++++++++++----
 components/server/AssetTableNoClient.vue     |  97 +++++++++---
 components/server/HardwareSpecifications.vue |  66 ++++++---
 components/server/NetworkSpecifications.vue  |  54 +++++--
 components/server/SoftwareSpecifications.vue |  84 +++++++++--
 components/server/Solution.vue               |  85 ++++++++---
 components/server/SolutionChecklist.vue      |  96 +++++++++---
 components/server/SolutionTable.vue          | 107 +++++++++++---
 components/server/SolutionTableNoClient.vue  |  96 +++++++++---
 layouts/PageHeader.vue                       | 136 ++++++++++-------
 layouts/default.vue                          |  54 ++++---
 layouts/empty.vue                            |  78 +++++-----
 pages/assets.vue                             | 148 ++++++++++---------
 pages/clients.vue                            | 140 ++++++++++--------
 pages/home.vue                               | 116 ++++++++-------
 pages/index.vue                              | 147 ++++++++++--------
 pages/login.vue                              | 103 +++++++------
 pages/solutions.vue                          | 140 ++++++++++--------
 22 files changed, 1501 insertions(+), 816 deletions(-)

diff --git a/components/ClientSearch.vue b/components/ClientSearch.vue
index 3d6de46..a39e00c 100644
--- a/components/ClientSearch.vue
+++ b/components/ClientSearch.vue
@@ -1,14 +1,18 @@
 <template>
-  <section class="client-search">
-    <div class="label">Client</div>
-    <pre class="data">...</pre>
+  <section :class="['client-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Client</div>
+    <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,38 +45,34 @@ export default {
   font-size: 0.875em;
   line-height: 1.875;
   letter-spacing: 0.05em;
+}
+
+.label-darkmode {
   color: #FFFFFF;
 }
 
-
-  /* flex: 0;
-  height: 1.875em; */
-  /* min-width: 1.875em;
-  width: fit-content; 
-  overflow: hidden; */
+.label-lightmode {
+  color: #000;
+}
 
 .data {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    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;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0 0.625rem;
+  border-radius: 0.3125rem;
+  box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+  letter-spacing: 5%;
+  font: 400 0.75rem/250% Overpass, sans-serif;
+}
 
-    /* gap: 0.625em;
-    flex: 0; */
-  }
+.pre-darkmode {
+  background-color: #212121;
+  color: #fff;
+}
 
-.input input {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  border: none;
-  background: transparent;
-  color: #FFFFFF;
+.pre-lightmode {
+  background-color: #EBEBEB;
+  color: #000;
 }
 </style>
diff --git a/components/Dashboard.vue b/components/Dashboard.vue
index 78a8995..97a47f8 100644
--- a/components/Dashboard.vue
+++ b/components/Dashboard.vue
@@ -1,11 +1,14 @@
 <template>
-  <section class="dashboard">
-    <h2 class="heading">My tasks</h2>
+  <section :class="['dashboard', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <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 type="button" id="production-orders" value="My Production Orders">
-      <input type="button" id="solutions" value="My Solutions">
-      <input type="button" id="issue-slips" value="My Issue Slips">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits"
+        value="My Maintenance Visits">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders"
+        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,54 +32,71 @@ export default {
   
   
 <style scoped>
-  
-  .dashboard {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    align-self: stretch;
-    width: 100%;
-    padding: 1.875rem 3.125rem 3.125rem;
-    gap: 1.25rem;
-    border-radius: 0.625rem;
-    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-    background-color: #2c2c2c;
-  }
-  
-  .heading {
-    color: #fff;
-    letter-spacing: 5%;
-    text-decoration-line: underline;
-    font: 400 1rem/2rem Overpass, sans-serif;
-  }
-  
-  .shortcuts {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-content: center;
-    padding: 0.625rem 2.5rem;
-    gap: 2.5rem;
-  }
-  
-  input {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: 15rem;
-    height: 4rem;
-    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;
-    background-color: #343434;
-  }
-  
-  
-  
-</style>
\ No newline at end of file
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  align-self: stretch;
+  width: 100%;
+  padding: 1.875rem 3.125rem 3.125rem;
+  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 {
+  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;
+  justify-content: space-between;
+  align-content: center;
+  padding: 0.625rem 2.5rem;
+  gap: 2.5rem;
+}
+
+input {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 15rem;
+  height: 4rem;
+  border-radius: 0.625rem;
+  padding: 0.9375rem 1.25rem;
+  border: none;
+  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;
+}</style>
\ No newline at end of file
diff --git a/components/QuickAccess.vue b/components/QuickAccess.vue
index a902531..1451986 100644
--- a/components/QuickAccess.vue
+++ b/components/QuickAccess.vue
@@ -1,8 +1,8 @@
 <template>
-  <section class="quick-access">
-    <h2 class="heading">Quick Access</h2>
+  <section :class="['quick-access', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <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,60 +29,80 @@ export default {
 
 
 <style scoped>
-  
-  .quick-access {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    align-self: stretch;
-    width: 100%;
-    padding: 1.875rem 3.125rem 3.125rem;
-    gap: 1.25rem;
-    border-radius: 0.625rem;
-    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-    background-color: #2c2c2c;
-  }
-  
-  .heading {
-    color: #fff;
-    letter-spacing: 5%;
-    text-decoration-line: underline;
-    font: 400 1rem/2rem Overpass, sans-serif;
-  }
-  
-  .shortcuts {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-content: center;
-    padding: 0.625rem 2.5rem;
-    gap: 2.5rem;
-  }
-  
-  input {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: 15rem;
-    height: 4rem;
-    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;
-    background-color: #343434;
-  }
-  input#pins {
-    border: 0.0625rem dashed #454545;
-    color: #8e8e8e;
-    font: 400 0.875rem/2rem Overpass, sans-serif;
-    background-color: #34343400;
-  }
-  
-  
-  
+.quick-access {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  align-self: stretch;
+  width: 100%;
+  padding: 1.875rem 3.125rem 3.125rem;
+  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;
+}
+
+.h2-darkmode {
+  color: #fff;
+}
+
+.h2-lightmode {
+  color: #000;
+}
+
+.shortcuts {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-content: center;
+  padding: 0.625rem 2.5rem;
+  gap: 2.5rem;
+}
+
+input {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 15rem;
+  height: 4rem;
+  border-radius: 0.625rem;
+  padding: 0.9375rem 1.25rem;
+  border: none;
+  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>
\ No newline at end of file
diff --git a/components/server/Asset.vue b/components/server/Asset.vue
index 810b2eb..d86ec46 100644
--- a/components/server/Asset.vue
+++ b/components/server/Asset.vue
@@ -1,48 +1,48 @@
 <template>
-    <section class="information">
-        <h2 class="asset-name">Asset name</h2>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <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="data">...</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
                 <div class="data-field" id="location">
-                    <pre class="label">Location:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</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="data">...</pre>
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                     <div class="data-field" id="type">
-                        <pre class="label">Type:</pre>
-                        <pre class="data">...</pre>
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</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="data">...</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</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>
-                    <pre class="data" id="description">...</pre>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
+                    <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>
-                    <pre class="data" id="notes">...</pre>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <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>
\ No newline at end of file
diff --git a/components/server/AssetTable.vue b/components/server/AssetTable.vue
index fca2874..887c0a9 100644
--- a/components/server/AssetTable.vue
+++ b/components/server/AssetTable.vue
@@ -1,20 +1,20 @@
 <template>
-    <div class="data">
-        <div class="label">Last viewed:</div>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <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">
-                <th class="Client">Client</th>
-                <th class="Name">Name</th>
-                <th class="Type">Type</th>
-                <th class="State">State</th>
-                <th class="User">User</th>
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
+                <th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
+                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
-            <tr class="table-row" id="row-1">
-                <td class="Client">...</td>
-                <td class="Name">...</td>
-                <td class="Type">...</td>
-                <td class="State">...</td>
-                <td class="User">...</td>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
+                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
+                <td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</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 {
-    border-top: none;
-    border-bottom: 0.0625rem solid #000000;
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
 }
 
 th,
@@ -76,48 +99,92 @@ 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%;
 }
 
 .label {
-  width: 6.0625em;
-  height: 1.875em;
-  font-family: 'Overpass';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 1em;
-  line-height: 1.875em;
-  letter-spacing: 0.05em;
-  color: #FFFFFF;
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
 }
 </style>
\ No newline at end of file
diff --git a/components/server/AssetTableNoClient.vue b/components/server/AssetTableNoClient.vue
index b06aac1..fc59530 100644
--- a/components/server/AssetTableNoClient.vue
+++ b/components/server/AssetTableNoClient.vue
@@ -1,18 +1,18 @@
 <template>
-    <div class="data">
-        <div class="label">Assets:</div>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <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">
-                <th class="Name">Name</th>
-                <th class="Type">Type</th>
-                <th class="State">State</th>
-                <th class="User">User</th>
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
+                <th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
+                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
-            <tr class="table-row" id="row-1">
-                <td class="Name">...</td>
-                <td class="Type">...</td>
-                <td class="State">...</td>
-                <td class="User">...</td>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td>
+                <td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</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 {
-    border-top: none;
-    border-bottom: 0.0625rem solid #000000;
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
 }
 
 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;
-  color: #FFFFFF;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
 }
 </style>
\ No newline at end of file
diff --git a/components/server/HardwareSpecifications.vue b/components/server/HardwareSpecifications.vue
index 4955401..fd587db 100644
--- a/components/server/HardwareSpecifications.vue
+++ b/components/server/HardwareSpecifications.vue
@@ -1,39 +1,39 @@
 <template>
-    <section class="hardware-information">
-        <div class="label" id="hardware">Hardware specifications:</div>
+    <section :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <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="data">...</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Model:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
                 <div class="data-field" id="CPU">
-                    <pre class="label">CPU:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">CPU:</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="data">...</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Serial number:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
                 <div class="data-field" id="RAM">
-                    <pre class="label">RAM:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">RAM:</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>
-                    <pre class="data" id="storage-configuration">...</pre>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3>
+                    <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>
-                    <pre class="data" id="miscellaneous">...</pre>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3>
+                    <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;
 }
diff --git a/components/server/NetworkSpecifications.vue b/components/server/NetworkSpecifications.vue
index 87691fa..2e6b165 100644
--- a/components/server/NetworkSpecifications.vue
+++ b/components/server/NetworkSpecifications.vue
@@ -1,25 +1,25 @@
 <template>
-    <section class="network-information">
-        <div class="label" id="network">Network specifications:</div>
+    <section :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <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="data">...</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv4:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
                 <div class="data-field" id="MAC">
-                    <pre class="label">MAC:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">MAC:</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="data">...</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv6:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
                 <div class="data-field" id="subnetmask">
-                    <pre class="label">Subnetmask:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Subnetmask:</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;
diff --git a/components/server/SoftwareSpecifications.vue b/components/server/SoftwareSpecifications.vue
index e9156e1..479303f 100644
--- a/components/server/SoftwareSpecifications.vue
+++ b/components/server/SoftwareSpecifications.vue
@@ -1,17 +1,17 @@
 <template>
-    <section class="software-information">
-        <div class="label" id="software">Software specifications:
+    <section :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <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">
-                        <th class="Software">Software</th>
-                        <th class="Version">Version</th>
-                        <th class="License">License</th>
+                    <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                        <th :class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">Software</th>
+                        <th :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">Version</th>
+                        <th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
                     </tr>
-                    <tr class="table-row" id="row-1">
-                        <td class="Software">...</td>
-                        <td class="Version">...</td>
-                        <td class="License">...</td>
+                    <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                        <td :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">...</td>
+                        <td :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Version-darkmode' : 'Version-lightmode']">...</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 {
-    border-top: none;
-    border-bottom: 0.0625rem solid #000000;
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
 }
 
 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%;
 }
diff --git a/components/server/Solution.vue b/components/server/Solution.vue
index e0924ad..f025ee5 100644
--- a/components/server/Solution.vue
+++ b/components/server/Solution.vue
@@ -1,30 +1,30 @@
 <template>
-    <section class="information">
-        <h2 class="solution-name">Solution name</h2>
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <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="data">...</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
                 <div class="data-field" id="asset">
-                    <pre class="label">Asset:</pre>
-                    <pre class="data">...</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</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="data">...</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</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="data">...</pre>
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                     <div class="data-field" id="state">
-                        <pre class="label">State:</pre>
-                        <pre class="data">...</pre>
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</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>
-                    <pre class="data" id="description">...</pre>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the problem/intended use:</h3>
+                    <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>
-                    <pre class="data" id="notes">...</pre>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <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;
diff --git a/components/server/SolutionChecklist.vue b/components/server/SolutionChecklist.vue
index cda8386..24e701f 100644
--- a/components/server/SolutionChecklist.vue
+++ b/components/server/SolutionChecklist.vue
@@ -1,18 +1,18 @@
 <template>
-    <div class="data">
-        <div class="label">Checklist:</div>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
         <table class="data-table" id="solution-checkklist">
-            <tr class="table-row" id="table-head">
-                <th class="Step">Step</th>
-                <th class="Asset">Asset</th>
-                <th class="Task">Task</th>
-                <th class="Comments">Comments</th>
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">Step</th>
+                <th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
+                <th :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">Task</th>
+                <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
             </tr>
-            <tr class="table-row" id="row-1">
-                <td class="Step">...</td>
-                <td class="Asset">...</td>
-                <td class="Task">...</td>
-                <td class="Comments">...</td>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">...</td>
+                <td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
+                <td :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">...</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 {
-    border-top: none;
-    border-bottom: 0.0625rem solid #000000;
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
 }
 
 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;
-  color: #FFFFFF;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
 }
 </style>
\ No newline at end of file
diff --git a/components/server/SolutionTable.vue b/components/server/SolutionTable.vue
index 90f356e..2e153d4 100644
--- a/components/server/SolutionTable.vue
+++ b/components/server/SolutionTable.vue
@@ -1,20 +1,20 @@
 <template>
-    <div class="data">
-        <div class="label">Last viewed:</div>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <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">
-                <th class="Client">Client</th>
-                <th class="Name">Name</th>
-                <th class="Asset">Asset</th>
-                <th class="Type">Type</th>
-                <th class="User">User</th>
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
+                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
+                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
-            <tr class="table-row" id="row-1">
-                <td class="Client">...</td>
-                <td class="Name">...</td>
-                <td class="Asset">...</td>
-                <td class="Type">...</td>
-                <td class="User">...</td>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
+                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
+                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</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 {
-    border-top: none;
-    border-bottom: 0.0625rem solid #000000;
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
 }
 
 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;
-  color: #FFFFFF;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
 }
 </style>
\ No newline at end of file
diff --git a/components/server/SolutionTableNoClient.vue b/components/server/SolutionTableNoClient.vue
index 774f40e..09391c7 100644
--- a/components/server/SolutionTableNoClient.vue
+++ b/components/server/SolutionTableNoClient.vue
@@ -1,18 +1,18 @@
 <template>
-    <div class="data">
-        <div class="label">Solutions:</div>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
         <table class="data-table" id="solution-table">
-            <tr class="table-row" id="table-head">
-                <th class="Name">Name</th>
-                <th class="Asset">Asset</th>
-                <th class="Type">Type</th>
-                <th class="User">User</th>
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
+                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th>
+                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
             </tr>
-            <tr class="table-row" id="row-1">
-                <td class="Name">...</td>
-                <td class="Asset">...</td>
-                <td class="Type">...</td>
-                <td class="User">...</td>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
+                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</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 {
-    border-top: none;
-    border-bottom: 0.0625rem solid #000000;
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
 }
 
 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;
-  color: #FFFFFF;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
 }
 </style>
\ No newline at end of file
diff --git a/layouts/PageHeader.vue b/layouts/PageHeader.vue
index 11f4971..7b6362a 100644
--- a/layouts/PageHeader.vue
+++ b/layouts/PageHeader.vue
@@ -1,12 +1,10 @@
 <template>
-    <header>
-        <img id="header-logo"
-            loading="lazy" src="../tüit-logo.svg.png" />
+    <header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
+        <img id="header-logo" loading="lazy" src="../tüit-logo.svg.png" />
         <div class="profile">
-            <div class="username">username</div>
-            <div class="picture">
-                <img id="picture"
-                    loading="lazy" src="" />
+            <div :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']">username</div>
+            <div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
+                <img id="picture" loading="lazy" src="" />
             </div>
         </div>
     </header>
@@ -17,62 +15,90 @@
 
 export default {
     name: "PageHeader",
+    data() {
+        return {
+            darkMode: true,
+        };
+    },
 }
 
 </script>
 
 
 <style scoped>
+* {
+    box-sizing: border-box;
+}
 
-    * {
-        box-sizing: border-box;
-    }
+header {
+    display: flex;
+    flex-direction: row;
+    position: sticky;
+    top: 0;
+    width: 100%;
+    height: 4.375rem;
+    align-self: stretch;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.625rem 1.25rem;
+}
 
-    header {
-        display: flex;
-        flex-direction: row;
-        position: sticky;
-        top: 0;
-        width: 100%;
-        height: 4.375rem;
-        align-self: stretch;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0.625rem 1.25rem;
-        background-color: #2c2c2c;
-    }
-    
-    #header-logo {
-        object-fit: contain;
-        object-position: center;
-        width: 5rem;
-        height: 2.5rem;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-    }
+.header-darkmode {
+    background-color: #212121;
+    border-bottom: 0.125em solid #000;
+}
 
-    .profile {
-        display: flex;
-        flex-direction: row;
-        align-items: flex-end;
-        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%;
-    }
-    .picture {
-        display: flex;
-        width: 2.5rem;
-        height: 2.5rem;
-        border-radius: 50%;
-        background-color: #fff;
-    }
+.header-lightmode {
+    background-color: #EBEBEB;
+    border-bottom: 0.125em solid #8e8e8e61;
+}
 
+#header-logo {
+    object-fit: contain;
+    object-position: center;
+    width: 5rem;
+    height: 2.5rem;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.profile {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: 0.625rem;
+    padding: 0 0.625rem;
+}
+
+.username {
+    align-self: center;
+    margin: auto 0;
+    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>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 705413a..a60d942 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <PageHeader />
-  <main>
+  <main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
     <Navigationbar />
     <slot />
     <Actionbar />
@@ -14,12 +14,17 @@ import Navigationbar from "./Navigationbar.vue";
 import Actionbar from "./Actionbar.vue";
 
 export default {
-    name: "Page",
-    components: {
-      PageHeader, 
-      Navigationbar,
-      Actionbar,
-    }
+  name: "Page",
+  components: {
+    PageHeader,
+    Navigationbar,
+    Actionbar,
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -27,20 +32,27 @@ export default {
   
   
 <style scoped>
+* {
+  box-sizing: border-box;
+}
 
-  * {
-    box-sizing: border-box;
-  }
+main {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 0.625rem;
+  gap: 0.625rem;
+  height: 100vh;
+  width: 100vw;
+  height: 100%;
+  width: 100%;
+}
 
-  main {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    padding: 0.625rem;
-    gap: 0.625rem;
-    background-color: #212121;
-  }
-  
-  
-  
+.main-darkmode {
+  background-color: #212121;
+}
+
+.main-lightmode {
+  background-color: #EBEBEB;
+}
 </style>
\ No newline at end of file
diff --git a/layouts/empty.vue b/layouts/empty.vue
index 19d5943..35e92ab 100644
--- a/layouts/empty.vue
+++ b/layouts/empty.vue
@@ -1,40 +1,52 @@
 <template>
-    <PageHeader />
-    <main>
-        <slot />
-    </main>
+  <PageHeader />
+  <main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
+    <slot />
+  </main>
 </template>
   
   
-  <script>
-  import PageHeader from "../layouts/PageHeader.vue";
-  
-  export default {
-      name: "Page",
-      components: {
-        PageHeader,
-      }
-  }
-  
-  </script>
+<script>
+import PageHeader from "../layouts/PageHeader.vue";
+
+export default {
+  name: "Page",
+  components: {
+    PageHeader,
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
+}
+
+</script>
     
     
     
-  <style scoped>
-  
-    * {
-      box-sizing: border-box;
-    }
-  
-    
-    main {
-      display: flex;
-      flex-direction: row;
-      gap: 0.625rem;
-      padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
-      background-color: #212121;
-    }
-    
-    
-    
-  </style>
\ No newline at end of file
+<style scoped>
+* {
+  box-sizing: border-box;
+}
+
+
+main {
+  display: flex;
+  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>
\ No newline at end of file
diff --git a/pages/assets.vue b/pages/assets.vue
index e70121a..ea58dc9 100644
--- a/pages/assets.vue
+++ b/pages/assets.vue
@@ -1,25 +1,25 @@
 <template>
-    <section id="content">
-        <div id="content-header">
-            <h1 id="page-name">Assets</h1>
-        </div>
-        <div id="content-body">
-          <ClientSearch />
-          <AssetTable />
-          <AssetTableNoClient />
-          <Asset />
-          <HardwareSpecifications />
-          <SoftwareSpecifications />
-          <NetworkSpecifications />
-        </div>
-    </section>
+  <section id="content">
+    <div id="content-header">
+      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
+    </div>
+    <div id="content-body">
+      <ClientSearch />
+      <AssetTable />
+      <AssetTableNoClient />
+      <Asset />
+      <HardwareSpecifications />
+      <SoftwareSpecifications />
+      <NetworkSpecifications />
+    </div>
+  </section>
 </template>
   
   
 <script setup>
-  definePageMeta({
-    layout: 'default'
-  })
+definePageMeta({
+  layout: 'default'
+})
 </script>
 
 <script>
@@ -31,64 +31,76 @@ import HardwareSpecifications from "../components/server/HardwareSpecifications.
 import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
 import NetworkSpecifications from "../components/server/NetworkSpecifications.vue";
 
-  export default {
-    name: "AssetPage",
-    components: {
-      ClientSearch,
-      AssetTable,
-      AssetTableNoClient,
-      Asset,
-      HardwareSpecifications,
-      SoftwareSpecifications,
-      NetworkSpecifications,
-    }
-  }
+export default {
+  name: "AssetPage",
+  components: {
+    ClientSearch,
+    AssetTable,
+    AssetTableNoClient,
+    Asset,
+    HardwareSpecifications,
+    SoftwareSpecifications,
+    NetworkSpecifications,
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
+}
 
 </script>
     
     
     
 <style scoped>
+* {
+  box-sizing: border-box;
+}
 
-  * {
-    box-sizing: border-box;
-  }
 
-  
-  #content {
-    display: flex;
-    flex-direction: column;
-    float: left;
-    justify-content: stretch;
-    align-items: stretch;
-    width: 100%;
-    flex-grow: 1;
-    gap: 0.625rem;
-    padding: 0 1.25rem;
-  }
-  
-  #content-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    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;
-  }
+#content {
+  display: flex;
+  flex-direction: column;
+  float: left;
+  justify-content: stretch;
+  align-items: stretch;
+  width: 100%;
+  flex-grow: 1;
+  gap: 0.625rem;
+  padding: 0 1.25rem;
+}
 
-  #content-body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 1.25rem;
-    margin-bottom: 0.625rem;
-    border-radius: 0.625rem;
-  }
+#content-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 3.125rem;
+}
+
+#page-name {
+  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;
+  width: 100%;
+  gap: 1.25rem;
+  margin-bottom: 0.625rem;
+  border-radius: 0.625rem;
+}
 </style>
\ No newline at end of file
diff --git a/pages/clients.vue b/pages/clients.vue
index 36937e1..5070e7e 100644
--- a/pages/clients.vue
+++ b/pages/clients.vue
@@ -1,85 +1,95 @@
 <template>
-    <section id="content">
-        <div id="content-header">
-            <h1 id="page-name">Clients</h1>
-        </div>
-        <div id="content-body">
-            <Client />
-            <ClientQuickAccess />
-        </div>
-    </section>
+  <section id="content">
+    <div id="content-header">
+      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Clients</h1>
+    </div>
+    <div id="content-body">
+      <Client />
+      <ClientQuickAccess />
+    </div>
+  </section>
 </template>
   
   
 <script setup>
-  definePageMeta({
-    layout: 'default'
-  })
+definePageMeta({
+  layout: 'default'
+})
 </script>
 
 <script>
-  import ClientTable from "../components/server/ClientTable.vue";
-  import Client from "../components/server/Client.vue";
-  import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
-  import ClientEmployees from "../components/server/ClientEmployees.vue";
-  import ClientEmployee from "../components/server/ClientEmployee.vue";
+import ClientTable from "../components/server/ClientTable.vue";
+import Client from "../components/server/Client.vue";
+import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
+import ClientEmployees from "../components/server/ClientEmployees.vue";
+import ClientEmployee from "../components/server/ClientEmployee.vue";
 
-  export default {
-    name: "ClientsPage",
-    components: {
-      ClientTable,
-      Client,
-      ClientQuickAccess,
-      ClientEmployees,
-      ClientEmployee,
-    }
-  }
+export default {
+  name: "ClientsPage",
+  components: {
+    ClientTable,
+    Client,
+    ClientQuickAccess,
+    ClientEmployees,
+    ClientEmployee,
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
+}
 
 </script>
   
     
     
 <style scoped>
+* {
+  box-sizing: border-box;
+}
 
-  * {
-    box-sizing: border-box;
-  }
 
-  
-  #content {
-    display: flex;
-    flex-direction: column;
-    float: left;
-    justify-content: stretch;
-    align-items: stretch;
-    width: 100%;
-    flex-grow: 1;
-    gap: 0.625rem;
-    padding: 0 1.25rem;
-  }
-  
-  #content-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 3.125rem;
-  }
-  #page-name {
-    color: #fff;
-    letter-spacing: 5%;
-    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
-  }
+#content {
+  display: flex;
+  flex-direction: column;
+  float: left;
+  justify-content: stretch;
+  align-items: stretch;
+  width: 100%;
+  flex-grow: 1;
+  gap: 0.625rem;
+  padding: 0 1.25rem;
+}
 
-  #content-body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 1.25rem;
-    margin-bottom: 0.625rem;
-    border-radius: 0.625rem;
-  }
+#content-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 3.125rem;
+}
 
-  
+#page-name {
+  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;
+  width: 100%;
+  gap: 1.25rem;
+  margin-bottom: 0.625rem;
+  border-radius: 0.625rem;
+}
 </style>
\ No newline at end of file
diff --git a/pages/home.vue b/pages/home.vue
index 145d377..514a6e6 100644
--- a/pages/home.vue
+++ b/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 />
@@ -13,69 +13,79 @@
   
   
 <script setup>
-  definePageMeta({
-    layout: 'empty'
-  })
+definePageMeta({
+  layout: 'empty'
+})
 </script>
 
 <script>
-  import Navigationbar from "../layouts/Navigationbar.vue";
-  import Dashboard from "../components/Dashboard.vue";
-  import QuickAccess from "../components/QuickAccess.vue";
+import Navigationbar from "../layouts/Navigationbar.vue";
+import Dashboard from "../components/Dashboard.vue";
+import QuickAccess from "../components/QuickAccess.vue";
 
-  export default {
-    name: "HomePage",
-    components: {
-      Navigationbar,
-      Dashboard,
-      QuickAccess,
-    }
-  }
+export default {
+  name: "HomePage",
+  components: {
+    Navigationbar,
+    Dashboard,
+    QuickAccess,
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
+}
 
 </script>
     
     
     
 <style>
+* {
+  box-sizing: border-box;
+}
 
-  * {
-    box-sizing: border-box;
-  }
-  
-  #content {
-    display: flex;
-    flex-direction: column;
-    float: left;
-    justify-content: stretch;
-    align-items: stretch;
-    width: 100%;
-    flex-grow: 1;
-    gap: 0.625rem;
-    padding: 0 1.25rem;
-  }
-  
-  #content-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 3.125rem;
-  }
-  #page-name {
-    color: #fff;
-    letter-spacing: 5%;
-    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
-  }
+#content {
+  display: flex;
+  flex-direction: column;
+  float: left;
+  justify-content: stretch;
+  align-items: stretch;
+  width: 100%;
+  flex-grow: 1;
+  gap: 0.625rem;
+  padding: 0 1.25rem;
+}
 
-  #content-body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 1.25rem;
-    margin-bottom: 0.625rem;
-    border-radius: 0.625rem;
-  }
+#content-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 3.125rem;
+}
 
-  
+#page-name {
+  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;
+  width: 100%;
+  gap: 1.25rem;
+  margin-bottom: 0.625rem;
+  border-radius: 0.625rem;
+}
 </style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index f2f33f2..3c4197e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,83 +1,102 @@
 <template>
-    <section id="content">
-        <div id="content-header">
-            <h1 id="page-name">Pagename</h1>
-        </div>
-        <div id="content-body">
-            <section id="stuff"></section>
-        </div>
-    </section>
+  <section id="content">
+    <div id="content-header">
+      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Pagename</h1>
+    </div>
+    <div id="content-body">
+      <section :class="[darkMode ? 'stuff-darkmode' : 'stuff-lightmode']" id="stuff"></section>
+    </div>
+  </section>
 </template>
   
   
 <script setup>
-  definePageMeta({
-    layout: 'default'
-  })
+definePageMeta({
+  layout: 'default'
+})
 </script>
 
 <script>
-  export default {
-    name: "Testpage",
-    components: {
-    }
-  }
+export default {
+  name: "Testpage",
+  components: {
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
+}
 
 </script>
     
     
     
 <style scoped>
+* {
+  box-sizing: border-box;
+}
 
-  * {
-    box-sizing: border-box;
-  }
 
-  
-  #content {
-    display: flex;
-    flex-direction: column;
-    float: left;
-    justify-content: stretch;
-    align-items: stretch;
-    width: 100%;
-    flex-grow: 1;
-    gap: 0.625rem;
-    padding: 0 1.25rem;
-  }
-  
-  #content-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 3.125rem;
-  }
-  #page-name {
-    color: #fff;
-    letter-spacing: 5%;
-    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
-      sans-serif;
-  }
+#content {
+  display: flex;
+  flex-direction: column;
+  float: left;
+  justify-content: stretch;
+  align-items: stretch;
+  width: 100%;
+  flex-grow: 1;
+  gap: 0.625rem;
+  padding: 0 1.25rem;
+}
 
-  #content-body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 1.25rem;
-    margin-bottom: 0.625rem;
-    border-radius: 0.625rem;
-  }
+.h1-darkmode {
+  color: #fff;
+}
 
-  #stuff {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 1.25rem;
-    padding: 1.25rem 1.875rem;
-    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-    background-color: #2C2C2C;
-  }
-  
+.h1-lightmode {
+  color: #000;
+}
+
+#content-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 3.125rem;
+}
+
+#page-name {
+  letter-spacing: 5%;
+  font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
+    sans-serif;
+}
+
+#content-body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 1.25rem;
+  margin-bottom: 0.625rem;
+  border-radius: 0.625rem;
+}
+
+#stuff {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  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>
\ No newline at end of file
diff --git a/pages/login.vue b/pages/login.vue
index beeba8e..6dcb71a 100644
--- a/pages/login.vue
+++ b/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 />
@@ -20,10 +20,15 @@ definePageMeta({
 import LoginForm from "../components/LoginForm.vue";
 
 export default {
-    name: "LoginPage",
-    components: {
-      LoginForm,
-    }
+  name: "LoginPage",
+  components: {
+    LoginForm,
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -31,50 +36,54 @@ export default {
   
   
 <style scoped>
+* {
+  box-sizing: border-box;
+}
 
-  * {
-    box-sizing: border-box;
-  }
 
-  
-  #content {
-    display: flex;
-    flex-direction: column;
-    float: left;
-    justify-content: stretch;
-    align-items: stretch;
-    width: 100%;
-    flex-grow: 1;
-    gap: 0.625rem;
-    padding: 0 1.25rem;
-  }
-  
-  #content-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 3.125rem;
-  }
-  #page-name {
-    color: #fff;
-    letter-spacing: 5%;
-    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
-  }
+#content {
+  display: flex;
+  flex-direction: column;
+  float: left;
+  justify-content: stretch;
+  align-items: stretch;
+  width: 100%;
+  flex-grow: 1;
+  gap: 0.625rem;
+  padding: 0 1.25rem;
+}
 
-  #content-body {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    width: fit-content;
-    height: fit-content;
-    gap: 1.25rem;
-    margin-bottom: 0.625rem;
-    border-radius: 0.625rem;
-  }
+#content-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 3.125rem;
+}
 
-  
-  
+#page-name {
+  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;
+  align-items: center;
+  justify-content: flex-start;
+  width: fit-content;
+  height: fit-content;
+  gap: 1.25rem;
+  margin-bottom: 0.625rem;
+  border-radius: 0.625rem;
+}
 </style>
\ No newline at end of file
diff --git a/pages/solutions.vue b/pages/solutions.vue
index 5931d1e..dfa572b 100644
--- a/pages/solutions.vue
+++ b/pages/solutions.vue
@@ -1,23 +1,23 @@
 <template>
-    <section id="content">
-        <div id="content-header">
-            <h1 id="page-name">Solutions</h1>
-        </div>
-        <div id="content-body">
-          <ClientSearch />
-          <SolutionTable />
-          <SolutionTableNoClient />
-          <Solution />
-          <SolutionChecklist />
-        </div>
-    </section>
+  <section id="content">
+    <div id="content-header">
+      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
+    </div>
+    <div id="content-body">
+      <ClientSearch />
+      <SolutionTable />
+      <SolutionTableNoClient />
+      <Solution />
+      <SolutionChecklist />
+    </div>
+  </section>
 </template>
   
   
 <script setup>
-  definePageMeta({
-    layout: 'default'
-  })
+definePageMeta({
+  layout: 'default'
+})
 </script>
 
 <script>
@@ -27,62 +27,74 @@ import SolutionTableNoClient from "../components/server/SolutionTableNoClient.vu
 import Solution from "../components/server/Solution.vue";
 import SolutionChecklist from "../components/server/SolutionChecklist.vue";
 
-  export default {
-    name: "AssetPage",
-    components: {
-      ClientSearch,
-      SolutionTable,
-      SolutionTableNoClient,
-      Solution,
-      SolutionChecklist,
-    }
-  }
+export default {
+  name: "AssetPage",
+  components: {
+    ClientSearch,
+    SolutionTable,
+    SolutionTableNoClient,
+    Solution,
+    SolutionChecklist,
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
+}
 
 </script>
     
     
     
 <style scoped>
+* {
+  box-sizing: border-box;
+}
 
-  * {
-    box-sizing: border-box;
-  }
 
-  
-  #content {
-    display: flex;
-    flex-direction: column;
-    float: left;
-    justify-content: stretch;
-    align-items: stretch;
-    width: 100%;
-    flex-grow: 1;
-    gap: 0.625rem;
-    padding: 0 1.25rem;
-  }
-  
-  #content-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    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;
-  }
+#content {
+  display: flex;
+  flex-direction: column;
+  float: left;
+  justify-content: stretch;
+  align-items: stretch;
+  width: 100%;
+  flex-grow: 1;
+  gap: 0.625rem;
+  padding: 0 1.25rem;
+}
 
-  #content-body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 1.25rem;
-    margin-bottom: 0.625rem;
-    border-radius: 0.625rem;
-  }
+#content-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 3.125rem;
+}
+
+#page-name {
+  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;
+  width: 100%;
+  gap: 1.25rem;
+  margin-bottom: 0.625rem;
+  border-radius: 0.625rem;
+}
 </style>
\ No newline at end of file
-- 
2.43.0