From 0b49477ee8a5a13b2297a9dfb9155cfb443b923c Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Sun, 5 Sep 2021 18:47:45 +0100
Subject: [PATCH] Fix mobile navigation buttons color

---
 components/DarkMode.tsx  | 2 ++
 components/MobileNav.tsx | 2 +-
 pages/_document.tsx      | 4 ++++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/DarkMode.tsx b/components/DarkMode.tsx
index efa94a0..ce8e40b 100644
--- a/components/DarkMode.tsx
+++ b/components/DarkMode.tsx
@@ -28,11 +28,13 @@ const DarkMode: FC = ({ children }) => {
 			root.style.setProperty('--background', '#F9F9F9');
 			root.style.setProperty('--secondary-background', 'white');
 			root.style.setProperty('--text', 'black');
+			root.style.setProperty('--text-inverted', 'white');
 		} else {
 			window.localStorage.setItem('theme', 'dark');
 			root.style.setProperty('--background', '#262626');
 			root.style.setProperty('--secondary-background', '#2F2F2F');
 			root.style.setProperty('--text', 'white');
+			root.style.setProperty('--text-inverted', 'black');
 		}
 
 		dispatch({ type: 'TOGGLE' });
diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index 62815ef..aaf7d0a 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -45,7 +45,7 @@ const Bar = styled.nav<StyledProps>`
 		margin: 0rem 1rem;
 
 		button {
-			color: var(--text) !important;
+			color: var(--text-inverted) !important;
 		}
 	}
 `;
diff --git a/pages/_document.tsx b/pages/_document.tsx
index c64ef97..d033638 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -81,6 +81,10 @@ class Doc extends Document {
 										'--text',
 										theme === 'light' ? 'black' : 'white'
 									);
+									root.style.setProperty(
+										'--text-inverted',
+										theme === 'light' ? 'white' : 'black'
+									);
 								})();
 							`
 						}}