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

app/globals.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-:root {
+/* :root {
   --background: #ffffff;
   --foreground: #171717;
 }
@@ -10,10 +10,14 @@
     --background: #0a0a0a;
     --foreground: #ededed;
   }
-}
+} */
 
 body {
   color: var(--foreground);
   background: var(--background);
   font-family: "JetBrains Mono", monospace;
 }
+
+.light {
+  @apply bg-black text-white;
+}