fix(theme): move background colors to theme-default style (#1347)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

Author: gjdonkers

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;
 }
 

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);
     }
   }
 }

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);
     }
   }
 }

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);