From 7af571e55ae751d1172685ff3d7f0e978f60c294 Mon Sep 17 00:00:00 2001
From: Shihaam Abdul Rahman <shihaam@shihaam.me>
Date: Tue, 24 Mar 2026 10:20:50 +0500
Subject: [PATCH] follow system theme

---
 index.html |  3 ++-
 script.js  |  5 +++--
 styles.css | 15 +++++++++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index fc64959..bb2c0cf 100644
--- a/index.html
+++ b/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">
diff --git a/script.js b/script.js
index 2de8359..084f183 100644
--- a/script.js
+++ b/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');
diff --git a/styles.css b/styles.css
index 85a67c3..b19b938 100644
--- a/styles.css
+++ b/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);