Merge branch 'dark' into develop

2022-03-30 23:11:25 +08:00
parent 6d5960cdb5 b355c1939b
commit a3a3955a0f
77 changed files with 297 additions and 291 deletions
--- a/example/docs/zh-CN/components/animation.md
+++ b/example/docs/zh-CN/components/animation.md
@@ -102,8 +102,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext animation
 :::
--- a/example/docs/zh-CN/components/avatar.md
+++ b/example/docs/zh-CN/components/avatar.md
@@ -135,8 +135,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext avatar
 :::
--- a/example/docs/zh-CN/components/badge.md
+++ b/example/docs/zh-CN/components/badge.md
@@ -68,8 +68,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext badge
 :::
--- a/example/docs/zh-CN/components/breadcrumb.md
+++ b/example/docs/zh-CN/components/breadcrumb.md
@@ -110,8 +110,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext breadcrumb
 :::
--- a/example/docs/zh-CN/components/button.md
+++ b/example/docs/zh-CN/components/button.md
@@ -341,8 +341,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext button
 :::
--- a/example/docs/zh-CN/components/card.md
+++ b/example/docs/zh-CN/components/card.md
@@ -220,8 +220,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext card
 :::
--- a/example/docs/zh-CN/components/carousel.md
+++ b/example/docs/zh-CN/components/carousel.md
@@ -182,8 +182,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext carousel
 :::
--- a/example/docs/zh-CN/components/checkbox.md
+++ b/example/docs/zh-CN/components/checkbox.md
@@ -220,8 +220,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext checkbox
 :::
--- a/example/docs/zh-CN/components/collapse.md
+++ b/example/docs/zh-CN/components/collapse.md
@@ -249,8 +249,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext collapse
 :::
--- a/example/docs/zh-CN/components/color.md
+++ b/example/docs/zh-CN/components/color.md
@@ -170,8 +170,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext color
 :::
--- a/example/docs/zh-CN/components/colorPicker.md
+++ b/example/docs/zh-CN/components/colorPicker.md
@@ -66,8 +66,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext colorPicker
 :::
--- a/example/docs/zh-CN/components/confirm.md
+++ b/example/docs/zh-CN/components/confirm.md
@@ -83,8 +83,7 @@ layer.confirm(content, options)

 :::

-::: comment
-:::
+ 

 ::: previousNext confirm
 :::
--- a/example/docs/zh-CN/components/container.md
+++ b/example/docs/zh-CN/components/container.md
@@ -85,8 +85,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext container
 :::
--- a/example/docs/zh-CN/components/datePicker.md
+++ b/example/docs/zh-CN/components/datePicker.md
@@ -112,8 +112,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext transfer
 :::
--- a/example/docs/zh-CN/components/dropdown.md
+++ b/example/docs/zh-CN/components/dropdown.md
@@ -104,8 +104,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext dropdown
 :::
--- a/example/docs/zh-CN/components/empty.md
+++ b/example/docs/zh-CN/components/empty.md
@@ -64,8 +64,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext empty
 :::
--- a/example/docs/zh-CN/components/exception.md
+++ b/example/docs/zh-CN/components/exception.md
@@ -144,8 +144,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext field
 :::
--- a/example/docs/zh-CN/components/field.md
+++ b/example/docs/zh-CN/components/field.md
@@ -75,8 +75,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext field
 :::
