refactor: clean up css variable

src/client/theme-default/components/VPDoc.vue

@@ -139,7 +139,7 @@ const pageName = computed(() => {
   z-index: 10;
   width: 100%;
   height: 64px;
-  background: linear-gradient(transparent, var(--vp-c-bg-content));
+  background: linear-gradient(transparent, var(--vp-c-bg));
 }
 
 .aside-content {

src/client/theme-default/components/VPFooter.vue

@@ -21,7 +21,7 @@ const { hasSidebar } = useSidebar()
   z-index: var(--vp-z-index-footer);
   border-top: 1px solid var(--vp-c-divider-light);
   padding: 32px 24px;
-  background-color: var(--vp-c-bg-content);
+  background-color: var(--vp-c-bg);
 }
 
 .VPFooter.has-sidebar {

src/client/theme-default/components/VPHomeSponsors.vue

@@ -50,7 +50,7 @@ defineProps<{
 .VPHomeSponsors {
   border-top: 1px solid var(--vp-c-divider-light);
   padding: 88px 24px 96px;
-  background-color: var(--vp-c-bg-content);
+  background-color: var(--vp-c-bg);
 }
 
 .container {

src/client/theme-default/components/VPLocalNav.vue

@@ -45,7 +45,7 @@ function scrollToTop() {
   justify-content: space-between;
   border-bottom: 1px solid var(--vp-c-divider-light);
   width: 100%;
-  background-color: var(--vp-c-bg-content);
+  background-color: var(--vp-c-bg);
   transition: border-color 0.5s, background-color 0.5s;
 }
 

src/client/theme-default/components/VPNavBarSearch.vue

@@ -161,12 +161,12 @@ function load() {
     padding: 0 10px 0 12px;
     width: 100%;
     height: 40px;
-    background-color: var(--vp-c-bg-sidebar);
+    background-color: var(--vp-c-bg-alt);
   }
 
   .DocSearch-Button:hover {
     border-color: var(--vp-c-brand);
-    background: var(--vp-c-bg-sidebar);
+    background: var(--vp-c-bg-alt);
   }
 }
 

src/client/theme-default/components/VPNavBarTitle.vue

@@ -25,7 +25,7 @@ const { hasSidebar } = useSidebar()
     margin-right: 32px;
     width: calc(var(--vp-sidebar-width) - 64px);
     border-bottom: 1px solid var(--vp-c-divider-light);
-    background-color: var(--vp-c-bg-sidebar);
+    background-color: var(--vp-c-bg-alt);
   }
 }
 

src/client/theme-default/components/VPSidebar.vue

@@ -80,7 +80,7 @@ watchPostEffect(async () => {
     width: var(--vp-sidebar-width);
     max-width: 100%;
     width: var(--vp-sidebar-width);
-    background-color: var(--vp-c-bg-sidebar);
+    background-color: var(--vp-c-bg-alt);
     opacity: 1;
     visibility: visible;
     box-shadow: none;

src/client/theme-default/styles/base.css

@@ -20,7 +20,7 @@ body {
   font-size: 16px;
   font-weight: 400;
   color: var(--vp-c-text-1);
-  background-color: var(--vp-c-bg-content);
+  background-color: var(--vp-c-bg);
   direction: ltr;
   font-synthesis: none;
   text-rendering: optimizeLegibility;

src/client/theme-default/styles/vars.css

@@ -77,12 +77,9 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  /* TODO: Clean these styles up */
   --vp-c-bg: var(--vp-c-white);
   --vp-c-bg-soft: var(--vp-c-white-soft);
   --vp-c-bg-mute: var(--vp-c-white-mute);
-  --vp-c-bg-content: var(--vp-c-white);
-  --vp-c-bg-sidebar: var(--vp-c-white-soft);
   --vp-c-bg-alt: var(--vp-c-white-soft);
 
   --vp-c-divider: var(--vp-c-divider-light-1);
@@ -113,12 +110,9 @@
 }
 
 .dark {
-  /* TODO: Clean these styles up */
-  --vp-c-bg: var(--vp-c-black);
-  --vp-c-bg-soft: var(--vp-c-black-soft);
-  --vp-c-bg-mute: var(--vp-c-black-mute);
-  --vp-c-bg-content: var(--vp-c-black-soft);
-  --vp-c-bg-sidebar: var(--vp-c-black);
+  --vp-c-bg: var(--vp-c-black-soft);
+  --vp-c-bg-soft: var(--vp-c-black-mute);
+  --vp-c-bg-mute: var(--vp-c-gray-dark-4);
   --vp-c-bg-alt: var(--vp-c-black);
 
   --vp-c-divider: var(--vp-c-divider-dark-1);