Define theme switcher on app vue

Author: zlrundefined

src/App.vue

@@ -1,12 +1,14 @@
 <template>
-	<!-- Header Start -->
-	<Header></Header>
+	<div :class="appTheme">
+		<!-- Header Start -->
+		<Header></Header>
 
-	<!-- Render Active Component Contents Start -->
-	<router-view />
+		<!-- Render Active Component Contents Start -->
+		<router-view />
 
-	<!-- Footer Start -->
-	<Footer></Footer>
+		<!-- Footer Start -->
+		<Footer></Footer>
+	</div>
 </template>
 
 <script>
@@ -19,6 +21,11 @@ export default {
 		Header,
 		Footer,
 	},
+	data: () => {
+		return {
+			appTheme: localStorage.getItem('theme'),
+		};
+	},
 	mounted() {
 		feather.replace();
 	},
@@ -34,6 +41,5 @@ export default {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	text-align: center;
-	color: #2c3e50;
 }
 </style>

src/assets/css/app.css

@@ -5,18 +5,26 @@
 
 .theme-light {
 	/*
-    ** Light Mode: Background Colors Variables
+    ** Light Mode Color Variables
     */
 	--bg-primary: #f7f8fc;
 	--bg-secondary: #ffffff;
 	--bg-ternary: #f6f7f8;
+
+	--text-primary: #f7f8fc;
+	--text-secondary: #ffffff;
+	--text-ternary: #f6f7f8;
 }
 
 .theme-dark {
 	/*
-    ** Dark Mode: Background Colors Variables
+    ** Dark Mode Color Variables
     */
 	--bg-primary: #0d2438;
 	--bg-secondary: #102d44;
 	--bg-ternary: #1e3851;
+
+	--text-primary: #0d2438;
+	--text-secondary: #102d44;
+	--text-ternary: #1e3851;
 }

src/assets/css/tailwind.css

@@ -3,21 +3,3 @@
 @tailwind components;
 
 @tailwind utilities;
-
-.theme-light {
-	/*
-    ** Light Mode: Background Colors Variables
-    */
-	--bg-primary: #f7f8fc;
-	--bg-secondary: #ffffff;
-	--bg-ternary: #f6f7f8;
-}
-
-.theme-dark {
-	/*
-    ** Dark Mode: Background Colors Variables
-    */
-	--bg-primary: #0d2438;
-	--bg-secondary: #102d44;
-	--bg-ternary: #1e3851;
-}

src/components/home/Banner.vue

@@ -5,7 +5,7 @@
 	>
 		<div class="w-full sm:w-1/3 text-left">
 			<h1
-				class="text-3xl sm:text-5xl text-center sm:text-left font-semibold text-gray-700 uppercase"
+				class="text-3xl sm:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase"
 			>
 				Hi, Iam Stoman
 			</h1>

src/components/project/ProjectsGrid.vue

@@ -23,7 +23,9 @@
 					/>
 				</div>
 				<div class="text-center px-4 py-4">
-					<p class="text-2xl text-gray-600 font-semibold mb-3">
+					<p
+						class="text-2xl text-gray-600 dark:text-primary-light font-semibold mb-3"
+					>
 						King Health Platform
 					</p>
 					<span class="text-lg text-gray-500">Wen Application</span>

src/components/shared/Header.vue

@@ -53,7 +53,7 @@
 					</button>
 				</div>
 				<div
-					class="ml-8 bg-gray-50 p-3 shadow-sm rounded-xl cursor-pointer"
+					class="ml-8 bg-gray-50 px-3 py-2 shadow-sm rounded-xl cursor-pointer"
 				>
 					<theme-switcher
 						:theme="theme"

tailwind.config.js

@@ -1,35 +1,35 @@
+const colors = require('tailwindcss/colors');
+
 module.exports = {
-	purge: {
-		content: ['./src/**/*.vue', './src/**/*.js', './src/**/*.html'],
-	},
+	// purge: [
+	// 	'./storage/framework/views/*.php',
+	// 	'./resources/views/**/*.blade.php',
+	// ],
 	darkMode: 'class',
 	theme: {
 		extend: {
 			colors: {
 				'primary-light': '#F7F8FC',
 				'secondary-light': '#FFFFFF',
 				'ternary-light': '#f6f7f8',
+
 				'primary-dark': '#0D2438',
 				'secondary-dark': '#102D44',
 				'ternary-dark': '#1E3851',
 			},
-		},
-		container: {
-			padding: {
-				DEFAULT: '1rem',
-				sm: '2rem',
-				lg: '4rem',
-				xl: '5rem',
-				'2xl': '6rem',
+			container: {
+				padding: {
+					DEFAULT: '1rem',
+					sm: '2rem',
+					lg: '5rem',
+					xl: '6rem',
+					'2xl': '8rem',
+				},
 			},
 		},
 	},
 	variants: {
-		extend: {},
+		extend: { opacity: ['disabled'] },
 	},
-	plugins: [
-		require('@tailwindcss/forms')({
-			strategy: 'class',
-		}),
-	],
+	plugins: [require('@tailwindcss/forms')],
 };