From a24ba59b8353d2198db2cb2cda4d34801d615ed4 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Tue, 5 Jan 2021 22:49:12 +0100
Subject: [PATCH] Add dark mode component

---
 components/DarkMode.tsx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 components/DarkMode.tsx

diff --git a/components/DarkMode.tsx b/components/DarkMode.tsx
new file mode 100644
index 0000000..a2593a2
--- /dev/null
+++ b/components/DarkMode.tsx
@@ -0,0 +1,28 @@
+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;
+		default:
+			return state;
+	}
+};
+
+const DarkMode: FC = ({ children }) => {
+	const [dark, dispatch] = useReducer(reducer, false);
+	const toggle = () => dispatch({ type: 'TOGGLE' });
+
+	useEffect(() => {
+		if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) toggle();
+	}, []);
+
+	return <DarkModeContext.Provider value={{ dark, toggle }}>{children}</DarkModeContext.Provider>;
+};
+
+export default DarkMode;