Update project structure

pages/_app.tsx

@@ -5,10 +5,10 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 
 import Nav from '../components/Nav';
-import DarkMode from '../components/DarkMode';
+import Theme from '../styles/theme';
 import Container from '../components/Container';
 import GlobalStyles from '../components/GlobalStyles';
-import Theme from '../components/Theme';
+import SharedStyles from '../styles/shared';
 import Footer from '../components/Footer';
 
 import NProgress from 'nprogress';
@@ -42,16 +42,16 @@ const App = ({ Component, pageProps }: AppProps) => {
 					rel='stylesheet'
 				/>
 			</Head>
-			<DarkMode>
-				<Theme>
+			<Theme>
+				<SharedStyles>
 					<GlobalStyles />
 					<Container>
 						<Nav />
 						<Component {...pageProps} />
 						<Footer />
 					</Container>
-				</Theme>
-			</DarkMode>
+				</SharedStyles>
+			</Theme>
 		</>
 	);
 };

pages/_document.tsx

@@ -48,8 +48,8 @@ class Doc extends Document {
 					<script
 						dangerouslySetInnerHTML={{
 							__html: `
-								function getInitialTheme() {
-									const persistedColorPreference = window.localStorage.getItem('theme');
+								function getInitialThemeMode() {
+									const persistedColorPreference = window.localStorage.getItem('mode');
 									const hasPersistedPreference = typeof persistedColorPreference === 'string';
 
 									if (hasPersistedPreference) {
@@ -67,29 +67,29 @@ class Doc extends Document {
 								}
 
 								(() => {
-									const theme = getInitialTheme();
+									const mode = getInitialThemeMode();
 									const root = document.documentElement;
 									const lightFavicon = document.querySelector('link#light-favicon');
 									const darkFavicon = document.querySelector('link#dark-favicon');
 
-									root.style.setProperty('--theme', theme);
+									root.style.setProperty('--mode', mode);
 									root.style.setProperty(
 										'--background',
-										theme === 'light' ? '#F9F9F9' : '#262626'
+										mode === 'light' ? '#F9F9F9' : '#262626'
 									);
 									root.style.setProperty(
 										'--secondary-background',
-										theme === 'light' ? 'white' : '#2F2F2F'
+										mode === 'light' ? 'white' : '#2F2F2F'
 									);
 									root.style.setProperty(
 										'--text',
-										theme === 'light' ? 'black' : 'white'
+										mode === 'light' ? 'black' : 'white'
 									);
 									root.style.setProperty(
 										'--text-inverted',
-										theme === 'light' ? 'white' : 'black'
+										mode === 'light' ? 'white' : 'black'
 									);
-									document.head.append(theme === 'light' ? darkFavicon : lightFavicon);
+									document.head.append(mode === 'light' ? darkFavicon : lightFavicon);
 								})();
 							`
 						}}

pages/about.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useContext, useState } from 'react';
-import { DarkModeContext } from '../components/DarkMode';
+import { ThemeContext } from '../styles/theme';
 import { useForm, ValidationError } from '@formspree/react';
 import Head from 'next/head';
 import { Wrapper } from '../styles/about';
@@ -8,7 +8,7 @@ import Input from '../components/Input';
 import MDXButton from '../components/MDXButton';
 
 const About: FC = () => {
-	const { dark } = useContext(DarkModeContext);
+	const { mode } = useContext(ThemeContext);
 	const [form, setForm] = useState<{ name: string; email: string; message: string }>({
 		name: '',
 		email: '',
@@ -53,7 +53,7 @@ const About: FC = () => {
 				/>
 				<title>About | Hazem Krimi</title>
 			</Head>
-			<Wrapper dark={dark}>
+			<Wrapper>
 				<div className='content'>
 					<div>
 						<h1>About Me</h1>