сделан переключатель темы

src/App.vue

@@ -3,53 +3,78 @@ import { onMounted, ref, watch } from "vue";
 import My_naw from "./components/My_naw.vue";
 import Section from "./components/Section.vue";
 import Setings from "./components/Setings.vue";
+import Status from "./components/Status.vue";
 import Authe from "./components/Authe.vue";
 import axios from "axios";
+
+// Инициализация темы при загрузке приложения
+onMounted(() => {
+  const savedTheme = localStorage.getItem("theme");
+  if (savedTheme === "dark") {
+    document.documentElement.classList.add("dark");
+  } else if (savedTheme === "light") {
+    document.documentElement.classList.remove("dark");
+  } else {
+    // Проверяем системные настройки
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      document.documentElement.classList.add("dark");
+    }
+  }
+});
+
 // Состояния страницы и данные для входа
 const currentPage = ref("admin-panel");
 const items = ref([]);
+const items_status = ref([]);
 
 // Универсальная функция для получения данных
 const fetchData = async (url, targetRef) => {
   try {
-    const { data } = await axios.get(url)
-    targetRef.value = data
+    const { data } = await axios.get(url);
+    targetRef.value = data;
   } catch (err) {
-    console.error(`Ошибка при получении данных с ${url}:`, err)
+    console.error(`Ошибка при получении данных с ${url}:`, err);
   }
-}
-
+};
 
 // Обертки для вызова
-const loadItems = () => fetchData("http://45.129.78.228:8002/records_all", items) //http://127.0.0.1:8002/records_all http://45.129.78.228:8002/records_all 
+const loadItems = () =>
+  fetchData("http://45.129.78.228:8002/records_all", items); //http://127.0.0.1:8002/records_all http://45.129.78.228:8002/records_all
+const loadItems_status = () =>
+  fetchData("http://127.0.0.1:8002/records_all_status", items_status);
 
 onMounted(() => {
-  loadItems()
-})
+  (loadItems(), loadItems_status());
+});
 
-watch(items, loadItems)
+watch(items, loadItems);
+watch(items_status, loadItems_status);
 
 function handleUpdate(newValue) {
   currentPage.value = newValue; // изменение значения в родителе
 }
 </script>
 
-
 <template>
-  <Authe :currentPage="currentPage" @update="handleUpdate"/>
+  <Authe :currentPage="currentPage" @update="handleUpdate" />
   <div v-if="currentPage === 'rezylt'">
     <div class="sm:flex">
-      
-      <My_naw  :currentPage="currentPage" @update="handleUpdate"/>
-      <Section :items="items"/>
-      
+      <My_naw :currentPage="currentPage" @update="handleUpdate" />
+      <Section :items="items" />
     </div>
   </div>
 
   <div v-if="currentPage === 'setings'">
     <div class="sm:flex">
-        <My_naw  :currentPage="currentPage" @update="handleUpdate"/>
-        <Setings/>
+      <My_naw :currentPage="currentPage" @update="handleUpdate" />
+      <Setings />
+    </div>
+  </div>
+
+  <div v-if="currentPage === 'status'">
+    <div class="sm:flex">
+      <My_naw :currentPage="currentPage" @update="handleUpdate" />
+      <Status :items="items_status" />
     </div>
   </div>
 </template>