Add Serbian translations and dark mode support

- Translated all UI text to Serbian
- Added dark mode toggle with system preference support
- Fixed text contrast on colored table rows
- Added dark mode styles throughout the app

src/components/ColorCell.tsx

@@ -8,18 +8,15 @@ interface ColorCellProps {
 export const ColorCell: React.FC<ColorCellProps> = ({ colorName }) => {
   const colorMapping = getFilamentColor(colorName);
   const style = getColorStyle(colorMapping);
-  const textColor = Array.isArray(colorMapping.hex) 
-    ? '#000000' 
-    : getContrastColor(colorMapping.hex);
 
   return (
     <div className="flex items-center gap-2">
       <div 
-        className="w-6 h-6 rounded border border-gray-300"
+        className="w-6 h-6 rounded border border-gray-300 dark:border-gray-600"
         style={style}
         title={Array.isArray(colorMapping.hex) ? colorMapping.hex.join(' - ') : colorMapping.hex}
       />
-      <span style={{ color: textColor }}>{colorName}</span>
+      <span>{colorName}</span>
     </div>
   );
 };

src/components/FilamentTable.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { Filament } from '../types/filament';
 import { ColorCell } from './ColorCell';
-import { getFilamentColor, getColorStyle } from '../data/bambuLabColors';
+import { getFilamentColor, getColorStyle, getContrastColor } from '../data/bambuLabColors';
 
 interface FilamentTableProps {
   filaments: Filament[];
@@ -47,15 +47,15 @@ export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading
   if (loading) {
     return (
       <div className="flex justify-center items-center h-64">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-gray-100"></div>
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-        Error: {error}
+      <div className="bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-600 text-red-700 dark:text-red-200 px-4 py-3 rounded">
+        Greška: {error}
       </div>
     );
   }
@@ -65,52 +65,55 @@ export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading
       <div className="mb-4">
         <input
           type="text"
-          placeholder="Search filaments..."
+          placeholder="Pretraži filamente..."
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
-          className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
         />
       </div>
       
       <div className="overflow-x-auto">
-        <table className="min-w-full bg-white border border-gray-300">
+        <table className="min-w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700">
           <thead>
-            <tr className="bg-gray-100">
+            <tr className="bg-gray-100 dark:bg-gray-700">
               <th 
-                className="px-4 py-2 border-b cursor-pointer hover:bg-gray-200"
+                className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
                 onClick={() => handleSort('brand')}
               >
-                Brand {sortField === 'brand' && (sortOrder === 'asc' ? '↑' : '↓')}
+                Brend {sortField === 'brand' && (sortOrder === 'asc' ? '↑' : '↓')}
               </th>
               <th 
-                className="px-4 py-2 border-b cursor-pointer hover:bg-gray-200"
+                className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
                 onClick={() => handleSort('tip')}
               >
                 Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')}
               </th>
               <th 
-                className="px-4 py-2 border-b cursor-pointer hover:bg-gray-200"
+                className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
                 onClick={() => handleSort('finish')}
               >
-                Finish {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
+                Završna obrada {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
               </th>
               <th 
-                className="px-4 py-2 border-b cursor-pointer hover:bg-gray-200"
+                className="px-4 py-2 border-b dark:border-gray-600 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100"
                 onClick={() => handleSort('boja')}
               >
                 Boja {sortField === 'boja' && (sortOrder === 'asc' ? '↑' : '↓')}
               </th>
-              <th className="px-4 py-2 border-b">Refill</th>
-              <th className="px-4 py-2 border-b">Vakum</th>
-              <th className="px-4 py-2 border-b">Otvoreno</th>
-              <th className="px-4 py-2 border-b">Količina</th>
-              <th className="px-4 py-2 border-b">Cena</th>
+              <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Refill</th>
+              <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Vakum</th>
+              <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Otvoreno</th>
+              <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Količina</th>
+              <th className="px-4 py-2 border-b dark:border-gray-600 text-gray-900 dark:text-gray-100">Cena</th>
             </tr>
           </thead>
           <tbody>
             {filteredAndSortedFilaments.map((filament, index) => {
               const colorMapping = getFilamentColor(filament.boja);
               const rowStyle = getColorStyle(colorMapping);
+              const textColor = Array.isArray(colorMapping.hex) 
+                ? '#000000' 
+                : getContrastColor(colorMapping.hex);
               
               return (
                 <tr 
@@ -118,20 +121,21 @@ export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading
                   className="hover:opacity-90 transition-opacity"
                   style={{
                     ...rowStyle,
-                    opacity: 0.8
+                    opacity: 0.8,
+                    color: textColor
                   }}
                 >
-                  <td className="px-4 py-2 border-b">{filament.brand}</td>
-                  <td className="px-4 py-2 border-b">{filament.tip}</td>
-                  <td className="px-4 py-2 border-b">{filament.finish}</td>
-                  <td className="px-4 py-2 border-b">
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.brand}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.tip}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.finish}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">
                     <ColorCell colorName={filament.boja} />
                   </td>
-                  <td className="px-4 py-2 border-b">{filament.refill}</td>
-                  <td className="px-4 py-2 border-b">{filament.vakum}</td>
-                  <td className="px-4 py-2 border-b">{filament.otvoreno}</td>
-                  <td className="px-4 py-2 border-b">{filament.kolicina}</td>
-                  <td className="px-4 py-2 border-b">{filament.cena}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.refill}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.vakum}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.otvoreno}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.kolicina}</td>
+                  <td className="px-4 py-2 border-b dark:border-gray-700">{filament.cena}</td>
                 </tr>
               );
             })}
@@ -139,8 +143,8 @@ export const FilamentTable: React.FC<FilamentTableProps> = ({ filaments, loading
         </table>
       </div>
       
-      <div className="mt-4 text-sm text-gray-600">
-        Showing {filteredAndSortedFilaments.length} of {filaments.length} filaments
+      <div className="mt-4 text-sm text-gray-600 dark:text-gray-400">
+        Prikazano {filteredAndSortedFilaments.length} od {filaments.length} filamenata
       </div>
     </div>
   );