Fix mobile navigation buttons color

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' });

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;
 		}
 	}
 `;

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'
+									);
 								})();
 							`
 						}}