Update project structure

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

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { ThemeProvider, DefaultTheme } from 'styled-components';
+
+const Shared: 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 Shared;

styles/theme.tsx

@@ -0,0 +1,57 @@
+import { FC, useReducer, useEffect, createContext } from 'react';
+
+export const ThemeContext = createContext<{ mode: string; toggle: () => void }>({
+	mode: 'light',
+	toggle: () => {}
+});
+
+const reducer = (state: string, action: { type: string }) => {
+	switch (action.type) {
+		case 'TOGGLE':
+			return state === 'light' ? 'dark' : 'light';
+		case 'DARK':
+			return 'dark';
+		case 'LIGHT':
+			return 'light';
+		default:
+			return state;
+	}
+};
+
+const Theme: FC = ({ children }) => {
+	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 (mode === 'dark') {
+			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('mode', '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 initialThemeMode = root.style.getPropertyValue('--mode');
+
+		dispatch({ type: initialThemeMode === 'dark' ? 'DARK' : 'LIGHT' });
+	}, []);
+
+	return <ThemeContext.Provider value={{ mode, toggle }}>{children}</ThemeContext.Provider>;
+};
+
+export default Theme;