From 4f0194f1dceec8c7aff70c490b5e757aca560e8a Mon Sep 17 00:00:00 2001
From: Giedo Donkers <giedo.donkers@via.nl>
Date: Wed, 30 Nov 2022 15:29:18 +0100
Subject: [PATCH] fix(theme): move background colors to theme-default style
 (#1347)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 .../theme-default/components/VPBackdrop.vue   |  2 +-
 src/client/theme-default/components/VPNav.vue | 21 ++++++----------
 .../theme-default/components/VPNavBar.vue     | 25 ++++++++-----------
 src/client/theme-default/styles/vars.css      |  8 ++++++
 4 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/client/theme-default/components/VPBackdrop.vue b/src/client/theme-default/components/VPBackdrop.vue
index 1aa5d0b14b1..1f72a8583cd 100644
--- a/src/client/theme-default/components/VPBackdrop.vue
+++ b/src/client/theme-default/components/VPBackdrop.vue
@@ -18,7 +18,7 @@ defineProps<{
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-backdrop);
-  background: rgba(0, 0, 0, .6);
+  background: var(--vp-c-bg-backdrop);
   transition: opacity 0.5s;
 }
 
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index 19b7e6399fc..a1a5c70d31c 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -42,22 +42,17 @@ provide('close-screen', closeScreen)
   }
 
   .VPNav.no-sidebar {
-    -webkit-backdrop-filter: saturate(50%) blur(8px);
-    backdrop-filter: saturate(50%) blur(8px);
-    background: rgba(255, 255, 255, 0.7);
+    background: var(--vp-c-bg-alpha-without-backdrop);
   }
 
-  .dark .VPNav.no-sidebar {
-    background: rgba(36, 36, 36, 0.7);
-  }
-
-  @supports not (backdrop-filter: saturate(50%) blur(8px)) {
+  @supports (
+    (backdrop-filter: saturate(50%) blur(8px)) or
+      (-webkit-backdrop-filter: saturate(50%) blur(8px))
+  ) {
     .VPNav.no-sidebar {
-      background: rgba(255, 255, 255, 0.95);
-    }
-
-    .dark .VPNav.no-sidebar {
-      background: rgba(36, 36, 36, 0.95);
+      -webkit-backdrop-filter: saturate(50%) blur(8px);
+      backdrop-filter: saturate(50%) blur(8px);
+      background: var(--vp-c-bg-alpha-with-backdrop);
     }
   }
 }
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index abfbba49575..176d4490bc0 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -70,24 +70,19 @@ const { hasSidebar } = useSidebar()
   }
 
   .VPNavBar.has-sidebar .content {
-    margin-right: -32px;
-    padding-right: 32px;
-    -webkit-backdrop-filter: saturate(50%) blur(8px);
-    backdrop-filter: saturate(50%) blur(8px);
-    background: rgba(255, 255, 255, 0.7);
+    margin-right: -100vw;
+    padding-right: 100vw;
+    background: var(--vp-c-bg-alpha-without-backdrop);
   }
 
-  .dark .VPNavBar.has-sidebar .content {
-    background: rgba(36, 36, 36, 0.7);
-  }
-
-  @supports not (backdrop-filter: saturate(50%) blur(8px)) {
+  @supports (
+    (backdrop-filter: saturate(50%) blur(8px)) or
+      (-webkit-backdrop-filter: saturate(50%) blur(8px))
+  ) {
     .VPNavBar.has-sidebar .content {
-      background: rgba(255, 255, 255, 0.95);
-    }
-
-    .dark .VPNavBar.has-sidebar .content {
-      background: rgba(36, 36, 36, 0.95);
+      -webkit-backdrop-filter: saturate(50%) blur(8px);
+      backdrop-filter: saturate(50%) blur(8px);
+      background: var(--vp-c-bg-alpha-with-backdrop);
     }
   }
 }
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index e7c41ca161e..14e50b40500 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -88,6 +88,11 @@
   --vp-c-bg-mute: var(--vp-c-white-mute);
   --vp-c-bg-alt: var(--vp-c-white-soft);
 
+  --vp-c-bg-alpha-with-backdrop: rgba(255, 255, 255, 0.7);
+  --vp-c-bg-alpha-without-backdrop: rgba(255, 255, 255, 0.95);
+
+  --vp-c-bg-backdrop: rgba(0, 0, 0, 0.6);
+
   --vp-c-divider: var(--vp-c-divider-light-1);
   --vp-c-divider-light: var(--vp-c-divider-light-2);
 
@@ -121,6 +126,9 @@
   --vp-c-bg-mute: var(--vp-c-gray-dark-3);
   --vp-c-bg-alt: var(--vp-c-black);
 
+  --vp-c-bg-alpha-with-backdrop: rgba(36, 36, 36, 0.7);
+  --vp-c-bg-alpha-without-backdrop: rgba(36, 36, 36, 0.95);
+
   --vp-c-divider: var(--vp-c-divider-dark-1);
   --vp-c-divider-light: var(--vp-c-divider-dark-2);