✨ 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/main.tsx

@@ -8,34 +8,34 @@ import AnimatedLink from '../animatedLink';
 import HeaderToolbar from "../header/toolbar";
 
 export default function MainHeader() {
-    return (
-        <header className="flex flex-col">
-        <div className="flex flex-row mt-12 mb-22">
-          <ul className="w-full flex flex-row justify-between items-baseline list-none">
-            <li className="text-4xl">
-              <AnimatedLink href="https://blog.aderk.tech/en">
-                aderk.tech
-              </AnimatedLink>
-            </li>
+  return (
+    <header className="flex flex-col">
+      <div className="flex flex-row mt-12 mb-22">
+        <ul className="w-full flex flex-row justify-between items-baseline list-none">
+          <li className="text-4xl">
+            <AnimatedLink href="https://blog.aderk.tech/en">
+              aderk.tech
+            </AnimatedLink>
+          </li>
 
-            <li className="text-6xl flex items-center justify-center filter brightness-0 invert">
-              <Link href="#">
-                <Image
-                  src={searchPic}
-                  alt="search"
-                  width={32}
-                  height={32}
-                />
-              </Link>
-            </li>
-          </ul>
-        </div>
-        <div className="text-2xl mb-20">
-          <p className="leading-10">
-            Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like.
-          </p>
-        </div>
-        <HeaderToolbar />
-      </header>
-    );
+          <li className="text-6xl flex items-center justify-center filter brightness-0 invert">
+            <Link href="#">
+              <Image
+                src={searchPic}
+                alt="search"
+                width={32}
+                height={32}
+              />
+            </Link>
+          </li>
+        </ul>
+      </div>
+      <div className="text-2xl mb-20">
+        <p className="leading-10">
+          Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like.
+        </p>
+      </div>
+      <HeaderToolbar />
+    </header>
+  );
 }

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>
+  );
+}

components/header/toolbar.tsx

@@ -1,6 +1,9 @@
 'use client';
 import Image from 'next/image';
 import Link from 'next/link';
+
+import { ThemeSwitcher } from './theme-switcher';
+
 import globePic from '../../public/globe.svg';
 import emailPic from '../../public/email.svg';
 import rssPic from '../../public/rss-feed.svg';
@@ -11,12 +14,13 @@ import AnimatedLink from '../animatedLink';
 
 export default function Toolbar() {
     return (
-        <div className="flex h-24 justify-between items-center border-white border-t border-b">
+        <div className="flex h-24 justify-between items-center border-white light:border-black border-t border-b">
             <div className="flex items-baseline">
                 <p><AnimatedLink href='#'>Science</AnimatedLink> | <AnimatedLink href='#'>Software</AnimatedLink> | <AnimatedLink href='#'>Hardware</AnimatedLink> | <AnimatedLink href='#'>Rockets</AnimatedLink> | <AnimatedLink href='#'>Startups</AnimatedLink></p>
             </div>
             <div className="flex items-baseline">
                 <ul className="inline-flex items-center gap-4">
+                    <ThemeSwitcher />
                     <li className="inline filter brightness-0 invert">
                         <Link href="#">
                             <Image