feat(theme): added CSS var for body bg

jd-solanki · jd-solanki · commit 4073c1c0c384 · 2023-03-30T22:24:51.000+05:30
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
@@ -2,7 +2,7 @@
 :root {
 
   /* Background colors */
-  --vp-background: #f5f4f4;
+  --vp-background: hsl(var(--a-body-bg-c));
   --vp-c-bg: var(--vp-background);
   --vp-c-bg-alt: var(--vp-background);
   --vp-sidebar-bg-color: var(--vp-background);
@@ -148,7 +148,6 @@
 ========================== */
 
 :root.dark {
-  --vp-background: hsl(var(--a-primary-hue), 15%, 5%);
   --vp-c-bg-alt: var(--vp-background);
   --vp-code-line-highlight-color: hsl(0, 0%, 12%);
 }
diff --git a/packages/anu-vue/auto-imports.d.ts b/packages/anu-vue/auto-imports.d.ts
@@ -97,13 +97,10 @@ declare global {
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
-  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
-  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
-  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
@@ -189,8 +186,6 @@ declare global {
   const useOnline: typeof import('@vueuse/core')['useOnline']
   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
   const useParallax: typeof import('@vueuse/core')['useParallax']
-  const useParentElement: typeof import('@vueuse/core')['useParentElement']
-  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
   const usePermission: typeof import('@vueuse/core')['usePermission']
   const usePointer: typeof import('@vueuse/core')['usePointer']
   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
@@ -256,10 +251,8 @@ declare global {
   const watchArray: typeof import('@vueuse/core')['watchArray']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
   const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
-  const watchDeep: typeof import('@vueuse/core')['watchDeep']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
-  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
   const watchOnce: typeof import('@vueuse/core')['watchOnce']
   const watchPausable: typeof import('@vueuse/core')['watchPausable']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
diff --git a/packages/anu-vue/src/plugin.ts b/packages/anu-vue/src/plugin.ts
@@ -35,7 +35,9 @@ const configDefaults: PluginOptions = {
         warning: '42.4, 100%, 50%',
         danger: '358.3, 100%, 64.9%',
       },
-      cssVars: {},
+      cssVars: {
+        'body-bg-c': '0,4.8%,95.9%',
+      },
     },
     dark: {
       class: 'dark',
@@ -46,7 +48,9 @@ const configDefaults: PluginOptions = {
         warning: '42.4, 73%, 50%',
         danger: '358.3, 73%, 64.9%',
       },
-      cssVars: {},
+      cssVars: {
+        'body-bg-c': 'var(--a-primary-hue), 15%, 5%',
+      },
     },
   },
 }
diff --git a/packages/preset-theme-default/src/scss/index.scss b/packages/preset-theme-default/src/scss/index.scss
@@ -91,6 +91,7 @@ $header-font-family: $body-font-family;
 // 👉 Typography
 
 body {
+  background-color: hsl(var(--a-body-bg-c));
   color: $body-color;
 
   // Disable mobile tap blue color
