Dark mode changes

Author: zlrundefined

src/assets/css/app.css

@@ -4,59 +4,31 @@
 */
 
 .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;
+	/*
+    ** Light Mode: Background Colors Variables
+    */
+	--bg-background-primary: #f7f8fc;
+	--bg-background-secondary: #ffffff;
+	--bg-background-ternary: #f6f7f8;
+	/*
+    ** Light Mode: Body Text Colors Variables
+    */
+	--text-liText-primary: rgba(107, 114, 128, 1);
+	--text-liText-secondary: rgba(75, 85, 99, 1);
+	--text-liText-ternary: rgba(31, 41, 55, 1);
 }
 
 .theme-dark {
+	/*
+    ** Dark Mode: Background Colors Variables
+    */
 	--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;
+	--bg-background-secondary: #102d44;
+	--bg-background-ternary: #1e3851;
+	/*
+    ** Dark Mode: Body Text Colors Variables
+    */
+	--text-liText-primary: #ffffff;
+	--text-liText-secondary: #f7f8fc;
+	--text-liText-ternary: #f6f7f8;
 }

src/assets/css/tailwind.css

@@ -3,3 +3,33 @@
 @tailwind components;
 
 @tailwind utilities;
+
+.theme-light {
+	/*
+    ** Light Mode: Background Colors Variables
+    */
+	--bg-background-primary: #f7f8fc;
+	--bg-background-secondary: #ffffff;
+	--bg-background-ternary: #f6f7f8;
+	/*
+    ** Light Mode: Body Text Colors Variables
+    */
+	--text-liText-primary: rgba(107, 114, 128, 1);
+	--text-liText-secondary: rgba(75, 85, 99, 1);
+	--text-liText-ternary: rgba(31, 41, 55, 1);
+}
+
+.theme-dark {
+	/*
+    ** Dark Mode: Background Colors Variables
+    */
+	--bg-background-primary: #0d2438;
+	--bg-background-secondary: #102d44;
+	--bg-background-ternary: #1e3851;
+	/*
+    ** Dark Mode: Body Text Colors Variables
+    */
+	--text-liText-primary: #ffffff;
+	--text-liText-secondary: #f7f8fc;
+	--text-liText-ternary: #f6f7f8;
+}

src/components/about/AboutCounter.vue

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

src/components/shared/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="container mx-auto bg-white pt-20 sm:pt-40 pb-8">
+	<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">
 				Follow me

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">
 		<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">

tailwind.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-	purge: { content: ['./public/**/*.html', './src/**/*.vue'] },
-	darkMode: false, // or 'media' or 'class'
+	content: ['./src/**/*.vue', './src/**/*.js', './src/**/*.html'],
+	darkMode: 'class',
 	theme: {
 		extend: {
 			colors: {