added lightmode option

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>