6 files changed, 63 insertions, 20 deletions
diff --git a/data-viewer/data-viewer.css b/data-viewer/data-viewer.css
index 7e4d8b3..f16bb00 100644
--- a/data-viewer/data-viewer.css
+++ b/data-viewer/data-viewer.css
@@ -1,4 +1,5 @@
 /* Data Viewer specific styles */
+@import url("../theme.css");
 
 /* General layout adjustments */
 .app-content {
@@ -12,6 +13,11 @@ body {
   min-width: 600px;
 }
 
+/* Apply the logo filter */
+.logo-img {
+  filter: var(--logo-filter);
+}
+
 /* Data section styling */
 .data-section {
   margin-bottom: 24px;
diff --git a/data-viewer/data-viewer.html b/data-viewer/data-viewer.html
index 12af92c..ddc31aa 100644
--- a/data-viewer/data-viewer.html
+++ b/data-viewer/data-viewer.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ZenInternet - Data Viewer</title>
+    <link rel="stylesheet" href="../theme.css">
     <link rel="stylesheet" href="../popup/popup.css">
     <link rel="stylesheet" href="data-viewer.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -42,7 +43,7 @@
                     <i class="fas fa-arrow-left"></i> Back to Extension
                 </button>
             </div>
-            
+
             <div class="danger-zone">
                 <h3 class="danger-title">Danger Zone</h3>
                 <div class="danger-actions">
diff --git a/manifest.json b/manifest.json
index 3872bfc..488f5b5 100644
--- a/manifest.json
+++ b/manifest.json
@@ -38,6 +38,7 @@
     }
   ],
   "web_accessible_resources": [
+    "theme.css",
     "data-viewer/data-viewer.html",
     "data-viewer/data-viewer.js",
     "data-viewer/data-viewer.css",
diff --git a/popup/popup.css b/popup/popup.css
index 73f2b74..d135ec7 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -1,22 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
-
-:root {
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --transition: all 0.2s ease;
-  --shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-  --accent-color: #f98764; /* Subtle Zen-themed orange */
-  --hover-color: #fa9475; /* Lighter hover state */
-  --success-color: #40c057;
-  --warning-color: #fab005;
-  --danger-color: #fa5252;
-  --bg-color: #1e1e2e;
-  --secondary-bg: #2a2a3c;
-  --border-color: #4c4c63;
-  --text-primary: #e2e8f0;
-  --text-secondary: #a0a0b8;
-}
+@import url("../theme.css");
 
 body {
   width: 360px;
@@ -37,7 +20,11 @@ body {
 
 /* Header Styles */
 .app-header {
-  background: linear-gradient(135deg, #2c3e50, #1a2530);
+  background: linear-gradient(
+    135deg,
+    var(--header-bg-start),
+    var(--header-bg-end)
+  );
   color: white;
   padding: 16px 20px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@@ -55,6 +42,7 @@ body {
   width: 32px;
   height: 32px;
   object-fit: contain;
+  filter: var(--logo-filter); /* Apply the logo filter based on theme */
 }
 
 .app-title {
diff --git a/popup/popup.html b/popup/popup.html
index 78515ea..edc9bce 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -4,6 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="../theme.css">
   <link rel="stylesheet" href="popup.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
diff --git a/theme.css b/theme.css
new file mode 100644
index 0000000..08d31fc
--- /dev/null
+++ b/theme.css
@@ -0,0 +1,46 @@
+/* Base theme variables for Zen Internet */
+
+/* Dark theme (default) */
+:root {
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --transition: all 0.2s ease;
+  --shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  --accent-color: #f98764; /* Subtle Zen-themed orange */
+  --hover-color: #fa9475; /* Lighter hover state */
+  --success-color: #40c057;
+  --warning-color: #fab005;
+  --danger-color: #fa5252;
+  --danger-hover-color: #e03444;
+  --bg-color: #1e1e2e;
+  --secondary-bg: #2a2a3c;
+  --border-color: #4c4c63;
+  --text-primary: #e2e8f0;
+  --text-secondary: #a0a0b8;
+  --header-bg-start: #2c3e50;
+  --header-bg-end: #1a2530;
+  --logo-filter: none; /* No filter for logo in dark mode */
+  --danger-bg-color: rgba(220, 53, 69, 0.1);
+  --danger-border-color: rgba(220, 53, 69, 0.3);
+}
+
+/* Light theme */
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg-color: #f5f7fa;
+    --secondary-bg: #e9ecef;
+    --border-color: #ced4da;
+    --text-primary: #343a40;
+    --text-secondary: #6c757d;
+    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    --header-bg-start: #f98764;
+    --header-bg-end: #e77c5d;
+    /* Invert and desaturate logo in light mode */
+    --logo-filter: invert(1) saturate(0);
+    --danger-bg-color: rgba(220, 53, 69, 0.08);
+    --danger-border-color: rgba(220, 53, 69, 0.2);
+    --danger-color: #dc3545;
+    --danger-hover-color: #c82333;
+  }
+}