navbar darkmode modify

GDSC-Daejin · Jun 7, 2024 · cf3c9f2 · cf3c9f2
1 parent be99b5b
commit cf3c9f2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -28,5 +28,8 @@ export const styles = stylex.create({
       ':hover': 'solid',
     },
   },
+  spanDark: {
+    color: 'white', // Span color in dark mode
+  },
 
 });