From 3c2d62cfb7032cf163f842982233b58ec4bd1d28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20=C5=A0arman?= <david@sarman.work>
Date: Fri, 1 Apr 2022 17:06:04 +0200
Subject: [PATCH 1/2] fix: add header background for dark mode

---
 styles/notion.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/notion.css b/styles/notion.css
index 460440d..3567354 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -327,7 +327,7 @@
 }
 
 .dark-mode .notion-header {
-  background: transparent;
+  background: hsla(203, 8%, 20%, 0.8);
   box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
   backdrop-filter: saturate(180%) blur(8px);
 }

From 96702a363178f145c107c09b41490a9d44a0b5b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20=C5=A0arman?= <dsarman@users.noreply.github.com>
Date: Sun, 3 Apr 2022 10:37:01 +0200
Subject: [PATCH 2/2] Add dark mode header background for Firefox only

fix: Added dark mode header background for Firefox to work around it not supporting backdrop-filter
---
 styles/notion.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/styles/notion.css b/styles/notion.css
index 3567354..20285f1 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -327,11 +327,18 @@
 }
 
 .dark-mode .notion-header {
-  background: hsla(203, 8%, 20%, 0.8);
+  background: transparent;
   box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
   backdrop-filter: saturate(180%) blur(8px);
 }
 
+/* Workaround for Firefox not supporting backdrop-filter yet */
+@-moz-document url-prefix() {
+  .dark-mode .notion-header {
+    background: hsla(203, 8%, 20%, 0.8);
+  }
+}
+
 .notion-bookmark:hover {
   border-image: linear-gradient(90.68deg, #b439df 0.26%, #e5337e 102.37%);
   border-image-slice: 1;