feat: refactor theme, add tailwind-scrollbar, and improve UI components

- Removed manual theme switching logic and ThemeProvider
- Installed and configured tailwind-scrollbar plugin
- Updated FileConverter and ConversionOptions to use shadcn Input
- Refactored FontSelector to use shadcn Tabs
- Simplified global styles and adjusted glassmorphic effects

components/layout/AppHeader.tsx

@@ -5,7 +5,6 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Menu, Search, Bell, ChevronRight, Moon, Sun, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { useTheme } from '@/components/providers/ThemeProvider';
 import { cn } from '@/lib/utils/cn';
 import { useSidebar } from './SidebarProvider';
 import Logo from '@/components/Logo';
@@ -23,7 +22,7 @@ export function AppHeader() {
         <nav className="flex items-center text-sm font-medium">
           <Link href="/" className="flex items-center gap-2">
             <Logo size={20} className="lg:hidden" />
-            <span className="font-medium transition-colors text-foreground">
+            <span className="font-medium transition-colors text-muted-foreground">
               Kit
             </span>
           </Link>
@@ -37,7 +36,7 @@ export function AppHeader() {
                 <Link 
                   href={href}
                   className={cn(
-                    "capitalize transition-colors text-foreground",
+                    "capitalize transition-colors text-muted-foreground",
                     isLast ? "font-semibold" : "font-medium"
                   )}
                 >
@@ -50,7 +49,6 @@ export function AppHeader() {
       </div>
 
       <div className="flex items-center gap-2">
-        <ThemeToggleComponent />
         <Button 
           variant="ghost" 
           size="icon" 
@@ -62,24 +60,4 @@ export function AppHeader() {
       </div>
     </header>
   );
-}
-
-function ThemeToggleComponent() {
-  const { resolvedTheme, setTheme } = useTheme();
-  
-  return (
-    <Button 
-      variant="ghost" 
-      size="icon"
-      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
-      className="text-muted-foreground hover:text-foreground hover:bg-accent/50"
-      title={`Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}
-    >
-      {resolvedTheme === 'dark' ? (
-        <Sun className="h-5 w-5" />
-      ) : (
-        <Moon className="h-5 w-5" />
-      )}
-    </Button>
-  );
-}
+}