Update project structure

components/Button/index.tsx

@@ -1,5 +1,5 @@
 import { FC, useContext } from 'react';
-import { DarkModeContext } from '../../components/DarkMode';
+import { ThemeContext } from '../../styles/theme';
 import { Props } from './types';
 import { Btn } from './styles';
 import Link from 'next/link';
@@ -12,18 +12,9 @@ const Button: FC<Props & { className?: string }> = ({
 	children,
 	className
 }) => {
-	const { dark } = useContext(DarkModeContext);
-
 	return (
 		<Link href={href} passHref>
-			<Btn
+			<Btn as='a' target={target} variant={variant} onClick={onClick} className={className}>
-				as='a'
-				target={target}
-				variant={variant}
-				dark={dark}
-				onClick={onClick}
-				className={className}
-			>
 				{children}
 			</Btn>
 		</Link>

components/Button/types.ts

@@ -3,5 +3,4 @@ export type Props = {
 	href: string;
 	target?: HTMLAnchorElement['target'];
 	onClick?: () => void;
-	dark?: boolean;
 };

components/Card/index.tsx

@@ -1,5 +1,4 @@
-import { FC, useContext } from 'react';
+import { FC } from 'react';
-import { DarkModeContext } from '../../components/DarkMode';
 import { StyledCard } from './styles';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -15,11 +14,9 @@ interface Props {
 }
 
 const Card: FC<Props> = ({ title, description, image, tags, href, target, onClick }) => {
-	const { dark } = useContext(DarkModeContext);
-
 	return (
 		<Link href={href} passHref>
-			<StyledCard as='a' target={target} dark={dark} onClick={onClick} image={!!image}>
+			<StyledCard as='a' target={target} onClick={onClick} image={!!image}>
 				<div>
 					<h3>{title}</h3>
 					<p>{description}</p>

components/Card/styles.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
+export const StyledCard = styled.div<{ image: boolean }>`
 	cursor: pointer;
 	width: 100%;
 	display: grid;

components/Footer/index.tsx

@@ -1,44 +1,44 @@
 import { FC, useContext } from 'react';
-import { DarkModeContext } from '../../components/DarkMode';
+import { ThemeContext } from '../../styles/theme';
 import { StyledFooter } from './styles';
 import IconButton from '../../components/IconButton';
 
 const Footer: FC = () => {
-	const { dark } = useContext(DarkModeContext);
+	const { mode } = useContext(ThemeContext);
 
 	return (
 		<StyledFooter>
 			<div className='contact'>
 				<IconButton
-					icon={dark ? '/icons/light-github.svg' : '/icons/dark-github.svg'}
+					icon={mode === 'dark' ? '/icons/light-github.svg' : '/icons/dark-github.svg'}
 					width={16}
 					height={16}
 					href='https://github.com/hazemKrimi'
 					target='_blank'
 				/>
 				<IconButton
-					icon={dark ? '/icons/light-twitter.svg' : '/icons/dark-twitter.svg'}
+					icon={mode === 'dark' ? '/icons/light-twitter.svg' : '/icons/dark-twitter.svg'}
 					width={16}
 					height={16}
 					href='https://twitter.com/HazemKrimi'
 					target='_blank'
 				/>
 				<IconButton
-					icon={dark ? '/icons/light-linkedin.svg' : '/icons/dark-linkedin.svg'}
+					icon={mode === 'dark' ? '/icons/light-linkedin.svg' : '/icons/dark-linkedin.svg'}
 					width={16}
 					height={16}
 					href='https://linkedin.com/in/hazemkrimi'
 					target='_blank'
 				/>
 				<IconButton
-					icon={dark ? '/icons/light-codepen.svg' : '/icons/dark-codepen.svg'}
+					icon={mode === 'dark' ? '/icons/light-codepen.svg' : '/icons/dark-codepen.svg'}
 					width={16}
 					height={16}
 					href='https://codepen.io/hazemkrimi'
 					target='_blank'
 				/>
 				<IconButton
-					icon={dark ? '/icons/light-dribbble.svg' : '/icons/dark-dribbble.svg'}
+					icon={mode === 'dark' ? '/icons/light-dribbble.svg' : '/icons/dark-dribbble.svg'}
 					width={16}
 					height={16}
 					href='https://dribbble.com/HazemKrimi'

components/GlobalStyles.tsx

@@ -1,11 +1,6 @@
-import { FC, useContext } from 'react';
 import { createGlobalStyle } from 'styled-components';
-import { DarkModeContext } from '../components/DarkMode';
-interface Props {
-	dark: boolean;
-}
 
-const Global = createGlobalStyle<Props>`
+const GlobalStyles = createGlobalStyle`
   * {
     margin: 0;
     padding: 0;
@@ -71,10 +66,4 @@ const Global = createGlobalStyle<Props>`
 	}
 `;
 
-const GlobalStyles: FC = () => {
-	const { dark } = useContext(DarkModeContext);
-
-	return <Global dark={dark} />;
-};
-
 export default GlobalStyles;

components/Hero/index.tsx

@@ -1,10 +1,10 @@
 import { FC, useContext } from 'react';
-import { DarkModeContext } from '../../components/DarkMode';
+import { ThemeContext } from '../../styles/theme';
 import { Wrapper } from './styles';
 import Image from 'next/image';
 
 const Hero: FC = () => {
-	const { dark } = useContext(DarkModeContext);
+	const { mode } = useContext(ThemeContext);
 
 	return (
 		<Wrapper>
@@ -16,7 +16,7 @@ const Hero: FC = () => {
 			</div>
 			<div className='illustration'>
 				<Image
-					src={dark ? '/dark-illustration.svg' : '/light-illustration.svg'}
+					src={mode === 'dark' ? '/dark-illustration.svg' : '/light-illustration.svg'}
 					width='100%'
 					height='100%'
 					layout='responsive'

components/Input.tsx

@@ -1,5 +1,4 @@
-import React, { FC, useContext } from 'react';
+import React, { FC } from 'react';
-import { DarkModeContext } from '../components/DarkMode';
 import styled from 'styled-components';
 
 interface Props {
@@ -12,14 +11,14 @@ interface Props {
 	onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 }
 
-const SmallField = styled.input<{ dark: boolean }>`
+const SmallField = styled.input`
 	border: none;
 	padding: 1rem;
 	background: var(--secondary-background);
 	color: var(--text);
 `;
 
-const BigField = styled.textarea<{ dark: boolean }>`
+const BigField = styled.textarea`
 	resize: none;
 	border: none;
 	padding: 1rem;
@@ -37,11 +36,8 @@ const Input: FC<Props & { className?: string }> = ({
 	className,
 	onChange
 }) => {
-	const { dark } = useContext(DarkModeContext);
-
 	return variant === 'small' ? (
 		<SmallField
-			dark={dark}
 			type={type}
 			name={name}
 			value={value}
@@ -52,7 +48,6 @@ const Input: FC<Props & { className?: string }> = ({
 		/>
 	) : (
 		<BigField
-			dark={dark}
 			name={name}
 			value={value}
 			required={required}

components/MDXButton/index.tsx

@@ -1,5 +1,5 @@
 import { FC, useContext } from 'react';
-import { DarkModeContext } from '../../components/DarkMode';
+import { ThemeContext } from '../../styles/theme';
 import { Props } from './types';
 import { Btn } from './styles';
 import Link from 'next/link';
@@ -13,7 +13,7 @@ const MDXButton: FC<Props & { className?: string }> = ({
 	disabled,
 	className
 }) => {
-	const { dark } = useContext(DarkModeContext);
+	const { mode } = useContext(ThemeContext);
 
 	return link ? (
 		<Link href={link} passHref>
@@ -22,7 +22,7 @@ const MDXButton: FC<Props & { className?: string }> = ({
 				target={target}
 				variant={variant}
 				type={type}
-				dark={dark}
+				mode={mode}
 				disabled={disabled}
 				className={className}
 			>
@@ -30,7 +30,7 @@ const MDXButton: FC<Props & { className?: string }> = ({
 			</Btn>
 		</Link>
 	) : (
-		<Btn variant={variant} type={type} dark={dark} disabled={disabled} className={className}>
+		<Btn variant={variant} type={type} mode={mode} disabled={disabled} className={className}>
 			{children}
 		</Btn>
 	);

components/MDXButton/styles.tsx

@@ -7,10 +7,11 @@ export const Btn = styled.button<Props>`
 		['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};
 	width: ${({ variant }) => (['action', 'outline'].includes(variant as string) ? '100%' : 'auto')};
 	/* TODO: fix theme blue color problem */
-	background: ${({ variant, theme }) => (variant === 'action' ? '#1573CA' : 'none')};
+	background: ${({ variant }) => (variant === 'action' ? '#1573CA' : 'none')};
-	color: ${({ variant, dark }) => (variant === 'action' ? 'white' : dark ? 'white' : 'black')};
+	color: ${({ variant, mode }) =>
-	border: ${({ variant, dark }) =>
+		variant === 'action' ? 'white' : mode === 'dark' ? 'white' : 'black'};
-		variant === 'outline' ? `2px solid ${dark ? 'white' : 'black'}` : 'none'};
+	border: ${({ variant, mode }) =>
+		variant === 'outline' ? `2px solid ${mode === 'dark' ? 'white' : 'black'}` : 'none'};
 	font-weight: bold;
 	font-size: ${({ variant }) =>
 		['action', 'outline'].includes(variant as string) ? '1.05rem' : 'inherit'};

components/MDXButton/types.ts

@@ -3,6 +3,6 @@ export type Props = {
 	type?: 'button' | 'submit';
 	link?: string;
 	target?: HTMLAnchorElement['target'];
-	dark?: boolean;
+	mode?: string;
 	disabled?: boolean;
 };

components/MobileNav/index.tsx

@@ -1,12 +1,12 @@
 import { FC, useContext, useRef, useEffect } from 'react';
-import { DarkModeContext } from '../DarkMode';
+import { ThemeContext } from '../../styles/theme';
 import { Props } from './types';
 import { Bar } from './styles';
 import IconButton from '../IconButton';
 import Button from '../Button';
 
 const MobileNav: FC<Props> = ({ open, close }) => {
-	const { dark, toggle } = useContext(DarkModeContext);
+	const { mode, toggle } = useContext(ThemeContext);
 	const ref = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
@@ -29,16 +29,16 @@ const MobileNav: FC<Props> = ({ open, close }) => {
 	});
 
 	return (
-		<Bar dark={dark} open={open} ref={ref}>
+		<Bar open={open} ref={ref}>
 			<div className='close'>
 				<IconButton
-					icon={dark ? '/icons/dark-close.svg' : '/icons/light-close.svg'}
+					icon={mode === 'dark' ? '/icons/dark-close.svg' : '/icons/light-close.svg'}
 					onClick={close}
 				/>
 			</div>
 			<div className='mobile-button-wrapper'>
 				<Button href='#' onClick={() => toggle()}>
-					{dark ? 'Light Mode' : 'Dark Mode'}
+					{mode === 'dark' ? 'Light Mode' : 'Dark Mode'}
 				</Button>
 			</div>
 			<div className='mobile-button-wrapper'>

components/MobileNav/types.ts

@@ -4,6 +4,5 @@ export type Props = {
 };
 
 export type StyledProps = {
-	dark: boolean;
 	open: boolean;
 };

components/Nav/index.tsx

@@ -1,5 +1,5 @@
 import { FC, useContext, useState } from 'react';
-import { DarkModeContext } from '../DarkMode';
+import { ThemeContext } from '../../styles/theme';
 import { Bar } from './styles';
 import Link from 'next/link';
 import Image from 'next/image';
@@ -9,7 +9,7 @@ import MobileNav from '../MobileNav';
 
 const Nav: FC = () => {
 	const [mobileNavOpen, setMobileNavOpen] = useState<boolean>(false);
-	const { dark, toggle } = useContext(DarkModeContext);
+	const { mode, toggle } = useContext(ThemeContext);
 
 	return (
 		<Bar>
@@ -17,7 +17,7 @@ const Nav: FC = () => {
 				<a className='logo'>
 					<Image
 						className='logo-image'
-						src={dark ? '/light-logo.svg' : '/dark-logo.svg'}
+						src={mode === 'dark' ? '/light-logo.svg' : '/dark-logo.svg'}
 						alt='Logo Image'
 						width={48}
 						height={48}
@@ -26,7 +26,10 @@ const Nav: FC = () => {
 				</a>
 			</Link>
 			<div className='buttons'>
-				<IconButton icon={dark ? '/icons/sun.svg' : '/icons/moon.svg'} onClick={toggle} />
+				<IconButton
+					icon={mode === 'dark' ? '/icons/sun.svg' : '/icons/moon.svg'}
+					onClick={toggle}
+				/>
 				<Button href='/about'>About</Button>
 				<Button href='/portfolio'>Portfolio</Button>
 				<Button href='/blog'>Blog</Button>
@@ -39,7 +42,7 @@ const Nav: FC = () => {
 					Resume
 				</Button>
 				<IconButton
-					icon={dark ? '/icons/light-menu.svg' : '/icons/dark-menu.svg'}
+					icon={mode === 'dark' ? '/icons/light-menu.svg' : '/icons/dark-menu.svg'}
 					onClick={() => setMobileNavOpen(true)}
 				/>
 			</div>

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>
+				</SharedStyles>
-			</DarkMode>
+			</Theme>
 		</>
 	);
 };

pages/_document.tsx

@@ -48,8 +48,8 @@ class Doc extends Document {
 					<script
 						dangerouslySetInnerHTML={{
 							__html: `
-								function getInitialTheme() {
+								function getInitialThemeMode() {
-									const persistedColorPreference = window.localStorage.getItem('theme');
+									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>

styles/about.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const Wrapper = styled.div<{ dark: boolean }>`
+export const Wrapper = styled.div`
 	padding: 1rem 0rem;
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);

styles/shared.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { ThemeProvider, DefaultTheme } from 'styled-components';
 
-const Theme: FC = ({ children }) => {
+const Shared: FC = ({ children }) => {
 	const theme: DefaultTheme = {
 		colors: {
 			dark: {
@@ -19,4 +19,4 @@ const Theme: FC = ({ children }) => {
 	return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };
 
-export default Theme;
+export default Shared;

styles/theme.tsx

@@ -1,39 +1,39 @@
 import { FC, useReducer, useEffect, createContext } from 'react';
 
-export const DarkModeContext = createContext<{ dark: boolean; toggle: () => void }>({
+export const ThemeContext = createContext<{ mode: string; toggle: () => void }>({
-	dark: false,
+	mode: 'light',
 	toggle: () => {}
 });
 
-const reducer = (state: boolean, action: { type: string }) => {
+const reducer = (state: string, action: { type: string }) => {
 	switch (action.type) {
 		case 'TOGGLE':
-			return !state;
+			return state === 'light' ? 'dark' : 'light';
 		case 'DARK':
-			return true;
+			return 'dark';
 		case 'LIGHT':
-			return false;
+			return 'light';
 		default:
 			return state;
 	}
 };
 
-const DarkMode: FC = ({ children }) => {
+const Theme: FC = ({ children }) => {
-	const [dark, dispatch] = useReducer(reducer, false);
+	const [mode, dispatch] = useReducer(reducer, 'light');
 	const toggle = () => {
 		const root = window.document.documentElement;
 		const lightFavicon = document.querySelector('link#light-favicon')!;
 		const darkFavicon = document.querySelector('link#dark-favicon')!;
 
-		if (dark) {
+		if (mode === 'dark') {
-			window.localStorage.setItem('theme', 'light');
+			window.localStorage.setItem('mode', 'light');
 			root.style.setProperty('--background', '#F9F9F9');
 			root.style.setProperty('--secondary-background', 'white');
 			root.style.setProperty('--text', 'black');
 			root.style.setProperty('--text-inverted', 'white');
 			document.head.append(darkFavicon);
 		} else {
-			window.localStorage.setItem('theme', 'dark');
+			window.localStorage.setItem('mode', 'dark');
 			root.style.setProperty('--background', '#262626');
 			root.style.setProperty('--secondary-background', '#2F2F2F');
 			root.style.setProperty('--text', 'white');
@@ -46,12 +46,12 @@ const DarkMode: FC = ({ children }) => {
 
 	useEffect(() => {
 		const root = window.document.documentElement;
-		const initialTheme = root.style.getPropertyValue('--theme');
+		const initialThemeMode = root.style.getPropertyValue('--mode');
 
-		dispatch({ type: initialTheme === 'dark' ? 'DARK' : 'LIGHT' });
+		dispatch({ type: initialThemeMode === 'dark' ? 'DARK' : 'LIGHT' });
 	}, []);
 
-	return <DarkModeContext.Provider value={{ dark, toggle }}>{children}</DarkModeContext.Provider>;
+	return <ThemeContext.Provider value={{ mode, toggle }}>{children}</ThemeContext.Provider>;
 };
 
-export default DarkMode;
+export default Theme;