From 2692edefd33cf80e2416ecd38dc7c243197de997 Mon Sep 17 00:00:00 2001
From: Yro Boros <morpex1698@mail.ru>
Date: Tue, 3 Mar 2026 17:12:06 +1000
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B0=20=D0=BF?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D1=82=D0=B5=D0=BC=D1=8B=20=D0=B8=20=D0=BA=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=BF=D0=BA=D0=B8=20=D0=B8=D0=B7=D0=B1=D1=80=D0=B0=D0=BD=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B3=D0=BE=20=D0=B8=20=D0=BF=D1=80=D0=BE=D1=87=D0=B8?=
 =?UTF-8?q?=D1=82=D0=B0=D0=BD=D0=BD=D0=BE=D0=B3=D0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/main.css            |  3 --
 src/components/My_naw.vue      | 93 ++++++++++++++++++----------------
 src/components/Stat.vue        | 31 +++++++++++-
 src/components/ThemeToggle.vue |  3 +-
 4 files changed, 79 insertions(+), 51 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index c52ef8d..6a54645 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,8 +1,5 @@
 @import "tailwindcss";
 
-/* Включение dark mode через класс в Tailwind v4 */
-@custom-variant dark (&:where(.dark, .dark *));
-
 /* Базовые стили для светлой темы */
 body {
   background-color: #f3f4f6;
diff --git a/src/components/My_naw.vue b/src/components/My_naw.vue
index bf322ce..bf7314a 100644
--- a/src/components/My_naw.vue
+++ b/src/components/My_naw.vue
@@ -1,53 +1,56 @@
 <template>
-  <div class=" sticky top-0 w-full sm:w-1/5 sm:h-screen bg-white z-10 pt-5 md:p-5 dark:bg-gray-800">
-    <!-- Переключатель темы -->
-    <ThemeToggle />
-    
-    <!-- Фиксированный левый блок -->
-    <div v-if="currentPage === 'rezylt'" class="flex sm:flex-col">
-      <button
-        @click="ValueRezylt"
-        class="bg-gray-600 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
-      >
-        Результат
-      </button>
+  <div
+    class="sticky top-0 w-full sm:w-1/5 sm:h-screen bg-white z-10 pt-5 md:p-5 dark:bg-gray-800"
+  >
+    <div class="">
+      <!-- Фиксированный левый блок -->
+      <div v-if="currentPage === 'rezylt'" class="flex sm:flex-col">
+        <button
+          @click="ValueRezylt"
+          class="bg-gray-600 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
+        >
+          Результат
+        </button>
 
-      <button
-        @click="ValueSeting"
-        class="bg-gray-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
-      >
-        Настройка
-      </button>
+        <button
+          @click="ValueSeting"
+          class="bg-gray-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
+        >
+          Настройка
+        </button>
 
-      <button
-        @click="Valuestatus"
-        class="bg-gray-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
-      >
-        Избранное
-      </button>
-    </div>
+        <button
+          @click="Valuestatus"
+          class="bg-gray-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
+        >
+          Избранное
+        </button>
+      </div>
 
-    <div v-if="currentPage === 'setings'" class="flex sm:flex-col">
-      <button
-        @click="ValueRezylt"
-        class="bg-gray-300  w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
-      >
-        Результат
-      </button>
+      <div v-if="currentPage === 'setings'" class="flex sm:flex-col">
+        <button
+          @click="ValueRezylt"
+          class="bg-gray-300 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
+        >
+          Результат
+        </button>
 
-      <button
-        @click="ValueSeting"
-        class="bg-gray-600 sm:mt-3 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
-      >
-        Настройка
-      </button>
+        <button
+          @click="ValueSeting"
+          class="bg-gray-600 sm:mt-3 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
+        >
+          Настройка
+        </button>
 
-      <button
-        @click="Valuestatus"
-        class="bg-gray-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
-      >
-        Избранное
-      </button>
+        <button
+          @click="Valuestatus"
+          class="bg-gray-300 sm:mt-3 w-full min-w-30 hover:text-white hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
+        >
+          Избранное
+        </button>
+      </div>
+      <!-- Переключатель темы -->
+      <ThemeToggle />
     </div>
 
     <div v-if="currentPage === 'status'" class="flex sm:flex-col">
@@ -96,4 +99,4 @@ function ValueRezylt() {
 function Valuestatus() {
   emit("update", "status");
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Stat.vue b/src/components/Stat.vue
index 8c2a6f6..77c8879 100644
--- a/src/components/Stat.vue
+++ b/src/components/Stat.vue
@@ -2,6 +2,23 @@
 import { ref, onMounted, onBeforeUnmount } from "vue";
 import axios from "axios";
 
+// Реактивная проверка темной темы
+const isDarkMode = ref(document.documentElement.classList.contains("dark"));
+
+// Следим за изменениями класса dark на html
+onMounted(() => {
+  // Инициализация при загрузке (если класс ещё не установлен)
+  isDarkMode.value = document.documentElement.classList.contains("dark");
+  
+  const observer = new MutationObserver(() => {
+    isDarkMode.value = document.documentElement.classList.contains("dark");
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+});
+
 const props = defineProps({
   url: String,
   parsed_at: String,
@@ -160,10 +177,15 @@ onBeforeUnmount(() => {
             class="h-12 hover:opacity-75 active:opacity-75"
           />
           <img
-            v-else
+            v-else-if="isDarkMode"
             src="https://img.icons8.com/?size=100&id=qliQ29ghmkZh&format=png&color=000000"
             class="h-12 hover:opacity-75 active:opacity-75"
           />
+          <img
+            v-else
+            src="https://img.icons8.com/?size=100&id=KDfrR4UXlVPn&format=png&color=000000"
+            class="h-12 hover:opacity-75 active:opacity-75"
+          />
         </button>
 
         <button class="cursor-pointer" @click="status_b">
@@ -173,10 +195,15 @@ onBeforeUnmount(() => {
             class="h-12 hover:opacity-75 active:opacity-75"
           />
           <img
-            v-else
+            v-else-if="isDarkMode"
             src="https://img.icons8.com/?size=100&id=BmD1kkH92ppy&format=png&color=000000"
             class="h-12 hover:opacity-75 active:opacity-75"
           />
+          <img
+            v-else
+            src="https://img.icons8.com/?size=100&id=wVQaONwgqX8h&format=png&color=000000"
+            class="h-12 hover:opacity-75 active:opacity-75"
+          />
         </button>
       </div>
       <button
diff --git a/src/components/ThemeToggle.vue b/src/components/ThemeToggle.vue
index 25036b9..625ba12 100644
--- a/src/components/ThemeToggle.vue
+++ b/src/components/ThemeToggle.vue
@@ -8,9 +8,10 @@ onMounted(() => {
   // Проверяем localStorage
   const savedTheme = localStorage.getItem("theme");
   if (savedTheme) {
+    // Если есть сохранённая тема - используем её
     isDark.value = savedTheme === "dark";
   } else {
-    // Проверяем системные настройки
+    // Нет сохранённой темы - берём из системных настроек браузера
     isDark.value = window.matchMedia("(prefers-color-scheme: dark)").matches;
   }
   applyTheme();