diff --git a/packages/ui-vue/docs/.vitepress/farris-theme/components/VPContent.vue b/packages/ui-vue/docs/.vitepress/farris-theme/components/VPContent.vue
index e6d27b2..8a67a6d 100644
--- a/packages/ui-vue/docs/.vitepress/farris-theme/components/VPContent.vue
+++ b/packages/ui-vue/docs/.vitepress/farris-theme/components/VPContent.vue
@@ -1,85 +1,85 @@
 <script setup lang="ts">
-import { useRoute, useData } from "vitepress";
-import { useCopyCode } from "../composables/copy-code.js";
-import { useSidebar } from "../composables/sidebar.js";
-import Theme from "@theme/index";
-import VPPage from "./VPPage.vue";
-import VPHome from "./VPHome.vue";
-import VPDoc from "./VPDoc.vue";
+import { useRoute, useData } from 'vitepress';
+import { useCopyCode } from '../composables/copy-code.js';
+import { useSidebar } from '../composables/sidebar.js';
+import Theme from '@theme/index';
+import VPPage from './VPPage.vue';
+import VPHome from './VPHome.vue';
+import VPDoc from './VPDoc.vue';
 
 const route = useRoute();
 const { frontmatter } = useData();
 const { hasSidebar } = useSidebar();
 
-const NotFound = Theme.NotFound || (() => "404 Not Found");
+const NotFound = Theme.NotFound || (() => '404 Not Found');
 
 useCopyCode();
 </script>
 
 <template>
-  <div
-    class="VPContent"
-    id="VPContent"
-    :class="{
-      'has-sidebar': hasSidebar,
-      'is-home': frontmatter.layout === 'home',
-    }"
-  >
-    <NotFound v-if="route.component === NotFound" />
+    <div
+        class="VPContent"
+        id="VPContent"
+        :class="{
+            'has-sidebar': hasSidebar,
+            'is-home': frontmatter.layout === 'home'
+        }"
+    >
+        <NotFound v-if="route.component === NotFound" />
 
-    <VPPage v-else-if="frontmatter.layout === 'page'" />
+        <VPPage v-else-if="frontmatter.layout === 'page'" />
 
-    <VPHome v-else-if="frontmatter.layout === 'home'">
-      <template #home-hero-before><slot name="home-hero-before" /></template>
-      <template #home-hero-after><slot name="home-hero-after" /></template>
-      <template #home-features-before><slot name="home-features-before" /></template>
-      <template #home-features-after><slot name="home-features-after" /></template>
-    </VPHome>
+        <VPHome v-else-if="frontmatter.layout === 'home'">
+            <template #home-hero-before><slot name="home-hero-before" /></template>
+            <template #home-hero-after><slot name="home-hero-after" /></template>
+            <template #home-features-before><slot name="home-features-before" /></template>
+            <template #home-features-after><slot name="home-features-after" /></template>
+        </VPHome>
 
-    <VPDoc v-else>
-      <template #doc-footer-before><slot name="doc-footer-before" /></template>
-      <template #doc-before><slot name="doc-before" /></template>
-      <template #doc-after><slot name="doc-after" /></template>
+        <VPDoc v-else>
+            <template #doc-footer-before><slot name="doc-footer-before" /></template>
+            <template #doc-before><slot name="doc-before" /></template>
+            <template #doc-after><slot name="doc-after" /></template>
 
