Add theme switcher and colors

Author: zlrundefined

src/assets/css/app.css

@@ -2,3 +2,61 @@
  * Vuejs & TailwindCSS Portfolio Main Styling CSS File
  * Powered by: @NangialaiStoman
 */
+
+.theme-light {
+	--bg-background-primary: white;
+	--bg-background-secondary: #f7fafc;
+	--bg-background-tertiary: #e2e8f0;
+
+	--bg-background-form: white;
+
+	--text-copy-primary: #2d3748;
+	--text-copy-secondary: #4a5568;
+
+	--border-border-color-primary: white;
+}
+
+.theme-light .search-highlighted {
+	background: #f0fff4;
+}
+
+.theme-light .search-hover:hover {
+	background: #f0fff4;
+}
+
+.theme-dark .markdown-body {
+	color: #24292e;
+}
+
+.theme-dark .search-highlighted {
+	background: #2d3748;
+}
+
+.theme-dark .search-hover:hover {
+	background: #2d3748;
+}
+
+.theme-dark {
+	--bg-background-primary: #0d2438;
+	--bg-background-secondary: #102c44;
+	--bg-background-tertiary: #1e3951;
+
+	--bg-background-form: #1a202c;
+
+	--text-copy-primary: #cbd5e0;
+	--text-copy-secondary: #e2e8f0;
+
+	--border-border-color-primary: #1a202c;
+}
+
+.theme-dark .markdown-body {
+	color: #cbd5e0;
+}
+
+.theme-dark nav .active {
+	@apply border-white border-b;
+}
+
+.content-wrapper {
+	transition: background-color 0.25s;
+}

src/components/ThemeSwitcher.vue

@@ -0,0 +1,59 @@
+<template>
+	<a
+		href="#"
+		class="text-copy-primary hover:text-gray-600"
+		@click.prevent="toggleTheme"
+		data-cypress="switchTheme"
+	>
+		<svg
+			v-if="theme === 'theme-light'"
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="feather feather-moon"
+		>
+			<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+		</svg>
+		<svg
+			v-else
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="feather feather-sun"
+		>
+			<circle cx="12" cy="12" r="5" />
+			<path
+				d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
+			/>
+		</svg>
+	</a>
+</template>
+
+<script>
+export default {
+	props: {
+		theme: {
+			type: String,
+			required: true,
+		},
+	},
+	methods: {
+		toggleTheme() {
+			const newTheme =
+				this.theme === 'theme-light' ? 'theme-dark' : 'theme-light';
+			localStorage.setItem('theme', newTheme);
+			this.$emit('themeChanged', newTheme);
+		},
+	},
+};
+</script>

src/components/shared/Header.vue

@@ -1,5 +1,5 @@
 <template>
-	<nav id="nav" class="container mx-auto bg-white">
+	<nav id="nav" class="container mx-auto bg-white" :class="theme">
 		<div class="md:flex items-center justify-between my-6">
 			<div class="flex justify-between items-center">
 				<div class="text-2xl font-bold text-gray-800 md:text-3xl">
@@ -52,15 +52,11 @@
 						Hire Me
 					</button>
 				</div>
-				<div
-					class=" sm:ml-7 bg-gray-50 p-2 rounded-lg shadow-sm cursor-pointer"
-				>
-					<a href="#"
-						><i
-							data-feather="moon"
-							class="text-gray-500 hover:text-gray-400"
-						></i
-					></a>
+				<div>
+					<theme-switcher
+						:theme="theme"
+						@themeChanged="updateTheme"
+					/>
 				</div>
 			</div>
 		</div>
@@ -69,9 +65,27 @@
 
 <script>
 import feather from 'feather-icons';
+import ThemeSwitcher from '../ThemeSwitcher.vue';
+
 export default {
+	components: {
+		ThemeSwitcher,
+	},
+	data() {
+		return {
+			isOpen: false,
+			theme: '',
+		};
+	},
+	toggle() {
+		this.isOpen = !this.isOpen;
+	},
+	updateTheme(theme) {
+		this.theme = theme;
+	},
 	mounted() {
 		feather.replace();
+		this.theme = localStorage.getItem('theme') || 'theme-light';
 	},
 	updated() {
 		feather.replace();

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 import './assets/css/tailwind.css';
+import './assets/css/app.css';
 
 const feather = require('feather-icons');
 feather.replace();

tailwind.config.js

@@ -14,7 +14,26 @@ module.exports = {
 		},
 	},
 	variants: {
-		extend: {},
+		extend: {
+			colors: {
+				background: {
+					primary: 'var(--bg-background-primary)',
+					secondary: 'var(--bg-background-secondary)',
+					tertiary: 'var(--bg-background-tertiary)',
+
+					form: 'var(--bg-background-form)',
+				},
+
+				copy: {
+					primary: 'var(--text-copy-primary)',
+					secondary: 'var(--text-copy-hover)',
+				},
+
+				'border-color': {
+					primary: 'var(--border-border-color-primary)',
+				},
+			},
+		},
 	},
 	plugins: [
 		require('@tailwindcss/forms')({