--- a/example/docs/zh-CN/components/form.md
+++ b/example/docs/zh-CN/components/form.md
@@ -580,8 +580,7 @@ export default {
 ```


-::: comment
-:::
+ 

 ::: previousNext form
 :::
--- a/example/docs/zh-CN/components/grid.md
+++ b/example/docs/zh-CN/components/grid.md
@@ -188,8 +188,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext grid
 :::
--- a/example/docs/zh-CN/components/icon.md
+++ b/example/docs/zh-CN/components/icon.md
@@ -1137,8 +1137,7 @@ npm install @layui/icons-vue

 :::

-::: comment
-:::
+ 

 ::: previousNext iconfont
 :::
--- a/example/docs/zh-CN/components/iconPicker.md
+++ b/example/docs/zh-CN/components/iconPicker.md
@@ -145,8 +145,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext iconPicker
 :::
--- a/example/docs/zh-CN/components/input.md
+++ b/example/docs/zh-CN/components/input.md
@@ -192,8 +192,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext input
 :::
--- a/example/docs/zh-CN/components/inputNumber.md
+++ b/example/docs/zh-CN/components/inputNumber.md
@@ -147,8 +147,7 @@

 :::

-::: comment
-:::
+ 

 ::: previousNext inputNumber
 :::
--- a/example/docs/zh-CN/components/layout.md
+++ b/example/docs/zh-CN/components/layout.md
@@ -263,8 +263,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext layout
 :::
--- a/example/docs/zh-CN/components/line.md
+++ b/example/docs/zh-CN/components/line.md
@@ -48,8 +48,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext line
 :::
--- a/example/docs/zh-CN/components/load.md
+++ b/example/docs/zh-CN/components/load.md
@@ -133,8 +133,7 @@ layer.load(load, options)

 :::

-::: comment
-:::
+ 

 ::: previousNext load
 :::
--- a/example/docs/zh-CN/components/menu.md
+++ b/example/docs/zh-CN/components/menu.md
@@ -534,8 +534,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext nav
 :::
--- a/example/docs/zh-CN/components/modal.md
+++ b/example/docs/zh-CN/components/modal.md
@@ -320,8 +320,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext modal
 :::
--- a/example/docs/zh-CN/components/msg.md
+++ b/example/docs/zh-CN/components/msg.md
@@ -94,8 +94,7 @@ layer.msg(content, options)

 :::

-::: comment
-:::
+ 

 ::: previousNext msg
 :::
--- a/example/docs/zh-CN/components/noticeBar.md
+++ b/example/docs/zh-CN/components/noticeBar.md
@@ -94,8 +94,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext transfer
 :::
--- a/example/docs/zh-CN/components/page.md
+++ b/example/docs/zh-CN/components/page.md
@@ -308,8 +308,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext page
 :::
--- a/example/docs/zh-CN/components/panel.md
+++ b/example/docs/zh-CN/components/panel.md
@@ -62,8 +62,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext panel
 :::
--- a/example/docs/zh-CN/components/progress.md
+++ b/example/docs/zh-CN/components/progress.md
@@ -135,8 +135,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext progress
 :::
--- a/example/docs/zh-CN/components/quote.md
+++ b/example/docs/zh-CN/components/quote.md
@@ -61,8 +61,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext block
 :::
--- a/example/docs/zh-CN/components/radio.md
+++ b/example/docs/zh-CN/components/radio.md
@@ -127,8 +127,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext radio
 :::
--- a/example/docs/zh-CN/components/rate.md
+++ b/example/docs/zh-CN/components/rate.md
@@ -315,8 +315,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext rate
 :::
--- a/example/docs/zh-CN/components/result.md
+++ b/example/docs/zh-CN/components/result.md
@@ -78,8 +78,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext field
 :::
--- a/example/docs/zh-CN/components/scroll.md
+++ b/example/docs/zh-CN/components/scroll.md
@@ -46,8 +46,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext field
 :::
--- a/example/docs/zh-CN/components/select.md
+++ b/example/docs/zh-CN/components/select.md
@@ -235,8 +235,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext select
 :::
--- a/example/docs/zh-CN/components/skeleton.md
+++ b/example/docs/zh-CN/components/skeleton.md
@@ -113,8 +113,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext skeleton
 :::
--- a/example/docs/zh-CN/components/slider.md
+++ b/example/docs/zh-CN/components/slider.md
@@ -117,8 +117,7 @@ export default {
 | max  |  最大值     | `Number`                   |        -       |    -    |
 :::

-::: comment
-:::
+ 

 ::: previousNext slider
 :::
--- a/example/docs/zh-CN/components/splitPanel.md
+++ b/example/docs/zh-CN/components/splitPanel.md
@@ -116,8 +116,7 @@
 :::


-::: comment
-:::
+ 

 ::: previousNext splitPanel
 :::
--- a/example/docs/zh-CN/components/step.md
+++ b/example/docs/zh-CN/components/step.md
@@ -468,8 +468,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext step
 :::
--- a/example/docs/zh-CN/components/switch.md
+++ b/example/docs/zh-CN/components/switch.md
@@ -172,8 +172,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext switch
 :::
--- a/example/docs/zh-CN/components/tab.md
+++ b/example/docs/zh-CN/components/tab.md
@@ -304,8 +304,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext tab
 :::
--- a/example/docs/zh-CN/components/table.md
+++ b/example/docs/zh-CN/components/table.md
@@ -390,8 +390,7 @@ export default {
 | titleSlot  | 标题插槽   | --   |
 :::

-::: comment
-:::
+ 

 ::: previousNext table
 :::
--- a/example/docs/zh-CN/components/textarea.md
+++ b/example/docs/zh-CN/components/textarea.md
@@ -118,8 +118,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext textarea
 :::
--- a/example/docs/zh-CN/components/timeline.md
+++ b/example/docs/zh-CN/components/timeline.md
@@ -137,8 +137,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext timeline
 :::
--- a/example/docs/zh-CN/components/tooltip.md
+++ b/example/docs/zh-CN/components/tooltip.md
@@ -128,8 +128,7 @@

 :::

-::: comment
-:::
+ 

 ::: previousNext tooltip
 :::
--- a/example/docs/zh-CN/components/transfer.md
+++ b/example/docs/zh-CN/components/transfer.md
@@ -185,8 +185,7 @@ export default {

 :::

-::: comment
-:::
+ 

 ::: previousNext transfer
 :::
--- a/example/docs/zh-CN/components/tree.md
+++ b/example/docs/zh-CN/components/tree.md
@@ -268,8 +268,7 @@ function handleClick(node) {

 :::

-::: comment
-:::
+ 

 ::: previousNext tree
 :::
--- a/example/docs/zh-CN/components/upload.md
+++ b/example/docs/zh-CN/components/upload.md
@@ -186,7 +186,6 @@ export default {
 :::


-::: comment
-:::
+ 

 ::: previousNext button
--- 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>
+```
--- a/example/docs/zh-CN/guide/problem.md
+++ b/example/docs/zh-CN/guide/problem.md
@@ -4,5 +4,4 @@
 ::: describe 以下整理了一些 Layui Vue 社区常见的问题和官方答复，在提问之前建议找找有没有类似的问题。
 :::

-::: comment
-:::
+ 
--- a/example/src/assets/background.svg
+++ b/example/src/assets/background.svg
@@ -1,3 +1,33 @@
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 1400 800">

+  <rect x="1300" y="400" rx="40" ry="40" width="300" height="300" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 1450 550" to="360 1450 550" repeatCount="indefinite"/>
+  </rect>
+
+  <path d="M 100 350 A 150 150 0 1 1 400 350 Q400 370 380 370 L 250 370 L 120 370 Q100 370 100 350" stroke="rgb(253, 214, 99)" fill="rgb(253, 214, 99)">
+    <animateMotion path="M 800 -200 L 800 -300 L 800 -200" dur="20s" begin="0s" repeatCount="indefinite"/>
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 210 530 ; -30 210 530 ; 0 210 530" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
+  </path>
+
+  <circle cx="200" cy="150" r="30" stroke="#1a73e8" fill="#1a73e8">
+    <animateMotion path="M 0 0 L 40 20 Z" dur="5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- 三角形 -->
+  <path d="M 165 580 L 270 580 Q275 578 270 570 L 223 483 Q220 480 217 483 L 165 570 Q160 578 165 580" stroke="rgb(238, 103, 92)" fill="rgb(238, 103, 92)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 210 530" to="360 210 530" repeatCount="indefinite"/>
+  </path>
+
+  <circle cx="1200" cy="600" r="30" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
+    <animateMotion path="M 0 0 L -20 40 Z" dur="9s" repeatCount="indefinite"/>
+  </circle>
+
+  <path d="M 100 350 A 40 40 0 1 1 180 350 L 180 430 A 40 40 0 1 1 100 430 Z" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">
+    <animateMotion path="M 140 390 L 180 360 L 140 390" dur="20s" begin="0s" repeatCount="indefinite"/>
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 140 390; -60 140 390; 0 140 390" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
+  </path>
+
+  <rect x="400" y="600" rx="40" ry="40" width="100" height="100" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="-30 550 750" to="330 550 750" repeatCount="indefinite"/>
+  </rect>
 </svg>
--- a/example/src/assets/logo-png.png
+++ b/example/src/assets/logo-png.png
--- a/example/src/components/LayAnchor.vue
+++ b/example/src/components/LayAnchor.vue
@@ -236,6 +236,7 @@ const throttle = (func: Function, wait: number) => {
  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
  transition: none;
  -webkit-transition: none;
+  color: rgba(0, 0, 0, 0.8);
  &:hover {
    background-color: #e2e2e2;
  }
--- a/example/src/components/LayComment.vue
+++ b/example/src/components/LayComment.vue
@@ -1,24 +0,0 @@
-<template>
-    <div id="comment"></div>
-</template>
-<script>
-export default {
-  name: 'Utterances',
-  methods: {
-    initValine () {
-        const utterances = document.createElement('script');
-        utterances.type = 'text/javascript';
-        utterances.async = true;
-        utterances.setAttribute('issue-term', 'pathname')
-        utterances.setAttribute('theme','github-light')
-        utterances.setAttribute('repo',`layui-vue/layui-doc`)
-        utterances.crossorigin = 'anonymous';
-        utterances.src = 'https://utteranc.es/client.js';
-        window.document.getElementById('comment').appendChild(utterances);
-    }
-  },
-  mounted: function(){
-    this.initValine()
-  }
-}
-</script>
--- a/example/src/components/LaySearch.vue
+++ b/example/src/components/LaySearch.vue
@@ -31,8 +31,28 @@ onMounted(() => {
 :root {
  --docsearch-logo-color: var(--global-primary-color);
  --docsearch-primary-color: var(--global-primary-color);
-  --docsearch-searchbox-background: rgba(255, 255, 255, 0.05);
-  --docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.05);
+  --docsearch-searchbox-background: rgba(255, 255, 255, 0.02);
+  --docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.02);
  --docsearch-container-background: rgba(0, 0, 0, 0.1);
 }
+
+.DocSearch-Button,
+.DocSearch-Button:hover,
+.DocSearch-Button:active,
+.DocSearch-Button:focus {
+  border: 1px solid rgb(224, 224, 230);
+  box-shadow: none;
+}
+
+.DocSearch-Button-Key {
+  border: 1px solid rgba(60, 60, 60, .29);
+  background: transparent;
+  box-shadow: none;
+}
+
+.DocSearch-Button 
+.DocSearch-Search-Icon, 
+.DocSearch-Button-Placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
 </style>
--- a/example/src/layouts/Layout.vue
+++ b/example/src/layouts/Layout.vue
@@ -5,10 +5,10 @@
    :locales="locales"
    :themeVariable="themeVariable"
  >
-    <lay-layout class="layui-layout-document">
+    <lay-layout class="layui-layout-document" style="height:100%">
      <lay-header
-        ><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
-          <img src="../assets/logo.png" />
+        ><lay-logo>
+          <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"
@@ -30,11 +30,6 @@
              {{ t("nav.resources") }}
            </router-link>
          </li>
-          <li class="layui-nav-item">
-            <router-link to="/zh-CN/material">
-              {{ t("nav.material") }}
-            </router-link>
-          </li>
          <li class="layui-nav-item">
            <lay-form>
              <lay-search :datas="menus" />
@@ -52,7 +47,6 @@
                  size="15px"
                  type="layui-icon-theme"
                  style="
-                    color: rgba(255, 255, 255, 0.7);
                    padding-left: 30px;
                    padding-right: 30px;
                  "
@@ -122,7 +116,7 @@
          </li>
          <li class="layui-nav-item">
            <a href="https://gitee.com/layui-vue/layui-vue">
-              <lay-icon type="layui-icon-fonts-code" size="15px"></lay-icon>
+              Gitee
            </a>
          </li>
          <li class="layui-nav-item">
@@ -143,11 +137,6 @@
              >
            </a>
          </li>
-          <li class="layui-nav-item">
-            <a href="https://gitee.com/layui-vue/layui-vue/issues">
-              <lay-icon type="layui-icon-chat" size="15px"></lay-icon>
-            </a>
-          </li>
          <li class="layui-nav-item">
            <a href="javascript:void(0)">
              <lay-switch
@@ -212,7 +201,7 @@
            </a>
          </li>
          <li class="layui-nav-item">
-            <a href="javascript:void(0)"> 0.4.4 </a>
+            <a href="javascript:void(0)"> 1.0.0 </a>
          </li>
        </ul>
      </lay-header>
@@ -221,7 +210,7 @@
  </lay-config-provider>
 </template>
 <script>
-import { ref, watch } from "vue";
+import { provide, ref, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import menu from "../view/utils/menus";
 import { useI18n } from "vue-i18n";
@@ -290,6 +279,9 @@ export default {
      locale.value = lang;
    };

+    provide("isDark",isDark);
+    provide("theme",theme);
+
    return {
      t,
      menus,
@@ -311,8 +303,8 @@ export default {
  z-index: 99;
  width: 100%;
  position: fixed;
-  background: #393d49;
-  border-bottom: 1px solid #404553;
+  background: #ffffff;
+  border-bottom: 1px solid #EEEEEE;
 }

 .layui-layout-document > .layui-layout > .layui-side {
@@ -321,13 +313,7 @@ export default {
  margin-top: 60px;
  z-index: 99;
  height: calc(100% - 60px);
-  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
-}
-
-.layui-layout-document .layui-body,
-.layui-layout-document .layui-menu,
-.layui-layout-document .lay-aside {
-  background-color: var(--global-back-color);
+  border-right: 1px solid #EEEEEE;
 }

 .layui-layout-document > .layui-layout > .layui-body {
@@ -338,11 +324,25 @@ export default {
  height: calc(100% - 60px);
 }

+.layui-layout-document .layui-header .layui-form-switch {
+  border: 1px solid rgba(60, 60, 60, .29);
+  background-color: #f1f1f1!important;
+}
+
+.layui-layout-document .layui-header .layui-nav .layui-nav-item > a,
+.layui-layout-document .layui-header .layui-nav .layui-nav-item > a:hover {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.layui-layout-document .layui-header .layui-logo {
+  text-align: left;
+  padding-left: 15px;
+}
+
 .layui-logo img {
-  height: 31px;
-  width: 82px;
+  height: 45px;
  left: 15px;
-  top: 16px;
+  top: 0px;
 }

 .layui-header > .layui-nav {
@@ -352,13 +352,6 @@ export default {
 .layui-header .layui-local-badge {
  font-size: 12.4px;
  background: transparent;
-  color: rgba(255, 255, 255, 0.7);
-  border-color: rgba(255, 255, 255, 0.7);
-}
-
-.layui-header > .layui-local:hover {
-  color: white;
-  border-color: white;
 }

 .layui-menu-docs {
--- a/example/src/main.ts
+++ b/example/src/main.ts
@@ -6,7 +6,6 @@ import layui from '../../src/index'
 import LayCode from './components/LayCode.vue'
 import LaySearch from './components/LaySearch.vue'
 import LayTableBox from './components/LayTableBox.vue'
-import LayComment from './components/LayComment.vue'
 import LayAnchor from './components/LayAnchor.vue'
 import './assets/css/index.css'

@@ -24,7 +23,6 @@ export function createApp(): {
    .component('LayCode', LayCode)
    .component('LaySearch', LaySearch)
    .component('LayTableBox', LayTableBox)
-    .component('LayComment', LayComment)
    .component('LayAnchor',LayAnchor)

  return { app, router }
--- a/example/src/plugin/common-plugins.ts
+++ b/example/src/plugin/common-plugins.ts
@@ -8,7 +8,6 @@ import createTitle from "./create-title";
 import createQuote from "./create-quote";
 import createDescribe from "./create-describe";
 import createTable from "./create-table";
-import createComment from "./create-comment";
 import createAnchor from "./create-anchor";
 import preWrapper from "./pre-wrapper";
 import previousNext from "./previous-next";
@@ -32,7 +31,6 @@ const plugins = [
        .use(...createQuote("quote", ""))
        .use(...createTitle("title", ""))
        .use(...createDescribe("describe", ""))
-        .use(...createComment("comment", ""))
        .use(...createAnchor("anchor", ""))
        .use(...previousNext("previousNext", ""));
    },
--- a/example/src/plugin/create-comment.ts
+++ b/example/src/plugin/create-comment.ts
@@ -1,27 +0,0 @@
-import container from 'markdown-it-container'
-import type Token from 'markdown-it/lib/token'
-
-type ContainerArgs = [
-  typeof container, string,
-  { render(tokens: Token[], idx: number): string }
-]
-
-export default function createContainer(
-  klass: string,
-  defaultTitle: string
-): ContainerArgs {
-  return [
-    container,
-    klass,
-    {
-      render(tokens, idx) {
-        const token = tokens[idx]
-        if (token.nesting === 1) {
-          return `<lay-comment>`
-        } else {
-          return '</lay-comment>\n'
-        }
-      },
-    },
-  ]
-}
--- a/example/src/plugin/previous-next.ts
+++ b/example/src/plugin/previous-next.ts
@@ -30,7 +30,7 @@ export default function createContainer(
          }
        });
        if (token.nesting === 1) {
-          return `<div style="display: flex; justify-content: space-between">
+          return `<div style="display: flex; justify-content: space-between; margin-top:20px;">
                <div><router-link to="${
                  menusChild[prevIndex]?.path
                }" class="lay-link" style="display: ${
--- 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: "夜间" },
+          },
        ],
      },
      {
--- 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,
--- a/example/src/view/index.vue
+++ b/example/src/view/index.vue
@@ -4,31 +4,34 @@
      <div class="site-banner-main">
        <div class="site-zfj site-zfj-anim">
          <img
-            src="../assets/logo.jpg"
+            src="../assets/logo-png.png"
            style="width: 220px; border-radius: 10px"
          />
        </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>
+          <a class="layui-inline site-down" href="javascript:void(0);" @click="changeTheme">
+            
+            {{ isDark ? 'Turn Off' : 'Turn On'}}
+          </a>
        </div>
        <div class="site-version">
-          <span>{{ t('home.version') }}：v<cite class="site-showv">0.4.4</cite></span>
          <span
-            ><router-link
-              class="layui-inline site-down"
-              to="/zh-CN/guide/changelog"
-              >{{ t('home.changelog') }}</router-link
+            >{{ 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.download') }}：<em class="site-showdowns">5463</em></span>
        </div>
      </div>
      <div class="site-banner-other">
@@ -38,7 +41,7 @@
          rel="nofollow"
          class="site-star"
        >
-          <i class="layui-icon"></i> Star <cite id="getStars">716</cite>
+          <i class="layui-icon"></i> Star <cite id="getStars">741</cite>
        </a>
        <a
          href="https://gitee.com/layui-vue"
@@ -58,7 +61,7 @@
        </a>
      </div>
    </div>
-    <div style="margin-left: 10%; margin-right: 10%">
+    <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">
@@ -98,45 +101,67 @@
      </div>
    </div>
    <div class="footer footer-index">
-      <p>
-        Copyright © 2022 <a href="/index.html">www.layui-vue.com</a> mit
-        licence
-      </p>
-      <p></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 { inject, provide } from 'vue';
+import { useI18n } from "vue-i18n";
 export default {
  name: "index",
  setup() {
    const { t } = useI18n();

-    return {
-      t
+    const isDark = inject("isDark");
+    const theme = inject("theme");
+
+    const changeTheme = () => {
+      isDark.value = !isDark.value;
+      if(theme.value === 'dark') {
+        theme.value = 'light';
+      } else {
+        theme.value = 'dark';
+      }
    }
-  }
-}
+
+    return {
+      t,
+      isDark,
+      theme,
+      changeTheme
+    };
+  },
+};
 </script>
 <style>
+#app,
+html,
+body {
+  height: 100%;
+}
 .site-container {
+  background: #fff;
  margin-top: 60px;
-  background-color: whitesmoke;
  height: 100%;
  width: 100%;
 }
 .site-banner {
-  position: relative;
-  height: 600px;
-  text-align: center;
+  height: 100%;
  overflow: hidden;
-  background-color: #393d49;
+  text-align: center;
+  position: relative;
+  border-bottom: 1px solid #eee;
+  background-image: url(../assets/background.svg);
+  background-repeat: no-repeat;
+  background-size: 100%;
 }
 .site-banner-bg {
  background-position: center 0;
 }
+
 .site-banner-bg,
 .site-banner-main {
  position: absolute;
@@ -151,21 +176,29 @@ export default {
 }
 .site-download a {
  position: relative;
-  padding: 0 50px 0 50px;
-  height: 60px;
-  line-height: 60px;
+  padding: 0 20px 0 20px;
+  height: 40px;
+  line-height: 40px;
  border-radius: 4px;
-  border: 1px solid #c2c2c2;
-  border-color: rgba(255, 255, 255, 0.2);
-  font-size: 24px;
-  color: #ccc;
+  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.05);
-  border-radius: 50px;
-  color: #ccc;
+  border-radius: 10px;
+}
+.site-download a:first-child {
+  background: #009688;
+  color: white;
+}
+.site-download a+a {
+  margin-left: 20px;
 }
 .site-zfj {
  padding-top: 25px;
@@ -200,26 +233,30 @@ export default {
 }
 .site-desc .web-font-desc {
  color: #fff;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 51px;
+  color: #213547;
+  font-size: 52px;
+  opacity: 0.82;
 }
 .web-font-desc {
-  font-style: normal;
-  font-weight: 300;
+  font-size: 76px;
+  line-height: 1.25;
+  font-weight: 900;
+  letter-spacing: -1.5px;
+  max-width: 960px;
+  margin: 0 auto;
 }
 .site-desc cite {
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
-  color: #c2c2c2;
-  color: rgba(255, 255, 255, 0.66);
+  color: rgba(60, 60, 60, 0.7);
  font-style: normal;
 }
 .site-version {
  position: relative;
  margin-top: 18px;
-  color: #ccc;
+  color: rgba(60, 60, 60, 0.7);
  font-size: 12px;
 }
 .site-version span {
@@ -229,18 +266,23 @@ export default {
  font-style: normal;
 }
 .site-version a {
-  color: #e2e2e2;
+  color: rgba(60, 60, 60, 0.7);
  text-decoration: none;
  margin-top: -4px;
 }
 .site-banner-other {
  position: absolute;
  left: 0;
-  bottom: 35px;
+  bottom: 90px;
  width: 100%;
  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;
@@ -249,10 +291,8 @@ export default {
  margin: 0 6px;
  padding: 0 8px;
  border-radius: 4px;
-  color: #c2c2c2;
-  color: rgba(255, 255, 255, 0.8);
-  border: 1px solid #c2c2c2;
-  border-color: rgba(255, 255, 255, 0.2);
+  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;
@@ -262,7 +302,9 @@ export default {
  padding: 30px 15px;
  line-height: 30px;
  text-align: center;
-  color: #666;
+  color: rgba(60, 60, 60, 0.7);
  font-weight: 300;
+  font-size: 13.6px;
+  background: #f9f9f9;
 }
 </style>
--- a/example/src/view/material.vue
+++ b/example/src/view/material.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="alone-banner layui-bg-black">
+  <div class="alone-banner">
    <div class="layui-main">
      <h1>物 料 市 场</h1>
      <p class="layui-hide-xs">让 每 一 个 轮 子 产 生 价 值 ✨<a style="color:white;" href="https://gitee.com/layui-vue/layui-vue/issues/new?issue%5Bassignee_id%5D=0&issue%5Bmilestone_id%5D=0">【投递】</a></p>