-      <template #aside-top><slot name="aside-top" /></template>
-      <template #aside-outline-before><slot name="aside-outline-before" /></template>
-      <template #aside-outline-after><slot name="aside-outline-after" /></template>
-      <template #aside-ads-before><slot name="aside-ads-before" /></template>
-      <template #aside-ads-after><slot name="aside-ads-after" /></template>
-      <template #aside-bottom><slot name="aside-bottom" /></template>
-    </VPDoc>
-  </div>
+            <template #aside-top><slot name="aside-top" /></template>
+            <template #aside-outline-before><slot name="aside-outline-before" /></template>
+            <template #aside-outline-after><slot name="aside-outline-after" /></template>
+            <template #aside-ads-before><slot name="aside-ads-before" /></template>
+            <template #aside-ads-after><slot name="aside-ads-after" /></template>
+            <template #aside-bottom><slot name="aside-bottom" /></template>
+        </VPDoc>
+    </div>
 </template>
 
 <style scoped>
 .VPContent {
-  flex-grow: 1;
-  flex-shrink: 0;
-  margin: 0 auto;
-  width: 100%;
+    flex-grow: 1;
+    flex-shrink: 0;
+    margin: 0 auto;
+    width: 100%;
 }
 
 .VPContent.is-home {
-  width: 100%;
-  max-width: 100%;
+    width: 100%;
+    max-width: 100%;
 }
 
 @media (min-width: 960px) {
-  .VPContent {
-    padding-top: var(--vp-nav-height);
-  }
+    .VPContent {
+        padding-top: var(--vp-nav-height);
+    }
 
-  .VPContent.has-sidebar {
-    margin: 0;
-    padding-left: var(--vp-sidebar-width);
-    background-color: rgba(255, 255, 255, 0.7);
-  }
+    .VPContent.has-sidebar {
+        margin: 0;
+        padding-left: var(--vp-sidebar-width);
+        /* background-color: rgba(255, 255, 255, 0.7); */
+    }
 }
 
 @media (min-width: 1440px) {
-  .VPContent.has-sidebar {
-    /* padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
+    .VPContent.has-sidebar {
+        /* padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
     padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)); */
-  }
+    }
 }
 </style>
diff --git a/packages/ui-vue/docs/.vitepress/farris-theme/components/VPHomeFeatures.vue b/packages/ui-vue/docs/.vitepress/farris-theme/components/VPHomeFeatures.vue
index bfe62c2..82e1419 100644
--- a/packages/ui-vue/docs/.vitepress/farris-theme/components/VPHomeFeatures.vue
+++ b/packages/ui-vue/docs/.vitepress/farris-theme/components/VPHomeFeatures.vue
@@ -1,293 +1,293 @@
 <script setup lang="ts">
-import { useData } from "vitepress";
-import VPFeatures from "./VPFeatures.vue";
+import { useData } from 'vitepress';
+import VPFeatures from './VPFeatures.vue';
 
 const { frontmatter: fm } = useData();
 </script>
 
 <template>
-  <div class="f-feature">
-    <div class="f-feature-subtitle">快速上手</div>
-    <div class="f-feature-title">灵活丰富的生态平台</div>
-    <div class="f-feature-container">
-      <div class="f-feature-item">
-        <div class="f-feature-item-icon">
-          <img src="/assets/efficiency.png" />
+    <div class="f-feature">
+        <div class="f-feature-subtitle">快速上手</div>
+        <div class="f-feature-title">灵活丰富的生态平台</div>
+        <div class="f-feature-container">
+            <div class="f-feature-item">
+                <div class="f-feature-item-icon">
+                    <img src="/assets/efficiency.png" />
+                </div>
+                <div class="f-feature-item-content">
+                    <div class="f-feature-item-title"><span>e</span>fficiency 高效</div>
+                    <div class="f-feature-item-subtitle">快速、高效、智能极致体验</div>
+                </div>
+            </div>
+            <div class="f-feature-item">
+                <div class="f-feature-item-icon">
+                    <img src="/assets/clarity.png" />
+                </div>
+                <div class="f-feature-item-content">
+                    <div class="f-feature-item-title"><span>c</span>larity 清晰</div>
+                    <div class="f-feature-item-subtitle">清晰的指向亦是效率的提升</div>
+                </div>
+            </div>
+            <div class="f-feature-item">
+                <div class="f-feature-item-icon">
+                    <img src="/assets/consistency.png" />
+                </div>
+                <div class="f-feature-item-content">
+                    <div class="f-feature-item-title"><span>c</span>onsistency 一致</div>
+                    <div class="f-feature-item-subtitle">多终端一致亦是丝滑体验</div>
+                </div>
+            </div>
+            <div class="f-feature-item">
+                <div class="f-feature-item-icon">
+                    <img src="/assets/beauty.png" />
+                </div>
+                <div class="f-feature-item-content">
+                    <div class="f-feature-item-title"><span>b</span>eauty 美观</div>
+                    <div class="f-feature-item-subtitle">优雅的表现手法提升质感</div>
+                </div>
+            </div>
         </div>
