Theme Colors Attached

sayshark75 · Nov 29, 2023 · 583946b · 583946b
1 parent 0478ae0
commit 583946b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,13 +11,7 @@ import Footer from "./components/Footer/Footer.tsx";
 
 function App() {
   return (
-    <Flex
-      transition={"500ms"}
-      direction={"column"}
-      w={"100%"}
-      minH={"100vh"}
-      bgColor={"#2a2a2a"}
-    >
+    <Flex transition={"500ms"} direction={"column"} w={"100%"} minH={"100vh"} bgColor={"primary"}>
       <Navbar />
       <Home />
       <About />

diff --git a/src/components/Navbar/DesktopNav.tsx b/src/components/Navbar/DesktopNav.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Flex, Text, useColorModeValue, useTheme } from "@chakra-ui/react";
 import { NavbarButtonProps } from "../../TYPES";
 import NavButton from "./NavButton";
 import { runAnim } from "../../animations/NavbarAnimations";
@@ -8,19 +8,36 @@ type Props = {
 };
 
 const DesktopNav = ({ buttonData }: Props) => {
+  const theme = useTheme();
+  if (!theme.semanticTokens) {
+    return null;
+  }
+  const { text } = theme.semanticTokens.colors;
+  const _text = useColorModeValue(text.default, text._dark);
   return (
-    <Flex transition={"500ms"} pos={"fixed"} zIndex={"1"} top={"0px"} left={"0px"} w={"100%"} bgColor={"#2a2a2a"} color={"#FFFFFF"} gap={"2"} py={3}>
+    <Flex
+      transition={"500ms"}
+      pos={"fixed"}
+      zIndex={"1"}
+      top={"0px"}
+      left={"0px"}
+      w={"100%"}
+      bgColor={"primary"}
+      color={"light"}
+      gap={"2"}
+      py={3}
+    >
       <Flex alignItems={"center"} flex={1}>
         <Text
           w={"40px"}
           h={"40px"}
           textAlign={"center"}
           transition={"500ms"}
-          color={"textPrimary"}
+          color={"text"}
           rounded={"full"}
           animation={`${runAnim} 3s ease-in-out infinite`}
           cursor={"pointer"}
-          _hover={{ textShadow: "#0064FF 3px 1px 2px" }}
+          _hover={{ textShadow: `${_text} 3px 1px 2px` }}
           ml={3}
           as={"b"}
           fontSize={"2xl"}

diff --git a/src/pages/Timeline/Timeline.tsx b/src/pages/Timeline/Timeline.tsx
@@ -13,7 +13,7 @@ const Timeline = () => {
   if (!theme.hasOwnProperty("semanticTokens")) {
     return null;
   }
-  const { primaryLight, accent } = theme.semanticTokens.colors;
+  const { primaryLight, accent } = theme?.semanticTokens?.colors;
   const _primaryLight = useColorModeValue(primaryLight.default, primaryLight._dark);
   const _accent = useColorModeValue(accent.default, accent._dark);
 

diff --git a/src/themes/BlueTheme.ts b/src/themes/BlueTheme.ts
@@ -8,27 +8,27 @@ export const blueTheme: ThemeConfig = extendTheme({
         _dark: "#000",
       },
       light: {
-        default: "#fff",
+        default: "#000",
         _dark: "#fff",
       },
       text: {
-        default: "#CCC",
+        default: "#fff",
         _dark: "#CCC",
       },
       placeholder: {
         default: "#aaa",
         _dark: "#aaa",
       },
       primary: {
-        default: "#2a2a2a",
+        default: "#ccc",
         _dark: "#2a2a2a",
       },
       primaryLight: {
-        default: "#3a3a3a",
+        default: "#bbb",
         _dark: "#3a3a3a",
       },
       primaryLighter: {
-        default: "#4a4a4a",
+        default: "#aaa",
         _dark: "#4a4a4a",
       },
       accent: {