fix: iOS Dark Mode ve Tema Değişimi Düzeltildi

- tailwind.config.js: darkMode: 'class' olarak ayarlandı (iOS sistem tercihi yerine .dark class kullanımı için) - statusbar.rs: Tema değişiminde .dark class ekleme mantığı tüm dark temaları kapsayacak şekilde genişletildi - index.html: Sayfa yüklenirken .dark class ekleyen inline script güncellendi - public/tailwind.css: PostCSS ile yeniden derlendi (nesting düzleştirildi + .dark seçiciler eklendi)
2026-02-11 01:00:04 +03:00
parent 463249982c
commit 87ddd3bb93
4 changed files with 326 additions and 385 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,11 +1,10 @@
 <!doctype html>
 <html>
-    <head>
+
+<head>
    <meta charset="utf-8" />
-        <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
-        />
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>VibeTorrent</title>

    <!-- PWA & Mobile Capable -->
@@ -37,6 +36,13 @@

            var theme = t.toLowerCase();
            document.documentElement.setAttribute("data-theme", theme);
+            // Shadcn dark mode CSS değişkenleri .dark class ile çalışıyor
+            var darkThemes = ["dark", "black", "night", "coffee", "luxury", "business", "dracula", "halloween", "forest", "synthwave", "dim", "nord", "sunset", "cyberpunk", "abyss"];
+            if (darkThemes.indexOf(theme) !== -1) {
+                document.documentElement.classList.add("dark");
+            } else {
+                document.documentElement.classList.remove("dark");
+            }
            if (!localTheme) {
                localStorage.setItem("vibetorrent_theme", "dark");
            }
@@ -79,23 +85,18 @@
            }
        })();
    </script>
-    </head>
+</head>

-    <body style="cursor: pointer;">
-        <div
-            id="app-loading"
-            style="
+<body style="cursor: pointer;">
+    <div id="app-loading" style="
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100vh;
                font-family: sans-serif;
-            "
-        >
-            <div
-                id="app-loading-spinner"
-                style="
+            ">
+        <div id="app-loading-spinner" style="
                    width: 40px;
                    height: 40px;
                    border: 3px solid currentColor;
@@ -103,21 +104,15 @@
                    border-radius: 50%;
                    animation: spin 0.8s linear infinite;
                    opacity: 0.5;
-                "
-            ></div>
-            <div
-                id="app-loading-error"
-                style="display: none; text-align: center; margin-top: 20px; padding: 0 20px"
-            >
+                "></div>
+        <div id="app-loading-error" style="display: none; text-align: center; margin-top: 20px; padding: 0 20px">
            <p style="color: #ef4444; font-weight: bold; margin-bottom: 8px">
                Uygulama yüklenemedi
            </p>
            <p style="font-size: 14px; opacity: 0.7">
                Bağlantınız yavaş olabilir veya bir sistem hatası oluşmuş olabilir.
            </p>
-                <button
-                    onclick="location.reload()"
-                    style="
+            <button onclick="location.reload()" style="
                        margin-top: 16px;
                        padding: 8px 16px;
                        background: #3b82f6;
@@ -126,8 +121,7 @@
                        border-radius: 6px;
                        cursor: pointer;
                        font-weight: 500;
-                    "
-                >
+                    ">
                Sayfayı Yenile
            </button>
        </div>
@@ -152,6 +146,7 @@
        summary {
            list-style: none;
        }
+
        summary::-webkit-details-marker {
            display: none;
        }
@@ -188,7 +183,7 @@
    <!-- Service Worker Registration & PWA Setup -->
    <script>
        // Global Dropdown Closer for iOS/Mobile
