From cf3c9f2dd15f005ad4ac2fbc6e030173bda15036 Mon Sep 17 00:00:00 2001
From: chanyoungcoding <white1614@naver.com>
Date: Fri, 7 Jun 2024 16:23:11 +0900
Subject: [PATCH] navbar darkmode modify

---
 app/layout.tsx                   |  6 ++++++
 src/widgets/Navbar/ui/navbar.tsx | 13 +++++++------
 src/widgets/Navbar/ui/styles.ts  |  3 +++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index e1a34ed..3e09640 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -47,5 +47,11 @@ const styles = stylex.create({
     backgroundColor: "black",
     color: 'white',
   },
+  span: {
+    color: 'rgb(20, 22, 27)', // Default span color in light mode
+  },
+  spanDark: {
+    color: 'white', // Span color in dark mode
+  },
 
 });
diff --git a/src/widgets/Navbar/ui/navbar.tsx b/src/widgets/Navbar/ui/navbar.tsx
index edae232..1a6d501 100644
--- a/src/widgets/Navbar/ui/navbar.tsx
+++ b/src/widgets/Navbar/ui/navbar.tsx
@@ -6,11 +6,12 @@ import stylex from '@stylexjs/stylex';
 import Image from 'next/image';
 import Logo from '@/shared/ui/icons/GDSCLogo.svg';
 import { styles } from './styles';
+import { useTheme } from 'next-themes';
 
 
 export const Navbar = () => {
-
-
+  const { theme } = useTheme();
+  const spanClass = theme === 'dark' ? styles.spanDark : null;
   return (
     <header>
       <nav {...stylex.props(styles.navbar)}>
@@ -21,25 +22,25 @@ export const Navbar = () => {
           href="/wakatime"
           {...stylex.props(styles.category, styles.categoryHover)}
         >
-          <p>wakatime</p>
+          <span {...stylex.props(spanClass)}>wakatime</span>
         </Link>
         <Link
           href="/teddy"
           {...stylex.props(styles.category, styles.categoryHover)}
         >
-          <span >teddy</span>
+          <span {...stylex.props(spanClass)}>teddy</span>
         </Link>
         <Link
           href="/members"
           {...stylex.props(styles.category, styles.categoryHover)}
         >
-          <span>members</span>
+          <span {...stylex.props(spanClass)}>members</span>
         </Link>
         <Link
           href="/blog"
           {...stylex.props(styles.category, styles.categoryHover)}
         >
-          <span>blog</span>
+          <span {...stylex.props(spanClass)}>blog</span>
         </Link>
       </nav>
     </header>
diff --git a/src/widgets/Navbar/ui/styles.ts b/src/widgets/Navbar/ui/styles.ts
index 72f8ace..5ed235c 100644
--- a/src/widgets/Navbar/ui/styles.ts
+++ b/src/widgets/Navbar/ui/styles.ts
@@ -28,5 +28,8 @@ export const styles = stylex.create({
       ':hover': 'solid',
     },
   },
+  spanDark: {
+    color: 'white', // Span color in dark mode
+  },
 
 });