Добавлена кнопка переключения темы и кнопки избранного и прочитанного

src/assets/main.css

@@ -1,8 +1,5 @@
 @import "tailwindcss";
 
-/* Включение dark mode через класс в Tailwind v4 */
-@custom-variant dark (&:where(.dark, .dark *));
-
 /* Базовые стили для светлой темы */
 body {
   background-color: #f3f4f6;

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">
+  <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 class="">
-    <!-- Фиксированный левый блок -->
+      <!-- Фиксированный левый блок -->
-    <div v-if="currentPage === 'rezylt'" class="flex sm:flex-col">
+      <div v-if="currentPage === 'rezylt'" class="flex sm:flex-col">
-      <button
+        <button
-        @click="ValueRezylt"
+          @click="ValueRezylt"
-        class="bg-gray-600 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
+          class="bg-gray-600 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
-      >
+        >
-        Результат
+          Результат
-      </button>
+        </button>
 
-      <button
+        <button
-        @click="ValueSeting"
+          @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"
+          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>
 
-      <button
+        <button
-        @click="Valuestatus"
+          @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"
+          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>
-    </div>
+      </div>
 
-    <div v-if="currentPage === 'setings'" class="flex sm:flex-col">
+      <div v-if="currentPage === 'setings'" class="flex sm:flex-col">
-      <button
+        <button
-        @click="ValueRezylt"
+          @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"
+          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>
 
-      <button
+        <button
-        @click="ValueSeting"
+          @click="ValueSeting"
-        class="bg-gray-600 sm:mt-3 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
+          class="bg-gray-600 sm:mt-3 w-full text-white min-w-30 px-4 py-2 rounded cursor-pointer"
-      >
+        >
-        Настройка
+          Настройка
-      </button>
+        </button>
 
-      <button
+        <button
-        @click="Valuestatus"
+          @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"
+          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>
+      </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>
+</script>

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

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();