✨ feat: Implement theme switcher in header

This commit introduces a theme switcher component in the header, allowing users to toggle between light and dark modes. The changes include:

- Added a new `ThemeSwitcher` component in `components/header/theme-switcher.tsx` that handles the theme switching logic and UI.
- Integrated the `ThemeSwitcher` component into the `HeaderToolbar` component.
- Updated the global CSS file (`app/globals.css`) to include styles for the light mode.
- Initialized the theme based on user's previous preference or system preference.
- Saved the user's theme preference in the browser's local storage for persistence.

These changes provide a better user experience by allowing users to switch between light and dark modes, which can improve readability and accessibility, especially in different lighting conditions.

components/header/theme-switcher.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import moonPic from '@/public/moon.svg';
+import sunPic from '@/public/sun.svg';
+
+export function ThemeSwitcher() {
+  const [isLightMode, setIsLightMode] = useState(false);
+
+  // Initialize theme from localStorage or system preference
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('theme');
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    if (savedTheme === 'light' || (!savedTheme && !systemPrefersDark)) {
+      setIsLightMode(true);
+      document.documentElement.classList.add('light');
+    }
+  }, []);
+
+  // Toggle theme and save preference
+  const toggleTheme = () => {
+    const newLightMode = !isLightMode;
+    setIsLightMode(newLightMode);
+    
+    if (newLightMode) {
+      document.documentElement.classList.add('light');
+      localStorage.setItem('theme', 'light');
+    } else {
+      document.documentElement.classList.remove('light');
+      localStorage.setItem('theme', 'dark');
+    }
+  };
+
+  return (
+    <li className="theme-switcher inline">
+      <Link href="#" onClick={toggleTheme} className="block p-2">
+        <Image
+          src={isLightMode ? moonPic : sunPic}
+          alt={isLightMode ? 'Switch to dark mode' : 'Switch to light mode'}
+          width={32}
+          height={32}
+          className={`transition-all duration-300 ${isLightMode ? 'filter brightness-0 invert' : 'filter-none'}`}
+        />
+      </Link>
+    </li>
+  );
+}