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
-				as='a'
-				target={target}
-				variant={variant}
-				dark={dark}
-				onClick={onClick}
-				className={className}
-			>
+			<Btn as='a' target={target} variant={variant} 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 { DarkModeContext } from '../../components/DarkMode';
+import { FC } from 'react';
 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/DarkMode.tsx

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

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 { DarkModeContext } from '../components/DarkMode';
+import React, { FC } from 'react';
 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')};
-	color: ${({ variant, dark }) => (variant === 'action' ? 'white' : dark ? 'white' : 'black')};
-	border: ${({ variant, dark }) =>
-		variant === 'outline' ? `2px solid ${dark ? 'white' : 'black'}` : 'none'};
+	background: ${({ variant }) => (variant === 'action' ? '#1573CA' : 'none')};
+	color: ${({ variant, mode }) =>
+		variant === 'action' ? 'white' : mode === 'dark' ? 'white' : 'black'};
+	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>

components/Theme.tsx

@@ -1,22 +0,0 @@
-import { FC } from 'react';
-import { ThemeProvider, DefaultTheme } from 'styled-components';
-
-const Theme: FC = ({ children }) => {
-	const theme: DefaultTheme = {
-		colors: {
-			dark: {
-				background: '#262626',
-				text: 'white'
-			},
-			light: {
-				background: '#F9F9F9',
-				text: 'black'
-			},
-			blue: '#1573CA'
-		}
-	};
-
-	return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
-};
-
-export default Theme;