-        <div class="f-feature-item-content">
-          <div class="f-feature-item-title"><span>e</span>fficiency 高效</div>
-          <div class="f-feature-item-subtitle">快速、高效、智能极致体验</div>
-        </div>
-      </div>
-      <div class="f-feature-item">
-        <div class="f-feature-item-icon">
-          <img src="/assets/clarity.png" />
-        </div>
-        <div class="f-feature-item-content">
-          <div class="f-feature-item-title"><span>c</span>larity 清晰</div>
-          <div class="f-feature-item-subtitle">清晰的指向亦是效率的提升</div>
-        </div>
-      </div>
-      <div class="f-feature-item">
-        <div class="f-feature-item-icon">
-          <img src="/assets/consistency.png" />
-        </div>
-        <div class="f-feature-item-content">
-          <div class="f-feature-item-title"><span>c</span>onsistency 一致</div>
-          <div class="f-feature-item-subtitle">多终端一致亦是丝滑体验</div>
-        </div>
-      </div>
-      <div class="f-feature-item">
-        <div class="f-feature-item-icon">
-          <img src="/assets/beauty.png" />
-        </div>
-        <div class="f-feature-item-content">
-          <div class="f-feature-item-title"><span>b</span>eauty 美观</div>
-          <div class="f-feature-item-subtitle">优雅的表现手法提升质感</div>
-        </div>
-      </div>
     </div>
-  </div>
-  <div class="f-news">
-    <div class="f-news-container">
-      <div class="f-news-container-row">
-        <div class="f-news-card">
-          <div class="f-news-card-hero">
-            <div id="f-card-01">
-              <img src="/assets/Pro.svg" />
+    <div class="f-news">
+        <div class="f-news-container">
+            <div class="f-news-container-row">
+                <div class="f-news-card">
+                    <div class="f-news-card-hero">
+                        <div id="f-card-01">
+                            <img src="/assets/Pro.svg" />
+                        </div>
+                    </div>
+                    <div class="f-news-card-title">
+                        <a href="/components/">Farris UI 通用组件</a>
+                    </div>
+                    <div class="f-news-card-content">适用于桌面端应用的通用组件库</div>
+                </div>
+                <div class="f-news-card">
+                    <div class="f-news-card-hero">
+                        <div id="f-card-02">
+                            <img src="/assets/Mobile.svg" />
+                        </div>
+                    </div>
+                    <div class="f-news-card-title">
+                        <a href="/mobiles/">Farris UI Mobile 组件</a>
+                    </div>
+                    <div class="f-news-card-content">移动端应用组件库</div>
+                </div>
+                <div class="f-news-card">
+                    <div class="f-news-card-hero">
+                        <div id="f-card-03">
+                            <img src="/assets/Pro.svg" />
+                        </div>
+                    </div>
+                    <div class="f-news-card-title">
+                        <a href="/advance-components/">Farris UI 业务组件库</a>
+                    </div>
+                    <div class="f-news-card-content">为筛选数据、选取数据、社交等场景设计的业务组件库</div>
+                </div>
             </div>
