offline.html support light theme

apps/frontend/public/css/offline.css

@@ -1,11 +1,10 @@
+/* Общие стили */
 body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   margin: 0;
-  background-color: #121212;
-  color: #ffffff;
   font-family: Arial, sans-serif;
 }
 
@@ -16,8 +15,8 @@ body {
 .spinner {
   width: 50px;
   height: 50px;
-  border: 5px solid rgba(255, 255, 255, 0.3);
-  border-top-color: #ffffff;
+  border: 5px solid rgba(0, 0, 0, 0.1);
+  border-top-color: currentColor;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin: 20px auto;
@@ -41,3 +40,47 @@ button {
 button:hover {
   background-color: #0056b3;
 }
+
+/* Светлая тема */
+@media (prefers-color-scheme: light) {
+  body {
+    background-color: #ffffff;
+    color: #000000;
+  }
+
+  .spinner {
+    border-color: rgba(0, 0, 0, 0.1);
+    border-top-color: #000000;
+  }
+
+  button {
+    background-color: #007bff;
+    color: white;
+  }
+
+  button:hover {
+    background-color: #0056b3;
+  }
+}
+
+/* Тёмная тема */
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #121212;
+    color: #ffffff;
+  }
+
+  .spinner {
+    border-color: rgba(255, 255, 255, 0.3);
+    border-top-color: #ffffff;
+  }
+
+  button {
+    background-color: #007bff;
+    color: white;
+  }
+
+  button:hover {
+    background-color: #0056b3;
+  }
+}