다크 모드 수정

GDSC-Daejin · Jul 15, 2024 · 16703c7 · 16703c7
1 parent 373d46d
commit 16703c7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/app/wakatime/page.tsx b/app/wakatime/page.tsx
@@ -3,11 +3,15 @@
 import WakatimeMain from "@/views/wakatime/ui/wakatime-main"
 import { styles } from "./style"
 import stylex from '@stylexjs/stylex';
+import { useTheme } from 'next-themes';
 
 // <WakatimeMain/> 에 나중에 병합
 
 const Wakatime = () => {
 
+  const { theme } = useTheme();
+  const spanClass = theme === 'dark' ? styles.spanDark : null;
+
   const Profile = [
     {
       name: "Peony", name2: "정명주", position: "Lead", daily: "2hrs 47 mins", time: "19hrs 29mins" 
@@ -24,7 +28,7 @@ const Wakatime = () => {
     <div {...stylex.props(styles.wakatimeCategoryContainer)}>
       <div {...stylex.props(styles.wakatimeMonth)}>
         <p>🔚</p>
-        <p>&#160;&#160;April&#160;&#160;</p>
+        <span {...stylex.props(spanClass)}>&#160;&#160;April&#160;&#160;</span>
         <p>🔜</p>
       </div>
 
@@ -52,12 +56,12 @@ const Wakatime = () => {
       {Profile.map((item, index) => (
         <div key={index} {...stylex.props(styles.wakatimeUserIntroBox)}>
           <div {...stylex.props(styles.wakatimeUserIntroBoxText)}>
-            <p {...stylex.props(styles.wakatimeUserIntroTextP)}>{index + 1}</p>
-            <p>{item.name}</p>
+            <span  {...stylex.props(styles.wakatimeUserIntroTextP, spanClass)}>{index + 1}</span>
+            <span {...stylex.props(spanClass)}>{item.name}</span>
           </div>
           <div {...stylex.props(styles.wakatimeUserIntroBoxText)}>
-            <p>{item.daily}</p>
-            <p {...stylex.props(styles.wakatimeUserIntroBoxTextTime)}>{item.time}</p>
+            <span {...stylex.props(spanClass)}>{item.daily}</span>
+            <span {...stylex.props(styles.wakatimeUserIntroBoxTextTime, spanClass)}>{item.time}</span>
             <button {...stylex.props(styles.wakatimeUserIntroBoxButton)}>Github</button>
           </div>
         </div>

diff --git a/app/wakatime/style.ts b/app/wakatime/style.ts
@@ -56,7 +56,7 @@ export const styles = stylex.create({
   },
   wakatimeUserIntroBoxText: {
     display: "flex",
-    color: "white",
+    color: "black",
   },
   wakatimeUserIntroBoxTextTime: {
     padding: "0px 100px 0px 200px",
@@ -77,6 +77,9 @@ export const styles = stylex.create({
   },
   wakatimeUserIntroTextTime: {
     padding: "0px 200px",
-  }
+  },
+  spanDark: {
+    color: 'white', // Span color in dark mode
+  },
 
 });