Header home footer dark and light colors

Author: zlrundefined

src/components/home/Banner.vue

@@ -17,7 +17,7 @@
 			<div class="flex justify-center sm:block">
 				<a
 					href="#"
-					class="flex justify-center items-center w-36 sm:w-48 mt-10 mb-6 sm:mb-0 text-lg border border-indigo-200 py-2.5 sm:py-3 shadow-lg rounded-xl bg-indigo-50 hover:bg-indigo-500 hover:text-white"
+					class="flex justify-center items-center w-36 sm:w-48 mt-10 mb-6 sm:mb-0 text-lg border border-indigo-200 dark:border-ternary-dark py-2.5 sm:py-3 shadow-lg rounded-xl bg-indigo-50 hover:bg-indigo-500 text-gray-500 hover:text-white"
 				>
 					<i
 						data-feather="arrow-down-circle"

src/components/project/ProjectsGrid.vue

@@ -2,18 +2,20 @@
 	<!-- Projects start -->
 	<section class="pt-20 sm:pt-28">
 		<div class="text-center">
-			<p class="text-2xl sm:text-5xl font-semibold mb-3 text-gray-600">
+			<p
+				class="text-2xl sm:text-5xl font-semibold mb-3 text-primary-dark dark:text-primary-light"
+			>
 				Projects Portfolio
 			</p>
-			<p class="text-md sm:text-xl text-gray-500">
+			<p class="text-md sm:text-xl text-gray-500 dark:text-ternary-light">
 				Some of the projects I have successfully completed
 			</p>
 		</div>
 
 		<div class="grid grid-cols-1 sm:grid-cols-3 mt-16 sm:gap-10">
 			<router-link
 				to="/projects/single-project"
-				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
+				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
 			>
 				<div>
 					<img
@@ -22,18 +24,21 @@
 						class="rounded-t-3xl border-none"
 					/>
 				</div>
-				<div class="text-center px-4 py-4">
+				<div class="text-center px-4 py-6">
 					<p
-						class="text-2xl text-gray-600 dark:text-primary-light font-semibold mb-3"
+						class="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2"
 					>
 						King Health Platform
 					</p>
-					<span class="text-lg text-gray-500">Wen Application</span>
+					<span
+						class="text-lg text-ternary-dark dark:text-ternary-light"
+						>Wen Application</span
+					>
 				</div>
 			</router-link>
 			<router-link
 				to="/projects/single-project"
-				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
+				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
 			>
 				<div>
 					<img
@@ -42,18 +47,21 @@
 						class="rounded-t-3xl border-none"
 					/>
 				</div>
-				<div class="text-center px-4 py-4">
-					<p class="text-2xl text-gray-600 font-semibold mb-3">
+				<div class="text-center px-4 py-6">
+					<p
+						class="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2"
+					>
 						Pheonix Digital Agenncy
 					</p>
-					<span class="text-lg text-gray-500"
+					<span
+						class="text-lg text-ternary-dark dark:text-ternary-light"
 						>Mobile Application</span
 					>
 				</div>
 			</router-link>
 			<router-link
 				to="/projects/single-project"
-				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
+				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
 			>
 				<div>
 					<img
@@ -62,16 +70,21 @@
 						class="rounded-t-3xl border-none"
 					/>
 				</div>
-				<div class="text-center px-4 py-4">
-					<p class="text-2xl text-gray-600 font-semibold mb-3">
+				<div class="text-center px-4 py-6">
+					<p
+						class="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2"
+					>
 						Project Management UI
 					</p>
-					<span class="text-lg text-gray-500">UI / Frontend</span>
+					<span
+						class="text-lg text-ternary-dark dark:text-ternary-light"
+						>UI / Frontend</span
+					>
 				</div>
 			</router-link>
 			<router-link
 				to="/projects/single-project"
-				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
+				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
 			>
 				<div>
 					<img
@@ -80,16 +93,21 @@
 						class="rounded-t-3xl border-none"
 					/>
 				</div>
-				<div class="text-center px-4 py-4">
-					<p class="text-2xl text-gray-600 font-semibold mb-3">
+				<div class="text-center px-4 py-6">
+					<p
+						class="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2"
+					>
 						Cloud Storage Platform
 					</p>
-					<span class="text-lg text-gray-500">UI / Frontend</span>
+					<span
+						class="text-lg text-ternary-dark dark:text-ternary-light"
+						>UI / Frontend</span
+					>
 				</div>
 			</router-link>
 			<router-link
 				to="/projects/single-project"
-				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
+				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
 			>
 				<div>
 					<img
@@ -98,18 +116,21 @@
 						class="rounded-t-3xl border-none"
 					/>
 				</div>
-				<div class="text-center px-4 py-4">
-					<p class="text-2xl text-gray-600 font-semibold mb-3">
+				<div class="text-center px-4 py-6">
+					<p
+						class="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2"
+					>
 						Kabul Social App
 					</p>