-          </div>
-          <div class="f-news-card-title">
-            <a href="/components/">Farris UI 通用组件</a>
-          </div>
-          <div class="f-news-card-content">适用于桌面端应用的通用组件库</div>
-        </div>
-        <div class="f-news-card">
-          <div class="f-news-card-hero">
-            <div id="f-card-02">
-              <img src="/assets/Mobile.svg" />
+            <div class="f-news-container-row">
+                <div class="f-news-card">
+                    <div class="f-news-card-hero">
+                        <div id="f-card-04">
+                            <img src="/assets/Dashboard.svg" />
+                        </div>
+                    </div>
+                    <div class="f-news-card-title">
+                        <a href="/patterns/">Farris UI 页面模式</a>
+                    </div>
+                    <div class="f-news-card-content">使用 Farris UI 搭建的页面模板库</div>
+                </div>
+                <div class="f-news-card">
+                    <div class="f-news-card-hero">
+                        <div id="f-card-05">
+                            <img src="/assets/Portal.svg" />
+                        </div>
+                    </div>
+                    <div class="f-news-card-title">
+                        <a href="/mobile-patterns/">Farris UI Mobile 页面模式</a>
+                    </div>
+                    <div class="f-news-card-content">使用 Farris UI Mobile 搭建的页面模板库</div>
+                </div>
+                <div class="f-news-card">
+                    <div class="f-news-card-hero">
+                        <div id="f-card-06">
+                            <img src="/assets/Pix.svg" />
+                        </div>
+                    </div>
+                    <div class="f-news-card-title">
+                        <a href="/resources/">Farris UI Resources</a>
+                    </div>
+                    <div class="f-news-card-content">设计资源和图标库</div>
+                </div>
             </div>
-          </div>
-          <div class="f-news-card-title">
-            <a href="/mobiles/">Farris UI Mobile 组件</a>
-          </div>
-          <div class="f-news-card-content">移动端应用组件库</div>
         </div>
-        <div class="f-news-card">
-          <div class="f-news-card-hero">
-            <div id="f-card-03">
-              <img src="/assets/Pro.svg" />
-            </div>
-          </div>
-          <div class="f-news-card-title">
-            <a href="/advance-components/">Farris UI 业务组件库</a>
-          </div>
-          <div class="f-news-card-content">
-            为筛选数据、选取数据、社交等场景设计的业务组件库
-          </div>
-        </div>
-      </div>
-      <div class="f-news-container-row">
-        <div class="f-news-card">
-          <div class="f-news-card-hero">
-            <div id="f-card-04">
-              <img src="/assets/Dashboard.svg" />
-            </div>
-          </div>
-          <div class="f-news-card-title">
-            <a href="/patterns/">Farris UI 页面模式</a>
-          </div>
-          <div class="f-news-card-content">使用 Farris UI 搭建的页面模板库</div>
-        </div>
-        <div class="f-news-card">
-          <div class="f-news-card-hero">
-            <div id="f-card-05">
-              <img src="/assets/Portal.svg" />
-            </div>
-          </div>
-          <div class="f-news-card-title">
-            <a href="/mobile-patterns/">Farris UI Mobile 页面模式</a>
-          </div>
-          <div class="f-news-card-content">使用 Farris UI Mobile 搭建的页面模板库</div>
-        </div>
-        <div class="f-news-card">
-          <div class="f-news-card-hero">
-            <div id="f-card-06">
-              <img src="/assets/Pix.svg" />
-            </div>
-          </div>
-          <div class="f-news-card-title">
-            <a href="/resources/">Farris UI Resources</a>
-          </div>
-          <div class="f-news-card-content">设计资源和图标库</div>
-        </div>
-      </div>
     </div>
