chore: FRON-55 Theme toggler using local storage

src/components/ThemeToggler.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { MoonIcon, SunIcon } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+
+export const ThemeSwitcher = () => {
+  const [darkMode, setDarkMode] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const isDarkMode = localStorage.getItem('darkMode') === 'true';
+    setDarkMode(isDarkMode);
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (mounted) {
+      document.documentElement.classList.toggle('dark', darkMode);
+      localStorage.setItem('darkMode', darkMode.toString());
+    }
+  }, [mounted, darkMode]);
+
+  const toggleDarkMode = () => {
+    setDarkMode((prevMode) => !prevMode);
+  };
+
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className='rounded-md bg-gray-800 px-4 py-2 text-white'
+    >
+      {darkMode ? <MoonIcon /> : <SunIcon />}
+    </button>
+  );
+};

src/components/TopNav/index.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link';
 
 import { MainNav } from './MainNav';
 import { ServerStatus } from './ServerStatus';
+import { ThemeSwitcher } from '../ThemeToggler';
 
 export * from './MainNav';
 export * from './UserNav';
@@ -27,6 +28,7 @@ export const TopNav = () => {
       {/* Sidelined for v2 */}
       <div className='ml-auto flex items-center space-x-4'>
         <ServerStatus />
+        <ThemeSwitcher />
         {/* <UserNav /> */}
       </div>
     </div>