🌐 Feat : Theme can be changed anywhere

daniel-jebarson · Apr 7, 2023 · e894dc1 · e894dc1 · vercel · Apr 7, 2023
1 parent 1608e6e
commit e894dc1
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 32 deletions.
diff --git a/client/layout/ColorChange.js b/client/layout/ColorChange.js
@@ -0,0 +1,21 @@
+import { SunIcon, MoonIcon } from "@chakra-ui/icons";
+import { useColorModeValue, IconButton, useColorMode } from "@chakra-ui/react";
+export default function ColorChange({ children }) {
+  const colorIcon = useColorModeValue(<MoonIcon />, <SunIcon />);
+  const { colorMode, toggleColorMode } = useColorMode();
+  return (
+    <>
+      <IconButton
+        position={"fixed"}
+        top={"1.5"}
+        left={"1.5"}
+        size="sm"
+        isRound
+        onClick={toggleColorMode}
+        _focus={{ boxShadow: "none" }}
+        icon={colorIcon}
+      />
+      <main>{children}</main>
+    </>
+  );
+}
diff --git a/client/pages/_document.js b/client/pages/_document.js
@@ -1,10 +1,13 @@
 import { Html, Head, Main, NextScript } from "next/document";
+import { ColorModeScript } from "@chakra-ui/react";
+import theme from "../theme";
 
 export default function Document() {
   return (
     <Html>
       <Head />
       <body>
+        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
         <Main />
         <NextScript />
       </body>

diff --git a/client/pages/chat.js b/client/pages/chat.js
@@ -248,7 +248,8 @@ function Chat() {
   });
 
   const logOut = async () => {
-    localStorage.clear();
+    // localStorage.clear();
+    localStorage.removeItem("userInfo");
     toast({
       title: "Logging out ...",
       description: "Logged out successfully!",

diff --git a/client/pages/index.js b/client/pages/index.js
@@ -15,13 +15,18 @@ import {
   FormHelperText,
   InputRightElement,
   useToast,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import HeaderMeta from "../components/meta/HeaderMeta";
+import ColorChange from "../layout/ColorChange";
 import { useEffect } from "react";
 import { EmailIcon, ViewIcon, ViewOffIcon, LockIcon } from "@chakra-ui/icons";
 import Axios from "axios";
 import { NextSeo } from "next-seo";
 const Home = () => {
+  const color = useColorModeValue("#000", "#fff");
+  const bg = useColorModeValue("gray.200", "#2e2b2b");
+  const profileColor = useColorModeValue("whiteAlpha.900", "#292626");
   const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const [email, setEmail] = useState("");
@@ -69,7 +74,6 @@ const Home = () => {
         position: "bottom",
       });
       // console.log(data);
-
       await sleep(3000);
       setLoading(false);
       window.location.href = "./chat";
@@ -88,15 +92,17 @@ const Home = () => {
   };
 
   return (
-    <>
+    <ColorChange>
       <NextSeo
         title="WebChatApp - Login"
         description="Login in to the web chat app to start messaging to others"
       />
       <Flex
+        color={color}
+        bgColor={bg}
+        width={"full"}
         flexDirection="column"
         height="100vh"
-        backgroundColor="gray.200"
         justifyContent="center"
         alignItems="center"
       >
@@ -110,7 +116,7 @@ const Home = () => {
           justifyContent="center"
           alignItems="center"
           pt={"10"}
-          bgColor={"whiteAlpha.900"}
+          bgColor={profileColor}
         >
           <Avatar bg="teal.500" />
           <Heading color="teal.400">Welcome</Heading>
@@ -120,7 +126,7 @@ const Home = () => {
                 spacing={4}
                 px="1rem"
                 py={"2rem"}
-                backgroundColor="whiteAlpha.900"
+                bgColor={profileColor}
                 boxShadow="md"
               >
                 <FormControl>
@@ -161,7 +167,7 @@ const Home = () => {
                     </InputRightElement>
                   </InputGroup>
                   <FormHelperText textAlign="right">
-                    <Link>forgot password?</Link>
+                    <Link color={"red.400"}>forgot password?</Link>
                   </FormHelperText>
                 </FormControl>
                 <Button
@@ -185,7 +191,7 @@ const Home = () => {
           </Link>
         </Box>
       </Flex>
-    </>
+    </ColorChange>
   );
 };
 

diff --git a/client/pages/otp.js b/client/pages/otp.js
@@ -14,7 +14,9 @@ import {
   FormHelperText,
   InputRightElement,
   useToast,
+  useColorModeValue,
 } from "@chakra-ui/react";
+import ColorChange from "../layout/ColorChange";
 import { NextSeo } from "next-seo";
 import { FaRegUser } from "react-icons/fa";
 import { EmailIcon, ViewIcon, ViewOffIcon, LockIcon } from "@chakra-ui/icons";
@@ -24,11 +26,14 @@ import HeaderMeta from "../components/meta/HeaderMeta";
 import React, { useState, useEffect } from "react";
 const OTP = () => {
   const [userData, setUserData] = useState({});
+  const color = useColorModeValue("#000", "#fff");
+  const bg = useColorModeValue("gray.200", "#2e2b2b");
+  const profileColor = useColorModeValue("whiteAlpha.900", "#292626");
   const [timeLeft, setTimeLeft] = useState(0);
   const toast = useToast();
   useEffect(() => {
     let data = JSON.parse(localStorage.getItem("userInfo"));
-    if (Object.keys(data).length == 0) {
+    if (data == null || Object.keys(data).length == 0) {
       window.location.href = "./";
     } else if (data.verified) {
       window.location.href = "./chat";
@@ -44,7 +49,6 @@ const OTP = () => {
     while (time !== 0) {
       await sleep(1000);
       setTimeLeft(--time);
-      // console.log(time);
     }
   };
 
@@ -86,7 +90,7 @@ const OTP = () => {
   };
 
   return (
-    <>
+    <ColorChange>
       {" "}
       <NextSeo
         description={"OTP to activate the account in Web Chat App"}
@@ -95,9 +99,11 @@ const OTP = () => {
       <Flex
         flexDirection="column"
         height="100vh"
-        backgroundColor="gray.200"
         justifyContent="center"
         alignItems="center"
+        color={color}
+        bgColor={bg}
+        width={"full"}
       >
         {/* <HeaderMeta
         content={"OTP to activate the account in Web Chat App"}
@@ -109,7 +115,7 @@ const OTP = () => {
           justifyContent="center"
           alignItems="center"
           pt={"10"}
-          bgColor={"whiteAlpha.900"}
+          bgColor={profileColor}
         >
           <Avatar bg="teal.500" />
           <Heading color="teal.400">Verify the link</Heading>
@@ -119,7 +125,7 @@ const OTP = () => {
                 spacing={4}
                 px="1rem"
                 py={"2rem"}
-                backgroundColor="whiteAlpha.900"
+                bgColor={profileColor}
                 boxShadow="md"
               >
                 <FormControl>
@@ -168,7 +174,7 @@ const OTP = () => {
           </Link>
         </Box>
       </Flex>
-    </>
+    </ColorChange>
   );
 };
 

diff --git a/client/pages/register.js b/client/pages/register.js
@@ -15,14 +15,19 @@ import {
   InputRightElement,
   Icon,
   useToast,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import { FaRegUser } from "react-icons/fa";
 import { EmailIcon, ViewIcon, ViewOffIcon, LockIcon } from "@chakra-ui/icons";
 import HeaderMeta from "../components/meta/HeaderMeta";
 import { NextSeo } from "next-seo";
 import Axios from "axios";
 import { useEffect } from "react";
+import ColorChange from "../layout/ColorChange";
 const Register = () => {
+  const color = useColorModeValue("#000", "#fff");
+  const bg = useColorModeValue("gray.200", "#2e2b2b");
+  const profileColor = useColorModeValue("whiteAlpha.900", "#292626");
   const toast = useToast();
   const [pass, setPass] = useState("");
   const [cpass, setcPass] = useState("");
@@ -33,10 +38,6 @@ const Register = () => {
   const [loading, setLoading] = useState(false);
   const handleShowClick = () => setShowPassword(!showPassword);
   const handleShowCClick = () => setShowCPassword(!showCPassword);
-  // const postDetails = (img) => {
-  //   setLoading(true);
-  //   // if(img===undefined)
-  // };
 
   useEffect(() => {
     let data = JSON.parse(localStorage.getItem("userInfo"));
@@ -99,16 +100,18 @@ const Register = () => {
   };
 
   return (
-    <>
+    <ColorChange>
       {" "}
       <NextSeo
         description={"Register to create the account in Web Chat App"}
         title={"WebChatApp - Register"}
       />
       <Flex
+        color={color}
+        bgColor={bg}
+        width={"full"}
         flexDirection="column"
         height="100vh"
-        backgroundColor="gray.200"
         justifyContent="center"
         alignItems="center"
       >
@@ -122,7 +125,7 @@ const Register = () => {
           justifyContent="center"
           alignItems="center"
           pt={"10"}
-          bgColor={"whiteAlpha.900"}
+          bgColor={profileColor}
         >
           <Avatar bg="teal.500" />
           <Heading color="teal.400">Welcome</Heading>
@@ -132,8 +135,8 @@ const Register = () => {
                 spacing={4}
                 px="1rem"
                 py={"2rem"}
-                backgroundColor="whiteAlpha.900"
                 boxShadow="md"
+                bgColor={profileColor}
               >
                 <FormControl>
                   <InputGroup>
@@ -211,14 +214,6 @@ const Register = () => {
                     </InputRightElement>
                   </InputGroup>
                 </FormControl>
-                {/* <FormControl>
-                <Input
-                  type="file"
-                  p={1.5}
-                  accept="image/*"
-                  onChange={(e) => postDetails(e.target.files[0])}
-                />
-              </FormControl> */}
 
                 <Button
                   borderRadius={0}
@@ -241,7 +236,7 @@ const Register = () => {
           </Link>
         </Box>
       </Flex>
-    </>
+    </ColorChange>
   );
 };
 

diff --git a/client/theme/index.js b/client/theme/index.js
@@ -0,0 +1,10 @@
+import { extendTheme } from "@chakra-ui/react";
+
+const config = {
+  initialColorMode: "system",
+  useSystemColorMode: false,
+};
+
+const theme = extendTheme({ config });
+
+export default theme;