-            document.addEventListener('click', function(event) {
+        document.addEventListener('click', function (event) {
            const details = document.querySelectorAll('details[open]');
            details.forEach(detail => {
                // Eğer tıklanan yer bu details'in içinde değilse kapat
@@ -225,5 +220,6 @@
            });
        }
    </script>
-    </body>
+</body>
+
 </html>
--- a/frontend/public/tailwind.css
+++ b/frontend/public/tailwind.css
@@ -3166,217 +3166,161 @@ button:not(#\#):not(#\#), input:where([type="button"], [type="reset"], [type="su
    display: none;
  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:border-blue-800:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:border-blue-800 {
  border-color: rgb(25, 60, 184);
  border-color: var(--color-blue-800);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:border-destructive:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:border-destructive {
  border-color: hsl(0, 84%, 60%);
  border-color: var(--color-destructive);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:border-gray-800:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:border-gray-800 {
  border-color: #1f2937;
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:border-green-800:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:border-green-800 {
  border-color: rgb(1, 102, 48);
  border-color: var(--color-green-800);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:border-red-800:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:border-red-800 {
  border-color: rgb(159, 7, 18);
  border-color: var(--color-red-800);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:border-yellow-800:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:border-yellow-800 {
  border-color: rgb(135, 76, 0);
  border-color: color(display-p3 0.50318 0.30478 0.07554);
  border-color: var(--color-yellow-800);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-blue-900:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-blue-900 {
  background-color: rgb(28, 57, 142);
  background-color: var(--color-blue-900);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-blue-900\/30:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-blue-900\/30 {
  background-color: rgba(28, 57, 142, 0.3);
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-blue-900\/30:not(#\#):not(#\#):not(#\#):not(#\#) {
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-blue-900\/30 {
    background-color: color-mix(in oklab, rgb(28, 57, 142) 30%, transparent);
  }

@supports (color: color-mix(in lch, red, blue)) {
-.dark\:bg-blue-900\/30:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-blue-900\/30 {
      background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
    }
 }
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-gray-800:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-gray-800 {
  background-color: #1f2937;
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-gray-900:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-gray-900 {
  background-color: #111827;
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-green-900:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-green-900 {
  background-color: rgb(13, 84, 43);
  background-color: var(--color-green-900);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-green-900\/30:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-green-900\/30 {
  background-color: rgba(13, 84, 43, 0.3);
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-green-900\/30:not(#\#):not(#\#):not(#\#):not(#\#) {
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-green-900\/30 {
    background-color: color-mix(in oklab, rgb(13, 84, 43) 30%, transparent);
  }

@supports (color: color-mix(in lch, red, blue)) {
-.dark\:bg-green-900\/30:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-green-900\/30 {
      background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent);
    }
 }
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-red-900:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-red-900 {
  background-color: rgb(130, 24, 26);
  background-color: var(--color-red-900);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-red-900\/30:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-red-900\/30 {
  background-color: rgba(130, 24, 26, 0.3);
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-red-900\/30:not(#\#):not(#\#):not(#\#):not(#\#) {
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-red-900\/30 {
    background-color: color-mix(in oklab, rgb(130, 24, 26) 30%, transparent);
  }

@supports (color: color-mix(in lch, red, blue)) {
-.dark\:bg-red-900\/30:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-red-900\/30 {
      background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
    }
 }
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-yellow-900:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-yellow-900 {
  background-color: rgb(115, 62, 10);
  background-color: var(--color-yellow-900);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-yellow-900\/30:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-yellow-900\/30 {
  background-color: rgba(115, 62, 10, 0.3);
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-yellow-900\/30:not(#\#):not(#\#):not(#\#):not(#\#) {
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-yellow-900\/30 {
    background-color: color-mix(in oklab, rgb(115, 62, 10) 30%, transparent);
  }

@supports (color: color-mix(in lch, red, blue)) {
-.dark\:bg-yellow-900\/30:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:bg-yellow-900\/30 {
      background-color: color-mix(in oklab, var(--color-yellow-900) 30%, transparent);
    }
 }
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:text-blue-100:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:text-blue-100 {
  color: rgb(219, 234, 254);
  color: var(--color-blue-100);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:text-blue-400:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:text-blue-400 {
  color: rgb(86, 162, 255);
  color: color(display-p3 0.39744 0.62813 0.99212);
  color: var(--color-blue-400);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:text-blue-500:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:text-blue-500 {
  color: rgb(50, 128, 255);
  color: color(display-p3 0.26642 0.49122 0.98862);
  color: var(--color-blue-500);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:text-gray-100:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:text-gray-100 {
  color: rgb(243, 244, 246);
  color: var(--color-gray-100);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:text-green-100:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:text-green-100 {
  color: rgb(220, 252, 231);
  color: var(--color-green-100);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:text-green-400:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:text-green-400 {
  color: rgb(5, 223, 114);
  color: var(--color-green-400);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:text-green-500:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:text-green-500 {
  color: rgb(0, 198, 90);
  color: color(display-p3 0.30873 0.77475 0.37431);
  color: var(--color-green-500);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:text-red-100:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:text-red-100 {
  color: rgb(255, 226, 226);
  color: var(--color-red-100);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:text-red-400:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:text-red-400 {
  color: rgb(255, 101, 104);
  color: color(display-p3 0.93353 0.43168 0.42349);
  color: var(--color-red-400);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:text-yellow-100:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:text-yellow-100 {
  color: rgb(254, 249, 194);
  color: var(--color-yellow-100);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  .dark\:text-yellow-400:not(#\#):not(#\#):not(#\#):not(#\#) {
+.dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:text-yellow-400 {
  color: rgb(247, 201, 0);
  color: color(display-p3 0.95994 0.79017 0.05852);
  color: var(--color-yellow-400);
-  }
 }
-@media (prefers-color-scheme: dark) {
-  @media (hover: hover) {
-    .dark\:hover\:bg-gray-700:hover:not(#\#):not(#\#):not(#\#):not(#\#) {
+@media (hover: hover) {
+  .dark:not(#\#):not(#\#):not(#\#):not(#\#) .dark\:hover\:bg-gray-700:hover {
    background-color: #374151;
  }
-  }
 }
 .\[\&_p\]\:leading-relaxed:not(#\#):not(#\#):not(#\#):not(#\#) p {
  --tw-leading: var(--leading-relaxed);
--- a/frontend/src/components/layout/statusbar.rs
+++ b/frontend/src/components/layout/statusbar.rs
@@ -44,7 +44,7 @@ pub fn StatusBar() -> impl IntoView {
        if let Some(doc) = document().document_element() {
            let _ = doc.set_attribute("data-theme", &theme);
            // Also set class for Shadcn dark mode support
-            if theme == "dark" || theme == "dracula" || theme == "dim" || theme == "abyss" {
+            if theme == "dark" || theme == "dracula" || theme == "dim" || theme == "abyss" || theme == "sunset" || theme == "cyberpunk" || theme == "nord" || theme == "business" || theme == "night" || theme == "black" || theme == "luxury" || theme == "coffee" || theme == "forest" || theme == "halloween" || theme == "synthwave" {
                let _ = doc.class_list().add_1("dark");
            } else {
                let _ = doc.class_list().remove_1("dark");
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -9,6 +9,7 @@ const cargoRegistry = path.join(

 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: "class",
  content: [
    "./index.html",
    "./src/**/*.{rs,html}",