diff --git a/example/docs/zh-CN/guide/dark.md b/example/docs/zh-CN/guide/dark.md
index e69de29b..d5d73128 100644
--- a/example/docs/zh-CN/guide/dark.md
+++ b/example/docs/zh-CN/guide/dark.md
@@ -0,0 +1,17 @@
+::: title 夜间模式
+:::
+
+::: describe 默认情况下, 网站主题为日间模式。若需启用深夜模式, 使用 config-provider 组件。
+:::
+
+```
+<template>
+    <lay-config-provider :theme="theme">
+        <App />
+    </lay-config-provider>
+</template>
+
+<script setup>
+const theme = ref('dark')
+</script>
+```
\ No newline at end of file
diff --git a/example/src/layouts/Layout.vue b/example/src/layouts/Layout.vue
index 7eae218b..760f578d 100644
--- a/example/src/layouts/Layout.vue
+++ b/example/src/layouts/Layout.vue
@@ -8,7 +8,7 @@
     <lay-layout class="layui-layout-document" style="height:100%">
       <lay-header
         ><lay-logo>
-          <img src="../assets/logo-png.png" /><span style="margin-left:12px;font-size:20px;color: #213547;letter-spacing: -0.2px;opacity: 0.8;">layui - vue</span>
+          <img src="../assets/logo-png.png" /><span style="margin-left:12px;font-size:20px;color: rgba(0, 0, 0, 0.8);letter-spacing: -0.2px;opacity: 0.8;">layui - vue</span>
         </lay-logo>
         <ul
           class="layui-nav layui-layout-left"
diff --git a/example/src/router/zh-CN.ts b/example/src/router/zh-CN.ts
index 942584b6..1ef56b0c 100644
--- a/example/src/router/zh-CN.ts
+++ b/example/src/router/zh-CN.ts
@@ -68,6 +68,11 @@ const zhCN = [
             component: () => import("../../docs/zh-CN/guide/locale.md"),
             meta: { title: "语言" },
           },
+          {
+            path: "/zh-CN/guide/dark",
+            component: () => import("../../docs/zh-CN/guide/dark.md"),
+            meta: { title: "夜间" },
+          },
         ],
       },
       {
diff --git a/example/src/view/guide.vue b/example/src/view/guide.vue
index 2a91b837..f38094fd 100644
--- a/example/src/view/guide.vue
+++ b/example/src/view/guide.vue
@@ -91,6 +91,11 @@ export default {
             title: '主题',
             subTitle: 'theme',
             path: '/zh-CN/guide/theme',
+          },{
+            id: 3,
+            title: '夜间',
+            subTitle: 'dark',
+            path: '/zh-CN/guide/dark',
           },
           {
             id: 3,
diff --git a/example/src/view/index.vue b/example/src/view/index.vue
index 616a5c28..e13bb70a 100644
--- a/example/src/view/index.vue
+++ b/example/src/view/index.vue
@@ -10,18 +10,27 @@
         </div>
         <div class="layui-anim site-desc site-desc-anim">
           <p class="web-font-desc">layui - vue</p>
-          <cite
-            >{{ t('home.description') }}</cite
-          >
+          <cite>{{ t("home.description") }}</cite>
         </div>
         <div class="site-download">
-          <router-link class="layui-inline site-down" to="/zh-CN/guide"
-            >Get Started</router-link
-          >
+          <router-link class="layui-inline site-down" to="/zh-CN/guide">
+            Get Started
+          </router-link>
+          <router-link class="layui-inline site-down" to="/zh-CN/guide">
+            Switch Dark
+          </router-link>
         </div>
         <div class="site-version">
-          <span>{{ t('home.version') }}：<cite class="site-showv">1.0.0</cite></span>
-          <span>{{ t('home.download') }}：<em class="site-showdowns">5463</em></span>
+          <span
+            >{{ t("home.version") }}：<cite class="site-showv"
+              >1.0.0</cite
+            ></span
+          >
+          <span
+            >{{ t("home.download") }}：<em class="site-showdowns"
+              >5463</em
+            ></span
+          >
         </div>
       </div>
       <div class="site-banner-other">
@@ -51,7 +60,7 @@
         </a>
       </div>
     </div>
-    <div style="margin-left: 10%; margin-right: 10%;margin-top:40px;">
+    <div style="margin-left: 10%; margin-right: 10%; margin-top: 40px">
       <div>
         <ul class="layui-row layui-col-space30 site-idea">
           <li class="layui-col-md8">
@@ -91,28 +100,24 @@
       </div>
     </div>
     <div class="footer footer-index">
-      <p>
-        Released under the <a href="/index.html">MIT License</a>.
-      </p>
-      <p>
-        Copyright © 2021-2022 layui-vue.com
-      </p>
+      <p>Released under the <a href="/index.html">MIT License</a>.</p>
+      <p>Copyright © 2021-2022 layui-vue.com</p>
     </div>
   </div>
 </template>
 
 <script>
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
 export default {
   name: "index",
   setup() {
     const { t } = useI18n();
 
     return {
-      t
-    }
-  }
-}
+      t,
+    };
+  },
+};
 </script>
 <style>
 #app,
