From 6579d429de3c1cf9c3b147b5bc1e5cf5b720ef65 Mon Sep 17 00:00:00 2001 From: sameerasw Date: Fri, 11 Apr 2025 10:32:44 +0530 Subject: dark/ light theme --- data-viewer/data-viewer.css | 6 ++++++ data-viewer/data-viewer.html | 3 ++- manifest.json | 1 + popup/popup.css | 26 +++++++------------------ popup/popup.html | 1 + theme.css | 46 ++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 63 insertions(+), 20 deletions(-) create mode 100644 theme.css 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 @@ ZenInternet - Data Viewer + @@ -42,7 +43,7 @@ Back to Extension - +

Danger Zone

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 @@ + 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; + } +} -- cgit v1.2.3