-					<span class="text-lg text-gray-500"
+					<span
+						class="text-lg text-ternary-dark dark:text-ternary-light"
 						>Mobile Application</span
 					>
 				</div>
 			</router-link>
 			<router-link
 				to="/projects/single-project"
-				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0"
+				class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
 			>
 				<div>
 					<img
@@ -118,11 +139,16 @@
 						class="rounded-t-3xl border-none"
 					/>
 				</div>
-				<div class="text-center px-4 py-4">
-					<p class="text-2xl text-gray-600 font-semibold mb-3">
+				<div class="text-center px-4 py-6">
+					<p
+						class="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2"
+					>
 						Apple Design System
 					</p>
-					<span class="text-lg text-gray-500">Web Application</span>
+					<span
+						class="text-lg text-ternary-dark dark:text-ternary-light"
+						>Web Application</span
+					>
 				</div>
 			</router-link>
 		</div>

src/components/shared/Footer.vue

@@ -1,30 +1,32 @@
 <template>
 	<div class="container mx-auto pt-20 sm:pt-40 pb-8">
 		<div class="flex flex-col justify-center items-center mb-12 sm:mb-28">
-			<p class="text-3xl sm:text-4xl font-semibold text-gray-500 mb-5">
+			<p
+				class="text-3xl sm:text-4xl font-semibold text-primary-dark dark:text-primary-light mb-5"
+			>
 				Follow me
 			</p>
 			<ul class="flex gap-4 sm:gap-8">
 				<li
-					class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm∫ p-4"
+					class="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm∫ p-4"
 				>
 					<i data-feather="github" class="w-6 sm:w-8 h-6 sm:h-8"></i>
 				</li>
 				<li
-					class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm∫ p-4"
+					class="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm∫ p-4"
 				>
 					<i data-feather="twitter" class="w-6 sm:w-8 h-6 sm:h-8"></i>
 				</li>
 				<li
-					class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm∫ p-4"
+					class="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm∫ p-4"
 				>
 					<i
 						data-feather="instagram"
 						class="w-6 sm:w-8 h-6 sm:h-8"
 					></i>
 				</li>
 				<li
-					class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm∫ p-4"
+					class="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm∫ p-4"
 				>
 					<i
 						data-feather="dribbble"
@@ -34,12 +36,12 @@
 			</ul>
 		</div>
 		<div class="flex justify-center items-center text-center">
-			<div class="text-lg text-gray-500">
+			<div class="text-lg text-ternary-dark dark:text-ternary-light">
 				&copy; Copyright 2021.
 				<a
 					href="https://stoman.me"
 					target="__blank"
-					class="text-gray-600 font-medium"
+					class="text-secondary-dark dark:text-secondary-light font-medium"
 					>Stoman</a
 				>
 			</div>

src/components/shared/Header.vue

@@ -13,7 +13,7 @@
 				<div class="md:hidden">
 					<button
 						type="button"
-						class="block text-gray-800 hover:text-gray-700 focus:text-gray-700 focus:outline-none"
+						class="block text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light focus:text-gray-700 dark:focus:text-primary-light focus:outline-none"
 					>
 						<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
 							<path
@@ -29,17 +29,17 @@
 				<div class="sm:ml-4 mt-3">
 					<router-link
 						to="/projects"
-						class="text-lg font-medium text-gray-500 md:mx-6 mb-2 sm:py-2"
+						class="text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  md:mx-6 mb-2 sm:py-2"
 						>Projects</router-link
 					>
 					<router-link
 						to="/about"
-						class="text-lg font-medium text-gray-500 md:mx-2 mb-2 sm:py-2"
+						class="text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  md:mx-2 mb-2 sm:py-2"
 						>About Me</router-link
 					>
 					<router-link
 						to="/contact"
-						class="text-lg font-medium text-gray-500 md:mx-2 mb-2 sm:py-2"
+						class="text-lg font-medium text-primary-dark dark:text-ternary-light hover:text-secondary-dark dark:hover:text-secondary-light  md:mx-2 mb-2 sm:py-2"
 						>Contact</router-link
 					>
 				</div>
@@ -53,7 +53,7 @@
 					</button>
 				</div>
 				<div
-					class="ml-8 bg-gray-50 px-3 py-2 shadow-sm rounded-xl cursor-pointer"
+					class="ml-8 bg-primary-light dark:bg-ternary-dark px-3 py-2 shadow-sm rounded-xl cursor-pointer"
 				>
 					<theme-switcher
 						:theme="theme"
@@ -100,6 +100,8 @@ export default {
 
 <style scoped>
 #nav a.router-link-exact-active {
-	@apply text-gray-900;
+	@apply text-indigo-700;
+	@apply dark:text-indigo-400;
+	@apply font-medium;
 }
 </style>