-  </div>
-  <VPFeatures v-if="fm.features" class="VPHomeFeatures" :features="fm.features" />
+    <VPFeatures v-if="fm.features" class="VPHomeFeatures" :features="fm.features" />
 </template>
 
 <style scoped>
 .f-feature {
-  padding-top: 80px;
+    padding-top: 80px;
 }
 
 .f-feature-title {
-  font-size: 32px;
-  color: #1d2129;
-  letter-spacing: 0;
-  text-align: center;
-  font-weight: 500;
-  margin-bottom: 40px;
+    font-size: 32px;
+    color: var(--vp-c-text-1);
+    letter-spacing: 0;
+    text-align: center;
+    font-weight: 500;
+    margin-bottom: 40px;
 }
 
 .f-feature-subtitle {
-  font-size: 16px;
-  color: #86909c;
-  letter-spacing: 0;
-  text-align: center;
-  font-weight: 400;
-  margin-bottom: 6px;
+    font-size: 16px;
+    color: var(--vp-c-text-2);
+    letter-spacing: 0;
+    text-align: center;
+    font-weight: 400;
+    margin-bottom: 6px;
 }
 
 .f-feature-container {
-  display: flex;
-  margin: 10px auto;
-  width: 1220px;
-  box-shadow: 0 4px 20px rgb(230 230 230 / 50%);
-  padding: 48px 32px;
+    display: flex;
+    margin: 10px auto;
+    width: 1220px;
+    box-shadow: var(--vp-shadow-3);
+    background-color: var(--vp-c-bg-soft);
+    border-radius: 8px;
+    padding: 48px 32px;
 }
 .f-feature-item {
-  flex: 1;
-  display: flex;
+    flex: 1;
+    display: flex;
 }
 
 .f-feature-item-icon img {
-  width: 54px;
-  height: 54px;
+    width: 54px;
+    height: 54px;
 }
 
 .f-feature-item-content {
-  margin-left: 20px;
+    margin-left: 20px;
 }
 
 .f-feature-item-title {
-  font-size: 20px;
-  color: rgba(0, 0, 0, 0.75);
-  letter-spacing: 0;
-  line-height: 28px;
-  font-weight: 500;
+    font-size: 20px;
+    color: var(--vp-c-text-1);
+    letter-spacing: 0;
+    line-height: 28px;
+    font-weight: 500;
 }
 
 .f-feature-item-title span {
-  color: #3661ff;
+    color: #3661ff;
 }
 
 .f-feature-item-subtitle {
-  font-size: 14px;
-  color: rgba(94, 109, 130, 0.8);
-  letter-spacing: 0;
-  font-weight: 400;
+    font-size: 14px;
+    color: var(--vp-c-text-2);
+    letter-spacing: 0;
+    font-weight: 400;
 }
 
 .f-news {
-  padding-top: 80px;
-  padding-bottom: 120px;
+    padding-top: 80px;
+    padding-bottom: 120px;
 }
 
 .f-news-container {
-  display: block;
-  margin: 10px auto;
-  width: 1220px;
+    display: block;
+    margin: 10px auto;
+    width: 1220px;
 }
 
 .f-news-container-row {
-  display: flex;
-  margin-bottom: 40px;
+    display: flex;
+    margin-bottom: 40px;
 }
 
 .f-news-container-row > .f-news-card {
-  margin-right: 40px;
+    margin-right: 40px;
 }
 
 .f-news-container-row > .f-news-card:last-child {
-  margin-right: 0;
+    margin-right: 0;
 }
 
 .f-news-card {
-  flex: 1;
-  /* margin-right: 40px; */
-  padding: 16px;
+    flex: 1;
+    /* margin-right: 40px; */
+    padding: 16px;
 }
 
 .f-news-card-hero > div {
-  height: 190px;
-  border-radius: 8px;
-  display: flex;
+    height: 190px;
+    border-radius: 8px;
+    display: flex;
 }
 
 .f-news-card-hero img {
-  margin: auto;
+    margin: auto;
 }
 
 .f-news-card-title {
-  font-size: 20px;
-  color: #1f2f3d;
-  letter-spacing: -0.5px;
-  font-weight: 400;
-  margin: 12px 16px 6px;
+    font-size: 20px;
+    color: var(--vp-c-text-1);
+    letter-spacing: -0.5px;
+    font-weight: 400;
+    margin: 12px 16px 6px;
 }
 
 .f-news-card-title a {
-  color: inherit;
+    color: inherit;
 }
 
 .f-news-card-title a:hover {
-  color: #529dff;
+    color: #529dff;
 }
 
 .f-news-card-content {
-  font-size: 14px;
-  color: rgba(94, 109, 130, 0.8);
-  letter-spacing: 0;
-  font-weight: 400;
-  margin: 0 16px 12px;
+    font-size: 14px;
+    color: var(--vp-c-text-2);
+    letter-spacing: 0;
+    font-weight: 400;
+    margin: 0 16px 12px;
 }
 
 .f-news-card {
-  flex: 1;
-  background: #ffffff;
-  box-shadow: 0px 4px 20px 0px rgba(230, 230, 230, 0.6);
-  border-radius: 16px;
+    flex: 1;
+    background-color: var(--vp-c-bg-soft);
+    box-shadow: var(--vp-shadow-3);
+    border-radius: 16px;
 }
 
 #f-card-01 {
