✨ 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/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