Theme Colors Switcher Added, Dark Mode switch Added

sayshark75 · Nov 29, 2023 · 8e008c5 · 8e008c5
1 parent 7ada829
commit 8e008c5
Show file tree

Hide file tree

Showing 18 changed files with 439 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#006aff" />
+
     <title>Sayyed Sharuk</title>
   </head>
   <body>

diff --git a/src/CONSTANTS.tsx b/src/CONSTANTS.tsx
@@ -23,6 +23,12 @@ import {
 } from "./sources/Links";
 import { MdAlternateEmail, MdCall, MdContacts, MdHome, MdInfo, MdMyLocation, MdQuestionAnswer, MdWork } from "react-icons/md";
 import { BsTwitter } from "react-icons/bs";
+import { blueTheme } from "./themes/BlueTheme";
+import { redTheme } from "./themes/RedTheme";
+import { greenTheme } from "./themes/GreenTheme";
+import { violetTheme } from "./themes/VioletTheme";
+import { orangeTheme } from "./themes/OrangeTheme";
+import { yellowTheme } from "./themes/yellowTheme";
 
 export const getNavbarButtonsData = (context: ScrollContextProps, resumeDownload: string, handleClick: () => void) => {
   const { handleHomeRef, handleAboutRef, handleSkillsRef, handleProjectsRef, handleContactRef } = context;
@@ -220,20 +226,26 @@ export const TimelineData: TimelineCardProps[] = [
 export const ThemeIconsData: ThemeIconsProps[] = [
   {
     color: "themeBlue",
+    theme: blueTheme,
   },
   {
     color: "themeRed",
+    theme: redTheme,
   },
   {
     color: "themeGreen",
+    theme: greenTheme,
   },
   {
     color: "themeViolet",
+    theme: violetTheme,
   },
   {
     color: "themeOrange",
+    theme: orangeTheme,
   },
   {
     color: "themeYellow",
+    theme: yellowTheme,
   },
 ];
diff --git a/src/TYPES.ts b/src/TYPES.ts
@@ -25,6 +25,7 @@ export type ThemeContextProps = {
 };
 export type ThemeIconsProps = {
   color: string;
+  theme: ThemeConfig;
 };
 
 export interface ContextProviderProps {

diff --git a/src/components/AboutPage/ResumeButton.tsx b/src/components/AboutPage/ResumeButton.tsx
@@ -16,7 +16,7 @@ const ResumeButton = () => {
         animation={`${ScalePing} 1s ease-in 2s forwards`}
         bgColor={"accent"}
         opacity={0}
-        color={"light"}
+        color={"white"}
         transition={"200ms"}
         _hover={{}}
         _active={{ bgColor: "darker" }}

diff --git a/src/components/ContactPage/CopyButton.tsx b/src/components/ContactPage/CopyButton.tsx
@@ -1,10 +1,7 @@
 import { Button, Text } from "@chakra-ui/react";
 import copy from "copy-to-clipboard";
 import { useState } from "react";
-import {
-  MdOutlineCheckCircleOutline,
-  MdOutlineContentCopy,
-} from "react-icons/md";
+import { MdOutlineCheckCircleOutline, MdOutlineContentCopy } from "react-icons/md";
 import { CopyButtonProps } from "../../TYPES";
 
 const CopyButton = ({ title }: CopyButtonProps) => {
@@ -26,8 +23,8 @@ const CopyButton = ({ title }: CopyButtonProps) => {
       p={"5"}
       gap={"3"}
       justifyContent={"space-between"}
-      color={"#fff"}
-      bgColor={"#006aff"}
+      color={"white"}
+      bgColor={"accent"}
       transition={"500ms"}
       _hover={{}}
       _active={{ bgColor: "#003aff", color: "#fff" }}
@@ -43,11 +40,7 @@ const CopyButton = ({ title }: CopyButtonProps) => {
       >
         {title}
       </Text>
-      {!isCopy ? (
-        <MdOutlineContentCopy style={{ fontSize: "22px" }} />
-      ) : (
-        <MdOutlineCheckCircleOutline style={{ fontSize: "22px" }} />
-      )}
+      {!isCopy ? <MdOutlineContentCopy style={{ fontSize: "22px" }} /> : <MdOutlineCheckCircleOutline style={{ fontSize: "22px" }} />}
     </Button>
   );
 };

diff --git a/src/components/Navbar/DesktopNav.tsx b/src/components/Navbar/DesktopNav.tsx
@@ -1,7 +1,6 @@
 import { Flex, Text, useColorModeValue, useTheme } from "@chakra-ui/react";
 import { NavbarButtonProps } from "../../TYPES";
 import NavButton from "./NavButton";
-import { runAnim } from "../../animations/NavbarAnimations";
 
 type Props = {
   buttonData: NavbarButtonProps[];
@@ -35,8 +34,9 @@ const DesktopNav = ({ buttonData }: Props) => {
           transition={"500ms"}
           color={"text"}
           rounded={"full"}
-          animation={`${runAnim} 3s ease-in-out infinite`}
           cursor={"pointer"}
+          border={`3px solid`}
+          borderColor={`accent`}
           _hover={{ textShadow: `${_text} 3px 1px 2px` }}
           ml={3}
           as={"b"}

diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -7,7 +7,7 @@ import { getNavbarButtonsData } from "../../CONSTANTS";
 import DesktopNav from "./DesktopNav";
 import MobileNav from "./MobileNav";
 import { NavbarButtonProps } from "../../TYPES";
-// import ThemeChanger from "./ThemeChanger";
+import ThemeChanger from "./ThemeChanger";
 
 const Navbar = () => {
   const context = useContext(ScrollContext);
@@ -19,19 +19,15 @@ const Navbar = () => {
     window.open(resumelink, "_blank");
   };
 
-  const NavButtonsData: NavbarButtonProps[] = getNavbarButtonsData(
-    context,
-    resumeDownload,
-    handleClick
-  );
+  const NavButtonsData: NavbarButtonProps[] = getNavbarButtonsData(context, resumeDownload, handleClick);
 
   return (
     <>
       <Show above="769px">
         <DesktopNav buttonData={NavButtonsData} />
       </Show>
       {/* Theme Preferences */}
-      {/* <ThemeChanger /> */}
+      <ThemeChanger />
 
       {/* Mobile Navbar */}
       <Show below="768px">

diff --git a/src/components/Navbar/ThemeChanger.tsx b/src/components/Navbar/ThemeChanger.tsx
@@ -1,39 +1,40 @@
-import { Flex, Image, useColorMode } from "@chakra-ui/react";
+import { Flex, IconButton, useColorMode, useColorModeValue, useTheme } from "@chakra-ui/react";
 import changeThemeMeta from "../../helpers/MobileChromeTheme";
-import LightIcon from "../../assets/icons/light.svg";
-import DarkIcon from "../../assets/icons/dark.svg";
+import { MdNightsStay } from "react-icons/md";
+import { FaSun } from "react-icons/fa";
 
 const ThemeChanger = () => {
+  const theme = useTheme();
+  if (!theme.semanticTokens) {
+    return null;
+  }
+  const { accent } = theme.semanticTokens.colors;
+  const _accent = useColorModeValue(accent.default, accent._dark);
   const { colorMode, toggleColorMode } = useColorMode();
 
   const handleColorMode = () => {
     toggleColorMode();
-    changeThemeMeta("");
+    changeThemeMeta(_accent);
   };
 
   return (
     <Flex
       transition={"500ms"}
       pos={"fixed"}
-      bottom={10}
-      right={10}
+      bottom={["90%", "90%", "90%", 10]}
+      right={[0, 0, 0, 10]}
       justifyContent={"center"}
       alignItems={"center"}
       zIndex={"2"}
       w={"60px"}
     >
-      <Image
+      <IconButton
         rounded={"full"}
-        p={1}
-        cursor={"pointer"}
-        bgColor={colorMode ? "#fff" : "#2a2a2a"}
+        bgColor={"primary"}
+        color={"accent"}
+        aria-label="Button to Toggle between Light and Dark Mode"
+        icon={colorMode === "light" ? <MdNightsStay size={"26px"} /> : <FaSun size={"26px"} />}
         onClick={handleColorMode}
-        src={colorMode ? DarkIcon : LightIcon}
-        alt={
-          colorMode
-            ? "Dark Icon, Switch to Dark mode"
-            : "Light Icon, Switch to Light mode"
-        }
       />
     </Flex>
   );

diff --git a/src/components/ProjectsPage/ProjectsCard.tsx b/src/components/ProjectsPage/ProjectsCard.tsx
@@ -79,7 +79,7 @@ const ProjectsCard = ({ live, github, image, workType, heading1, heading2, summa
           fontSize={["10px", "12px"]}
           letterSpacing={"2px"}
           bgColor={"accent"}
-          color={"light"}
+          color={"white"}
           rounded={"full"}
           px={"12px"}
           py={"2px"}
@@ -93,7 +93,7 @@ const ProjectsCard = ({ live, github, image, workType, heading1, heading2, summa
               fontSize={["14px", "16px"]}
               width={"7rem"}
               fontWeight={["300", "400"]}
-              color={"light"}
+              color={"white"}
               letterSpacing={"2px"}
               _hover={{}}
               _active={{ bgColor: "accent", transform: "translateY(10px)" }}
@@ -109,7 +109,7 @@ const ProjectsCard = ({ live, github, image, workType, heading1, heading2, summa
                 fontSize={["14px", "16px"]}
                 width={"7rem"}
                 fontWeight={["300", "400"]}
-                color={"light"}
+                color={"white"}
                 letterSpacing={"2px"}
                 _hover={{}}
                 _active={{ bgColor: "accent", transform: "translateY(10px)" }}

diff --git a/src/components/ThemesComponent/ThemeContainer.tsx b/src/components/ThemesComponent/ThemeContainer.tsx
@@ -2,8 +2,17 @@ import { Flex, IconButton } from "@chakra-ui/react";
 import { BiSolidColor } from "react-icons/bi";
 import { ThemeIconsData } from "../../CONSTANTS";
 import { nanoid } from "nanoid";
+import { useContext } from "react";
+import { ThemeContext } from "../../contexts/ThemeProvider";
 
 const ThemeContainer = () => {
+  const themeContext = useContext(ThemeContext);
+
+  if (!themeContext) {
+    return null;
+  }
+
+  const { handleTheme } = themeContext;
   return (
     <Flex justifyContent={"center"} alignItems={"center"} gap={["2", "4", "5", "6", "8"]}>
       {ThemeIconsData.map((icon) => {
@@ -14,6 +23,7 @@ const ThemeContainer = () => {
             icon={<BiSolidColor style={{ color: "#fff" }} />}
             fontSize={"32px"}
             rounded={"full"}
+            onClick={() => handleTheme(icon.theme)}
             _active={{ opacity: "0.5", transform: "translateY(5px)" }}
             bgColor={icon.color}
             _hover={{}}

diff --git a/src/helpers/MobileChromeTheme.ts b/src/helpers/MobileChromeTheme.ts
@@ -1,9 +1,8 @@
 let themeMeta = document.querySelector(`meta[name="theme-color"]`);
 
-const changeThemeMeta = (type: string) => {
+const changeThemeMeta = (color: string) => {
   if (themeMeta) {
-    const color = localStorage.getItem("chakra-ui-color-mode");
-    themeMeta.setAttribute("content", color === "light" ? type : "#000000");
+    themeMeta.setAttribute("content", color);
   }
 };
 

diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx
@@ -147,7 +147,7 @@ const Contact = () => {
               rounded={"base"}
               outline={"none"}
               border={"none"}
-              color={"light"}
+              color={"white"}
               gap={1}
               _hover={{}}
               _active={{ bgColor: "accentDark", color: "light" }}

diff --git a/src/pages/GithubStats/GithubStats.tsx b/src/pages/GithubStats/GithubStats.tsx
@@ -45,7 +45,7 @@ const GithubStats = () => {
           _hover={{ shadow: "2xl" }}
           transition={"750ms"}
           borderRadius={"12"}
-          src={`https://streak-stats.demolab.com?user=sayshark75&theme=transparent&hide_border=true&background=${__primary}&currStreakLabel=${__accent}&currStreakNum=${__accent}&sideNums=${__accent}&dates=${__accent}&stroke=${__accent}&sideLabels=${__accent}&icon_color=${__accent}`}
+          src={`https://streak-stats.demolab.com?user=sayshark75&theme=transparent&hide_border=true&background=${__primary}&currStreakLabel=${__accent}&currStreakNum=${__accent}&sideNums=${__accent}&dates=${__accent}&stroke=${__accent}&sideLabels=${__accent}&icon_color=${__accent}&ring=${__accent}&fire=${__accent}`}
         />
       </Flex>
     </>

diff --git a/src/themes/GreenTheme.ts b/src/themes/GreenTheme.ts
@@ -0,0 +1,76 @@
+import { ThemeConfig, extendTheme } from "@chakra-ui/react";
+
+export const greenTheme: ThemeConfig = extendTheme({
+  semanticTokens: {
+    colors: {
+      darker: {
+        default: "#000",
+        _dark: "#fff",
+      },
+      white: {
+        default: "#fff",
+        _dark: "#eee",
+      },
+      light: {
+        default: "#fff",
+        _dark: "#000",
+      },
+      text: {
+        default: "#000",
+        _dark: "#CCC",
+      },
+      placeholder: {
+        default: "#4a4a4a",
+        _dark: "#aaa",
+      },
+      primary: {
+        default: "#fff",
+        _dark: "#2a2a2a",
+      },
+      primaryLight: {
+        default: "#fff",
+        _dark: "#3a3a3a",
+      },
+      primaryLighter: {
+        default: "#ddd",
+        _dark: "#4a4a4a",
+      },
+      accent: {
+        default: "#2CD61E",
+        _dark: "#11C402",
+      },
+      accentLight: {
+        default: "#2CD61E",
+        _dark: "#11C402",
+      },
+      accentDark: {
+        default: "#11C402",
+        _dark: "#11C402",
+      },
+      themeBlue: {
+        default: "#006aff",
+        _dark: "#0954BD",
+      },
+      themeRed: {
+        default: "#FF0000",
+        _dark: "#E10202",
+      },
+      themeYellow: {
+        default: "#FFD800",
+        _dark: "#DBBA03",
+      },
+      themeViolet: {
+        default: "#AA00FF",
+        _dark: "#8406C3",
+      },
+      themeOrange: {
+        default: "#FF5500",
+        _dark: "#C44201",
+      },
+      themeGreen: {
+        default: "#2CD61E",
+        _dark: "#11C402",
+      },
+    },
+  },
+});