-  background-image: url(/assets/General_bg.png);
-  background-size: cover;
+    background-image: url(/assets/General_bg.png);
+    background-size: cover;
 }
 
 #f-card-02 {
-  background-image: url(/assets/Mobile_bg.png);
-  background-size: cover;
+    background-image: url(/assets/Mobile_bg.png);
+    background-size: cover;
 }
 
 #f-card-03 {
-  background-image: url(/assets/Pro_bg.png);
-  background-size: cover;
+    background-image: url(/assets/Pro_bg.png);
+    background-size: cover;
 }
 
 #f-card-04 {
-  background-image: url(/assets/Dashboard_bg.png);
-  background-size: cover;
+    background-image: url(/assets/Dashboard_bg.png);
+    background-size: cover;
 }
 
 #f-card-05 {
-  background-image: url(/assets/Portal_bg.png);
-  background-size: cover;
+    background-image: url(/assets/Portal_bg.png);
+    background-size: cover;
 }
 
 #f-card-06 {
-  background-image: url(/assets/Pix_bg.png);
-  background-size: cover;
+    background-image: url(/assets/Pix_bg.png);
+    background-size: cover;
 }
 </style>
diff --git a/packages/ui-vue/docs/.vitepress/farris-theme/components/VPNav.vue b/packages/ui-vue/docs/.vitepress/farris-theme/components/VPNav.vue
index f3eb4f1..97a0f63 100644
--- a/packages/ui-vue/docs/.vitepress/farris-theme/components/VPNav.vue
+++ b/packages/ui-vue/docs/.vitepress/farris-theme/components/VPNav.vue
@@ -58,7 +58,7 @@ provide("close-screen", closeScreen);
   }
 
   .dark .VPNav.no-sidebar {
-    background: rgba(36, 36, 36, 0.7);
+    background: rgba(36, 36, 36, 0);
   }
 
   @supports not (backdrop-filter: saturate(50%) blur(8px)) {
diff --git a/packages/ui-vue/docs/.vitepress/farris-theme/components/VPNavBarTitle.vue b/packages/ui-vue/docs/.vitepress/farris-theme/components/VPNavBarTitle.vue
index 75533fc..123483f 100644
--- a/packages/ui-vue/docs/.vitepress/farris-theme/components/VPNavBarTitle.vue
+++ b/packages/ui-vue/docs/.vitepress/farris-theme/components/VPNavBarTitle.vue
@@ -33,7 +33,7 @@ const { hasSidebar } = useSidebar();
     /* background-color: var(--vp-c-bg-alt); */
     padding-left: 32px;
     margin-right: 0;
-    background-color: rgba(255, 255, 255, 0.7);
+    background-color: var(--vp-c-bg);
     width: var(--vp-sidebar-width);
     backdrop-filter: saturate(50%) blur(8px);
     padding-right: 32px;
diff --git a/packages/ui-vue/docs/.vitepress/farris-theme/index.ts b/packages/ui-vue/docs/.vitepress/farris-theme/index.ts
index 7b79212..f6529ff 100644
--- a/packages/ui-vue/docs/.vitepress/farris-theme/index.ts
+++ b/packages/ui-vue/docs/.vitepress/farris-theme/index.ts
@@ -1,28 +1,29 @@
-import './styles/fonts.css'
-import './styles/vars.css'
-import './styles/base.css'
-import './styles/utils.css'
-import './styles/components/custom-block.css'
-import './styles/components/vp-code.css'
-import './styles/components/vp-doc.css'
-import './styles/components/vp-sponsor.css'
+import './styles/fonts.css';
+import './styles/vars.css';
+import './styles/base.css';
+import './styles/utils.css';
+import './styles/components/custom-block.css';
+import './styles/components/vp-code.css';
+import './styles/components/vp-doc.css';
+import './styles/components/vp-sponsor.css';
+import './styles/lib-override/demoblock.css';
 
-import { Theme } from 'vitepress'
-import Layout from './Layout.vue'
-import NotFound from './NotFound.vue'
+import { Theme } from 'vitepress';
+import Layout from './Layout.vue';
+import NotFound from './NotFound.vue';
 
-export { default as VPHomeHero } from './components/VPHomeHero.vue'
-export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue'
-export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue'
-export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue'
-export { default as VPTeamPage } from './components/VPTeamPage.vue'
-export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'
-export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue'
-export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
+export { default as VPHomeHero } from './components/VPHomeHero.vue';
+export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue';
+export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue';
+export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue';
+export { default as VPTeamPage } from './components/VPTeamPage.vue';
+export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue';
+export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue';
+export { default as VPTeamMembers } from './components/VPTeamMembers.vue';
 
 const theme: Theme = {
-  Layout,
-  NotFound
-}
+    Layout,
+    NotFound
+};
 
