follow system theme

index.html

@@ -41,7 +41,8 @@
 
     <!-- Additional SEO -->
     <meta name="application-name" content="E-Dir">
-    <meta name="theme-color" content="#ff8c00">
+    <meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)">
+    <meta name="theme-color" content="#f5f5f5" media="(prefers-color-scheme: light)">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

script.js

@@ -301,12 +301,13 @@ function showQrCode(phone) {
     const telUrl = `tel:${phone}`;
     qrTitle.textContent = phone;
     qrContainer.innerHTML = '';
+    const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches;
     new QRCode(qrContainer, {
         text: telUrl,
         width: 200,
         height: 200,
-        colorDark: '#ff8c00',
-        colorLight: '#111111',
+        colorDark: isLightMode ? '#e07800' : '#ff8c00',
+        colorLight: isLightMode ? '#ffffff' : '#111111',
         correctLevel: QRCode.CorrectLevel.H
     });
     qrModal.classList.add('show');

styles.css

@@ -17,6 +17,21 @@
     --error: #ff3333;
 }
 
+@media (prefers-color-scheme: light) {
+    :root {
+        --orange: #e07800;
+        --bg-primary: #f5f5f5;
+        --bg-secondary: #ffffff;
+        --bg-card: #ffffff;
+        --text-primary: #1b1b1b;
+        --text-secondary: #808080;
+        --border: #e0e0e0;
+        --border-hover: #e07800;
+        --success: #00a844;
+        --error: #d32f2f;
+    }
+}
+
 body {
     font-family: 'Roboto', sans-serif;
     background-color: var(--bg-primary);