prvi kod za live uporabu

frontend/src/components/ui/ThemeToggle.jsx

@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'preact/hooks';
+
+export default function ThemeToggle() {
+    const [isDark, setIsDark] = useState(false);
+
+    useEffect(() => {
+        const imaDarkKlasu = document.documentElement.classList.contains('dark');
+        setIsDark(imaDarkKlasu);
+    }, []);
+
+    const toggleTheme = () => {
+        if (document.documentElement.classList.contains('dark')) {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+            setIsDark(false);
+        } else {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+            setIsDark(true);
+        }
+    };
+
+    return (
+        <button
+            onClick={toggleTheme}
+            type="button"
+            className="p-2.5 rounded-s-xl bg-canvas-elevated border-y border-s border-border-hairline text-text-muted hover:text-text-main transition-all duration-200 focus:outline-none cursor-pointer flex items-center justify-center"
+            aria-label="Prebaci temu"
+        >
+            {isDark ? (
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M12 7a5 5 0 100 10 5 5 0 000-10z"></path>
+                </svg>
+            ) : (
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 118.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+                </svg>
+            )}
+        </button>
+    );
+}