feat: improve dark mode and add language icons

ibidi · ibidi · commit d8d282cf784b · 2025-10-29T16:40:34.000+03:00
🎨 Language Icons:
- Created LanguageIcon component
- Python, JavaScript, Bash, Batch icons
- Icons shown next to language name

🌙 Dark Mode Improvements:
- Full dark mode support on tool detail page
- All sections now properly themed
- Smooth transitions between themes
- Better contrast in dark mode

✨ Syntax Highlighting:
- Added syntax highlighting to example output
- Bash highlighting for terminal output
- Consistent code styling across app

🔧 UI Enhancements:
- Better dark mode colors
- Improved readability
- All text properly themed
diff --git a/app/tool/[id]/page.tsx b/app/tool/[id]/page.tsx
@@ -3,6 +3,9 @@ import { notFound } from 'next/navigation'
 import Link from 'next/link'
 import { ArrowLeft, Terminal, FileCode, Check } from 'lucide-react'
 import CodeModalButton from '@/components/CodeModalButton'
+import LanguageIcon from '@/components/LanguageIcon'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
 export function generateStaticParams() {
   return tools.map((tool) => ({
@@ -43,37 +46,38 @@ export default async function ToolPage({ params }: { params: Promise<{ id: strin
   const category = categories[tool.category]
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-white dark:bg-gray-900">
       <div className="container mx-auto px-4 py-12">
         {/* Back Button */}
         <Link
           href="/"
-          className="inline-flex items-center gap-2 text-gray-600 hover:text-black transition-colors mb-8"
+          className="inline-flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors mb-8"
         >
           <ArrowLeft size={20} />
           Ana Sayfaya Dön
         </Link>
 
         {/* Header */}
-        <div className="bg-white rounded-xl p-4 md:p-8 border-2 border-black mb-8">
+        <div className="bg-white dark:bg-gray-800 rounded-xl p-4 md:p-8 border-2 border-black dark:border-white mb-8">
           <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
             <div className="flex-1">
               <div className="flex items-center gap-3 mb-4">
                 <span className="text-4xl md:text-5xl">{category.icon}</span>
                 <div>
-                  <h1 className="text-2xl md:text-4xl font-bold text-black">{tool.name}</h1>
-                  <p className="text-gray-600 mt-1 md:mt-2 text-sm md:text-base">{category.name}</p>
+                  <h1 className="text-2xl md:text-4xl font-bold text-black dark:text-white">{tool.name}</h1>
+                  <p className="text-gray-600 dark:text-gray-400 mt-1 md:mt-2 text-sm md:text-base">{category.name}</p>
                 </div>
               </div>
-              <p className="text-base md:text-xl text-gray-700">
+              <p className="text-base md:text-xl text-gray-700 dark:text-gray-300">
                 {tool.description}
               </p>
             </div>
             <div className="flex flex-row md:flex-col gap-2">
-              <span className="px-3 md:px-4 py-2 bg-gray-200 text-black rounded-lg text-xs md:text-sm font-medium whitespace-nowrap">
+              <span className="px-3 md:px-4 py-2 bg-gray-200 dark:bg-gray-800 text-black dark:text-white rounded-lg text-xs md:text-sm font-medium whitespace-nowrap flex items-center gap-2">
+                <LanguageIcon language={tool.language} size={16} />
                 {tool.language}
               </span>
-              <span className="px-3 md:px-4 py-2 bg-black text-white rounded-lg text-xs md:text-sm font-medium text-center break-all md:break-normal">
+              <span className="px-3 md:px-4 py-2 bg-black dark:bg-white text-white dark:text-black rounded-lg text-xs md:text-sm font-medium text-center break-all md:break-normal">
                 {tool.fileName}
               </span>
             </div>
@@ -83,49 +87,57 @@ export default async function ToolPage({ params }: { params: Promise<{ id: strin
           <div className="grid md:grid-cols-2 gap-4 mt-6">
             {tool.features.map((feature, i) => (
               <div key={i} className="flex items-start gap-3">
-                <Check className="text-black flex-shrink-0 mt-1" size={20} />
-                <span className="text-gray-700">{feature}</span>
+                <Check className="text-black dark:text-white flex-shrink-0 mt-1" size={20} />
+                <span className="text-gray-700 dark:text-gray-300">{feature}</span>
               </div>
             ))}
           </div>
         </div>
 
         {/* Usage */}
-        <div className="bg-white rounded-xl p-8 border-2 border-black mb-8">
+        <div className="bg-white dark:bg-gray-800 rounded-xl p-8 border-2 border-black dark:border-white mb-8">
           <div className="flex items-center gap-3 mb-4">
-            <Terminal className="text-black" size={24} />
-            <h2 className="text-2xl font-bold text-black">Kullanım</h2>
+            <Terminal className="text-black dark:text-white" size={24} />
+            <h2 className="text-2xl font-bold text-black dark:text-white">Kullanım</h2>
           </div>
-          <div className="bg-black rounded-lg p-4 font-mono text-sm">
+          <div className="bg-black dark:bg-gray-950 rounded-lg p-4 font-mono text-sm">
             <code className="text-green-400">$ {tool.usage}</code>
           </div>
         </div>
 
         {/* Code */}
-        <div className="bg-white rounded-xl p-8 border-2 border-black mb-8">
+        <div className="bg-white dark:bg-gray-800 rounded-xl p-8 border-2 border-black dark:border-white mb-8">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
-              <FileCode className="text-black" size={24} />
-              <h2 className="text-2xl font-bold text-black">Kaynak Kod</h2>
+              <FileCode className="text-black dark:text-white" size={24} />
+              <h2 className="text-2xl font-bold text-black dark:text-white">Kaynak Kod</h2>
             </div>
           </div>
           <CodeModalButton code={tool.code} title={`${tool.name} - Kaynak Kod`} language={tool.language} />
         </div>
 
         {/* Example Output */}
-        <div className="bg-white rounded-xl p-8 border-2 border-black">
+        <div className="bg-white dark:bg-gray-900 rounded-xl p-8 border-2 border-black dark:border-white">
           <div className="flex items-center gap-3 mb-4">
-            <Terminal className="text-black" size={24} />
-            <h2 className="text-2xl font-bold text-black">Örnek Çıktı</h2>
-          </div>
-          <div className="bg-black rounded-lg p-6 font-mono text-sm">
-            <pre className="text-green-400 whitespace-pre-wrap">{tool.example}</pre>
+            <Terminal className="text-black dark:text-white" size={24} />
+            <h2 className="text-2xl font-bold text-black dark:text-white">Örnek Çıktı</h2>
           </div>
+          <SyntaxHighlighter
+            language="bash"
+            style={vscDarkPlus}
+            customStyle={{
+              margin: 0,
+              borderRadius: '0.5rem',
+              fontSize: '0.875rem',
+            }}
+          >
+            {tool.example}
+          </SyntaxHighlighter>
         </div>
 
         {/* Related Tools */}
         <div className="mt-12">
-          <h2 className="text-2xl font-bold text-black mb-6">Benzer Araçlar</h2>
+          <h2 className="text-2xl font-bold text-black dark:text-white mb-6">Benzer Araçlar</h2>
           <div className="grid md:grid-cols-3 gap-6">
             {tools
               .filter(t => t.category === tool.category && t.id !== tool.id)
@@ -134,12 +146,12 @@ export default async function ToolPage({ params }: { params: Promise<{ id: strin
                 <Link
                   key={relatedTool.id}
                   href={`/tool/${relatedTool.id}`}
-                  className="group bg-white rounded-xl p-6 border-2 border-black hover:bg-black hover:text-white transition-all"
+                  className="group bg-white dark:bg-gray-800 rounded-xl p-6 border-2 border-black dark:border-white hover:bg-black dark:hover:bg-white hover:text-white dark:hover:text-black transition-all"
                 >
-                  <h3 className="text-xl font-bold text-black group-hover:text-white mb-2">
+                  <h3 className="text-xl font-bold text-black dark:text-white group-hover:text-white dark:group-hover:text-black mb-2">
                     {relatedTool.name}
                   </h3>
-                  <p className="text-gray-600 group-hover:text-gray-300 text-sm line-clamp-2">
+                  <p className="text-gray-600 dark:text-gray-400 group-hover:text-gray-300 dark:group-hover:text-gray-600 text-sm line-clamp-2">
                     {relatedTool.description}
                   </p>
                 </Link>
diff --git a/components/LanguageIcon.tsx b/components/LanguageIcon.tsx
@@ -0,0 +1,26 @@
+import { Code2, Terminal, FileCode } from 'lucide-react'
+
+interface LanguageIconProps {
+  language: string
+  size?: number
+}
+
+export default function LanguageIcon({ language, size = 20 }: LanguageIconProps) {
+  const icons: Record<string, JSX.Element> = {
+    python: (
+      <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
+        <path d="M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z"/>
+      </svg>
+    ),
+    batch: <Terminal size={size} />,
+    bash: <Terminal size={size} />,
+    javascript: (
+      <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
+        <path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/>
+      </svg>
+    ),
+    other: <Code2 size={size} />,
+  }
+
+  return icons[language.toLowerCase()] || <FileCode size={size} />
+}
