offline.html support light theme

2024-12-08 22:38:09 +02:00
parent f273debb87
commit 9748a3c1d2
2 changed files with 51 additions and 9 deletions
@@ -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;
+  }
+}
@@ -3,7 +3,8 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="theme-color" content="#121212" />
+  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+  <meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)" />
  <title>Загрузка… — НаСвязи</title>
  <link rel="stylesheet" href="/css/offline.css" />
 </head>
@@ -85,11 +86,11 @@

  checkConnectionWithServiceWorker().then((isOnline) => {
    if (!isOnline) showOfflineMessage();
-  })
+  });

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.onmessage = (event) => {
-      console.log('onmessage', event.data && event.data.type)
+      console.log('onmessage', event.data && event.data.type);
      if (event.data && event.data.type === 'MAIN_PAGE_READY') {
        location.reload();
      }
@@ -104,7 +105,6 @@
  window.addEventListener('online', handleOnlineStatus);
  addEventListener("offline", showOfflineMessage);

-
  showLoadingMessage();

  document.addEventListener('DOMContentLoaded', () => {
@@ -118,7 +118,6 @@
      console.warn('Service Worker is not available or not controlling this page.');
    }
  });
-
 </script>
 </body>
 </html>