Add dark mode configurations

zlrundefined · zlrundefined · commit 629ae731ddb8 · 2021-07-17T12:52:14.000+04:30
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
 		<link rel="icon" href="./favicon.png" />
 		<title><%= htmlWebpackPlugin.options.title %></title>
 	</head>
-	<body>
+	<body id="app-theme" class="app-theme">
 		<noscript>
 			<strong
 				>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't
diff --git a/src/components/ThemeSwitcher.vue b/src/components/ThemeSwitcher.vue
@@ -3,10 +3,9 @@
 		href="#"
 		class="text-copy-primary hover:text-gray-600"
 		@click.prevent="toggleTheme"
-		data-cypress="switchTheme"
 	>
 		<svg
-			v-if="theme === 'theme-light'"
+			v-if="theme === 'theme'"
 			xmlns="http://www.w3.org/2000/svg"
 			width="24"
 			height="24"
@@ -49,10 +48,10 @@ export default {
 	},
 	methods: {
 		toggleTheme() {
-			const newTheme =
-				this.theme === 'theme-light' ? 'theme-dark' : 'theme-light';
+			const newTheme = this.theme === 'light' ? 'dark' : 'light';
 			localStorage.setItem('theme', newTheme);
 			this.$emit('themeChanged', newTheme);
+			this.$router.go();
 		},
 	},
 };
diff --git a/src/components/shared/Header.vue b/src/components/shared/Header.vue
@@ -1,5 +1,5 @@
 <template>
-	<nav id="nav" class="container mx-auto bg-white" :class="theme">
+	<nav id="nav" class="container mx-auto bg-white">
 		<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,7 +52,9 @@
 						Hire Me
 					</button>
 				</div>
-				<div>
+				<div
+					class="ml-8 bg-gray-50 p-3 shadow-sm rounded-xl cursor-pointer"
+				>
 					<theme-switcher
 						:theme="theme"
 						@themeChanged="updateTheme"
@@ -64,8 +66,8 @@
 </template>
 
 <script>
+import ThemeSwitcher from '../ThemeSwitcher';
 import feather from 'feather-icons';
-import ThemeSwitcher from '../ThemeSwitcher.vue';
 
 export default {
 	components: {
@@ -77,15 +79,18 @@ export default {
 			theme: '',
 		};
 	},
-	toggle() {
-		this.isOpen = !this.isOpen;
-	},
-	updateTheme(theme) {
-		this.theme = theme;
+
+	created() {
+		this.theme = localStorage.getItem('theme') || 'light';
 	},
 	mounted() {
 		feather.replace();
-		this.theme = localStorage.getItem('theme') || 'theme-light';
+		this.theme = localStorage.getItem('theme') || 'light';
+	},
+	methods: {
+		updateTheme(theme) {
+			this.theme = theme;
+		},
 	},
 	updated() {
 		feather.replace();
diff --git a/src/main.js b/src/main.js
@@ -10,3 +10,14 @@ feather.replace();
 createApp(App)
 	.use(router)
 	.mount('#app');
+
+const appTheme = localStorage.getItem('theme');
+
+if (
+	appTheme === 'dark' &&
+	document.querySelector('body').classList.contains('app-theme')
+) {
+	document.querySelector('body').classList.add('bg-background-primary-dark');
+} else {
+	document.querySelector('body').classList.add('bg-background-primary-light');
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,7 +2,18 @@ module.exports = {
 	purge: { content: ['./public/**/*.html', './src/**/*.vue'] },
 	darkMode: false, // or 'media' or 'class'
 	theme: {
-		extend: {},
+		extend: {
+			colors: {
+				background: {
+					'primary-light': '#F7F8FC',
+					'secondary-light': '#FFFFFF',
+					'ternary-light': '#f6f7f8',
+					'primary-dark': '#0D2438',
+					'secondary-dark': '#102D44',
+					'ternary-dark': '#1E3851',
+				},
+			},
+		},
 		container: {
 			padding: {
 				DEFAULT: '1rem',
@@ -14,26 +25,7 @@ module.exports = {
 		},
 	},
 	variants: {
-		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)',
-				},
-			},
-		},
+		extend: {},
 	},
 	plugins: [
 		require('@tailwindcss/forms')({
