✨ add dark mode (#11)

frontend/lecture/src/App.tsx

@@ -1,7 +1,8 @@
 import { CalendarIcon } from '@radix-ui/react-icons';
-import { ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
 import { Link, Route, Routes } from 'react-router-dom';
 
+import { ThemeToggle } from '@/components/ThemeToggle';
 import { Separator } from '@/designsystem/ui/separator';
 import { Home } from '@/pages/home';
 import { Lecture0 } from '@/pages/lecture0';
@@ -116,7 +117,37 @@ export const App = () => {
   );
 };
 
+const useTheme = () => {
+  type Theme = 'light' | 'dark';
+  const themeKey = 'theme';
+
+  const getInitialTheme = (): Theme => {
+    const savedTheme = localStorage.getItem(themeKey);
+    if (savedTheme === 'dark') return 'dark';
+    if (savedTheme === 'light') return 'light';
+
+    if (window.matchMedia('(prefere-color-scheme: dark)').matches)
+      return 'dark';
+
+    return 'light';
+  };
+
+  const [theme, setTheme] = useState<Theme>(getInitialTheme);
+
+  const toggleTheme = () => {
+    window.document.documentElement.classList.remove('light', 'dark');
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    window.document.documentElement.classList.add(newTheme);
+    localStorage.setItem(themeKey, newTheme);
+  };
+
+  return { theme, toggleTheme };
+};
+
 const Sidebar = () => {
+  const { toggleTheme } = useTheme();
+
   return (
     <div className="flex w-52 flex-col py-4 bg-blend-darken">
       <Link to="/">
@@ -130,7 +161,7 @@ const Sidebar = () => {
             ) : (
               <li
                 key={page.path}
-                className="rounded-sm px-4 py-2 hover:bg-slate-200"
+                className="rounded-sm px-4 py-2 transition-colors hover:bg-slate-200 dark:hover:bg-slate-800"
               >
                 <Link to={page.path} className="flex flex-col gap-1">
                   <h3>{page.title}</h3>
@@ -145,6 +176,9 @@ const Sidebar = () => {
           )}
         </ul>
       </nav>
+      <div className="px-4 pt-4">
+        <ThemeToggle toggleTheme={toggleTheme} />
+      </div>
     </div>
   );
 };

frontend/lecture/src/components/ThemeToggle/index.tsx

@@ -0,0 +1,17 @@
+import { MoonIcon, SunIcon } from '@radix-ui/react-icons';
+
+import { Button } from '@/designsystem/ui/button';
+
+export function ThemeToggle({ toggleTheme }: { toggleTheme: () => void }) {
+  return (
+    <Button
+      className="w-full"
+      variant="outline"
+      size="icon"
+      onClick={toggleTheme}
+    >
+      <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    </Button>
+  );
+}

frontend/lecture/src/pages/lecture0/sections/Team.tsx

@@ -18,13 +18,13 @@ export const Team = () => {
         <li>상대가 혹시나 트롤이어도 발목잡히지는 않는 구조</li>
         <li>
           조마다 채널 생성
-          <p className="text-base text-slate-600">
+          <p className="text-base text-slate-500">
             원한다면 개인 DM방도 가능, 단 세미나장 포함 필수
           </p>
         </li>
         <li>
           가능하면 친목이 가능한 형태로 배정
-          <p className="text-base text-slate-600">
+          <p className="text-base text-slate-500">
             학번이 비슷한 사람끼리, 같은 학과 사람끼리 등<br />
             같이 팀을 하고 싶은/싫은 사람이 있다면 미리 DM으로 알려주세요
           </p>