added lightmode option

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>