-export default theme
+export default theme;
diff --git a/packages/ui-vue/docs/.vitepress/farris-theme/styles/base.css b/packages/ui-vue/docs/.vitepress/farris-theme/styles/base.css
index b48d116..e52634a 100644
--- a/packages/ui-vue/docs/.vitepress/farris-theme/styles/base.css
+++ b/packages/ui-vue/docs/.vitepress/farris-theme/styles/base.css
@@ -24,7 +24,7 @@ body {
     font-family: var(--vp-font-family-base);
     font-size: 16px;
     font-weight: 400;
-    color: var(--vp-c-text-1);
+    color: var(--vp-c-text-1) !important;
     background-color: var(--vp-c-bg) !important;
     direction: ltr;
     font-synthesis: none;
diff --git a/packages/ui-vue/docs/.vitepress/farris-theme/styles/lib-override/demoblock.css b/packages/ui-vue/docs/.vitepress/farris-theme/styles/lib-override/demoblock.css
new file mode 100644
index 0000000..203e7c8
--- /dev/null
+++ b/packages/ui-vue/docs/.vitepress/farris-theme/styles/lib-override/demoblock.css
@@ -0,0 +1,3 @@
+.demo-block > .source {
+    background-color: #ffffff;
+}
\ No newline at end of file
diff --git a/packages/ui-vue/docs/.vitepress/farris-theme/styles/lib-override/nprogress.css b/packages/ui-vue/docs/.vitepress/farris-theme/styles/lib-override/nprogress.css
index 477703c..330f90e 100644
--- a/packages/ui-vue/docs/.vitepress/farris-theme/styles/lib-override/nprogress.css
+++ b/packages/ui-vue/docs/.vitepress/farris-theme/styles/lib-override/nprogress.css
@@ -1,12 +1,12 @@
 #nprogress .bar {
-  background: var(--vp-c-brand);
+    background: var(--vp-c-brand);
 }
 
 #nprogress .spinner-icon {
-  border-top-color: var(--vp-c-brand);
-  border-left-color: var(--vp-c-brand);
+    border-top-color: var(--vp-c-brand);
+    border-left-color: var(--vp-c-brand);
 }
 
 #nprogress .peg {
-  box-shadow: 0 0 10px var(--vp-c-brand), 0 0 5px var(--vp-c-brand);
+    box-shadow: 0 0 10px var(--vp-c-brand), 0 0 5px var(--vp-c-brand);
 }