@@ -154,19 +159,29 @@ body {
 }
 .site-download a {
   position: relative;
-  padding: 0 50px 0 50px;
-  height: 60px;
-  line-height: 60px;
-  border-radius: 4px;
-  border: 1px solid rgba(60, 60, 60, .7);
-  font-size: 24px;
-  color: rgba(60, 60, 60, .7);
+  padding: 0 20px 0 20px;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 6px;
+  background: #f1f1f1;
+  border: 1px solid #f1f1f1;
+  font-size: 16px;
+  color: #476582;
+  font-weight: 500;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   transition: all 0.5s;
   -webkit-transition: all 0.5s;
+  letter-spacing: 0.2px;
 }
 .site-download a:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-  border-radius: 50px;
+  border-radius: 10px;
+}
+.site-download a:first-child {
+  background: #009688;
+  color: white;
+}
+.site-download a+a {
+  margin-left: 20px;
 }
 .site-zfj {
   padding-top: 25px;
@@ -218,13 +233,13 @@ body {
   bottom: -40px;
   left: 0;
   width: 100%;
-  color: rgba(60, 60, 60, .7);
+  color: rgba(60, 60, 60, 0.7);
   font-style: normal;
 }
 .site-version {
   position: relative;
   margin-top: 18px;
-  color: rgba(60, 60, 60, .7);
+  color: rgba(60, 60, 60, 0.7);
   font-size: 12px;
 }
 .site-version span {
@@ -234,7 +249,7 @@ body {
   font-style: normal;
 }
 .site-version a {
-  color: rgba(60, 60, 60, .7);
+  color: rgba(60, 60, 60, 0.7);
   text-decoration: none;
   margin-top: -4px;
 }
@@ -246,6 +261,11 @@ body {
   text-align: center;
   font-size: 0;
 }
+
+.site-container .layui-field-title {
+  border-top: 1px solid #d2d2d2;
+}
+
 .site-banner-other a {
   display: inline-block;
   vertical-align: middle;
@@ -254,8 +274,8 @@ body {
   margin: 0 6px;
   padding: 0 8px;
   border-radius: 4px;
-  color: rgba(60, 60, 60, .7);
-  border: 1px solid rgba(60, 60, 60, .7);
+  color: rgba(60, 60, 60, 0.7);
+  border: 1px solid rgba(60, 60, 60, 0.7);
   font-size: 14px;
   transition: all 0.5s;
   -webkit-transition: all 0.5s;
@@ -265,7 +285,7 @@ body {
   padding: 30px 15px;
   line-height: 30px;
   text-align: center;
-  color: rgba(60, 60, 60, .7);
+  color: rgba(60, 60, 60, 0.7);
   font-weight: 300;
   font-size: 13.6px;
   background: #f9f9f9;