Tailwind config changes for colors variables

Author: zlrundefined

src/components/about/AboutCounter.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="mt-10 sm:mt-20 bg-red-100 dark:bg-red-500 shadow-sm">
+	<div class="mt-10 sm:mt-20 bg-primary-light dark:bg-primary-dark shadow-sm">
 		<div
 			class="container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
 		>

src/main.js

@@ -17,7 +17,7 @@ if (
 	appTheme === 'dark' &&
 	document.querySelector('body').classList.contains('app-theme')
 ) {
-	document.querySelector('body').classList.add('bg-background-primary-dark');
+	document.querySelector('body').classList.add('bg-primary-dark');
 } else {
-	document.querySelector('body').classList.add('bg-background-primary-light');
+	document.querySelector('body').classList.add('bg-primary-light');
 }

tailwind.config.js

@@ -4,14 +4,12 @@ module.exports = {
 	theme: {
 		extend: {
 			colors: {
-				background: {
-					'primary-light': '#F7F8FC',
-					'secondary-light': '#FFFFFF',
-					'ternary-light': '#f6f7f8',
-					'primary-dark': '#0D2438',
-					'secondary-dark': '#102D44',
-					'ternary-dark': '#1E3851',
-				},
+				'primary-light': '#F7F8FC',
+				'secondary-light': '#FFFFFF',
+				'ternary-light': '#f6f7f8',
+				'primary-dark': '#0D2438',
+				'secondary-dark': '#102D44',
+				'ternary-dark': '#1E3851',
 			},
 		},
 		container: {