fix(Styles): Fix Backgrounds and Colors For Support Dark Mode

Author: seyyed-iman-asnafi

src/components/data-table/VTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="border border-2 rounded-2 overflow-hidden position-relative bg-white">
+    <div class="border border-2 rounded-2 overflow-hidden position-relative bg-body">
         <table class="table mb-0">
             <VTableHeader :columns="columns"/>
             <VTableBody
@@ -16,7 +16,7 @@
             :total="items.length"
         />
 
-        <div v-if="isLoading" class="position-absolute top-0 start-0 h-100 w-100 bg-white bg-opacity-50 d-flex">
+        <div v-if="isLoading" class="position-absolute top-0 start-0 h-100 w-100 bg-body bg-opacity-50 d-flex">
             <div v-if="items.length !== 0" class="spinner-border text-secondary m-auto" role="status">
                 <span class="visually-hidden">{{ $t('Loading') }}...</span>
             </div>

src/components/data-table/VTableServer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="border border-2 rounded-2 overflow-hidden position-relative bg-white">
+    <div class="border border-2 rounded-2 overflow-hidden position-relative bg-body">
         <table class="table mb-0">
             <VTableHeader :columns="columns"/>
             <VTableBody
@@ -18,7 +18,7 @@
             :total="itemsLength"
         />
 
-        <div v-if="isLoading" class="position-absolute top-0 start-0 h-100 w-100 bg-white bg-opacity-50 d-flex">
+        <div v-if="isLoading" class="position-absolute top-0 start-0 h-100 w-100 bg-body bg-opacity-50 d-flex">
             <div v-if="items.length !== 0" class="spinner-border text-secondary m-auto" role="status">
                 <span class="visually-hidden">{{ $t('Loading') }}...</span>
             </div>

src/components/layout/VHeader.vue

@@ -1,5 +1,5 @@
 <template>
-    <header class="header d-flex align-items-center bg-primary text-white px-2">
+    <header class="header d-flex align-items-center bg-primary px-2">
         <button
             type="submit"
             class="btn btn-sm text-white"
@@ -9,15 +9,15 @@
 
         <div class="px-2">
             <slot name="start">
-                <div class="h5 mb-0">Eghamat24</div>
+                <div class="h5 text-white mb-0">Eghamat24</div>
             </slot>
         </div>
 
         <div class="ms-auto">
             <slot name="end"></slot>
 
             <button
-                type="submit"
+                type="button"
                 class="btn btn-sm text-white"
                 @click="logout"
             >

src/components/layout/VLayout.vue

@@ -8,7 +8,7 @@
             <VSideMenu />
         </slot>
 
-        <div class="col bg-light p-4">
+        <div class="col bg-body-tertiary p-4">
             <slot>Content</slot>
         </div>
     </main>