From 6c538e73bfa9972357c9b3d9cd69f74704175207 Mon Sep 17 00:00:00 2001
From: Ali Heydari <ali4heydari@gmail.com>
Date: Sat, 17 Jul 2021 07:30:57 +0200
Subject: [PATCH] =?UTF-8?q?fix(components):=20=F0=9F=8C=93=20add=20default?=
 =?UTF-8?q?=20value=20for=20color=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header/MainNav/ToggleMode.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Header/MainNav/ToggleMode.tsx b/src/components/Header/MainNav/ToggleMode.tsx
index c8e065f6..e6277d1e 100644
--- a/src/components/Header/MainNav/ToggleMode.tsx
+++ b/src/components/Header/MainNav/ToggleMode.tsx
@@ -1,5 +1,5 @@
 import { ToggleMode as ToggleModeButtonBase } from "./styles";
-import React from "react";
+import React, { useMemo } from "react";
 import { useDarkMode } from "../../../hooks";
 import { Moon, Sun } from "styled-icons/fa-solid";
 
@@ -26,14 +26,17 @@ export const Icons = {
   SunMoon: (props) => <SunSlashMoon {...props} width="1.2em" />,
 };
 
-const modes = {
-  light: [`Light Mode`, Icons.Sun, `dark`],
-  dark: [`Dark Mode`, Icons.Moon, `osPref`],
-  osPref: [`OS setting`, Icons.SunMoon, `light`],
-};
-
 export const ToggleMode = () => {
-  const [colorMode, setColorMode] = useDarkMode();
+  const [colorMode = "osPref", setColorMode] = useDarkMode();
+
+  const modes = useMemo(
+    () => ({
+      light: [`Light Mode`, Icons.Sun, `dark`],
+      dark: [`Dark Mode`, Icons.Moon, `osPref`],
+      osPref: [`OS setting`, Icons.SunMoon, `light`],
+    }),
+    []
+  );
 
   const [title, Icon, nextMode] = modes[colorMode];