dark mode improvements

resources/js/components/Admin/AppInputSwitch.vue

@@ -3,7 +3,7 @@
 
 		<!--Label for input-->
 		<div class="leading-5">
-			<label class="text-sm font-bold text-gray-700 mb-1.5 block">
+			<label class="text-sm font-bold dark:text-gray-400 text-gray-700 mb-1.5 block">
 				{{ title }}:
 			</label>
 

resources/js/components/Admin/AppInputText.vue

@@ -2,7 +2,7 @@
 	<div :class="{'mb-7': !isLast}">
 
 		<!--Label for input-->
-		<label v-if="title" class="text-sm font-bold text-gray-700 mb-1.5 block">
+		<label v-if="title" class="text-sm font-bold dark:text-gray-400 text-gray-700 mb-1.5 block">
 			{{ title }}:
 		</label>
 
@@ -10,7 +10,7 @@
 		<slot></slot>
 
 		<!--Input Description-->
-		<small v-if="description" class="text-xs text-gray-500 leading-4 block" v-html="description"></small>
+		<small v-if="description" class="text-xs text-gray-500 pt-2 leading-4 block" v-html="description"></small>
 
 		<!--Input Description-->
 		<span v-if="error" class="text-red-700 pt-2 text-xs">

resources/js/components/Admin/CardNavigation.vue

@@ -2,7 +2,7 @@
 	<div class="whitespace-nowrap overflow-x-auto">
 		<router-link
 			class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme"
-			:class="{'text-theme': routeName === page.route, 'text-gray-600': routeName !== page.route}"
+			:class="{'text-theme': routeName === page.route, 'dark:text-gray-400 text-gray-600': routeName !== page.route}"
 			v-for="(page, i) in pages"
 			:to="{name: page.route}"
 			:key="i"

resources/js/components/Admin/ProgressLine.vue

@@ -115,4 +115,32 @@
             }
         }
     }
+
+
+	.dark {
+
+		.chart {
+			background: #282A2F !important;
+		}
+
+		.chart-wrapper {
+
+			&:nth-child(1) {
+				.chart-progress {
+					border-color: #151515 !important;
+				}
+			}
+
+			.chart-progress {
+					border-color: #151515 !important;
+			}
+		}
+
+		.chart-progress {
+			&.secondary {
+				background: #282A2F !important;
+				box-shadow: 0 3px 10px rgba(#282A2F, 0.5) !important;
+			}
+		}
+	}
 </style>

resources/js/components/Others/Tables/DatatableWrapper.vue

@@ -11,14 +11,14 @@
 						:class="{ 'sortable': column.sortable, 'text-right': (Object.values(columns).length - 1) === index }"
 						v-if="! column.hidden"
 					>
-						<span class="text-gray-400 dark-text-theme text-xs">
+						<span class="dark:text-gray-500 text-gray-400 text-xs">
 							{{ column.label }}
 						</span>
 
 						<chevron-up-icon
 							v-if="column.sortable"
 							:class="{ 'arrow-down': filter.sort === 'ASC' }"
-							class="inline-block vue-feather text-gray-300"
+							class="inline-block vue-feather dark:text-gray-500 text-gray-300"
 							size="12"
 						/>
 					</th>
@@ -120,7 +120,9 @@
                 </li>
             </ul>
 
-            <span class="paginator-info">Showing {{ data.meta.from }} - {{ data.meta.to }} from {{ data.meta.total }} records</span>
+            <span class="mt-10 flex items-center justify-between text-xs text-gray-600">
+				Showing {{ data.meta.from }} - {{ data.meta.to }} from {{ data.meta.total }} records
+			</span>
         </div>
     </div>
 </template>
@@ -273,16 +275,4 @@ export default {
 		}
 	}
 }
-
-.paginator-wrapper {
-	margin-top: 30px;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	.paginator-info {
-		font-size: 13px;
-		color: $text-muted;
-	}
-}
 </style>

resources/js/components/Sidebar/ContentSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <section class="content-sidebar flex-none xl:w-56 w-52 lg:block hidden overflow-y-auto pt-6 select-none" id="content-sidebar">
+    <section class="content-sidebar flex-none xl:w-56 w-52 lg:block hidden overflow-y-auto pt-6 select-none dark:bg-dark-background bg-light-background" id="content-sidebar">
         <slot></slot>
     </section>
 </template>
@@ -9,16 +9,3 @@
         name: 'ContentSidebar',
     }
 </script>
-
-<style scoped lang="scss">
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-    .content-sidebar {
-        background: rgb(249, 249, 250);
-    }
-
-    .dark .content-sidebar {
-		background: rgba($dark_mode_foreground, 0.2);
-    }
-</style>

resources/js/components/Sidebar/SidebarNavigation.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav class="menu-bar flex-none xl:w-20 w-16 lg:grid hidden">
+    <nav class="menu-bar dark:bg-dark-foreground bg-light-background flex-none xl:w-20 w-16 lg:grid hidden">
         <div class="icon-navigation menu" v-if="user">
 
             <router-link :to="{name: 'Profile'}" class="icon-navigation-item user">
@@ -101,7 +101,6 @@
 	}
 
     .menu-bar {
-        background: $light_background;
         user-select: none;
         padding-top: 25px;
     }
@@ -215,10 +214,6 @@
                 }
             }
         }
-
-        .menu-bar {
-            background: #1d1d1d;
-        }
     }
 
 </style>