兼容 css3 特性

example/src/assets/css/markdown.css

@@ -234,7 +234,7 @@ form {
   line-height: 125px;
   margin: 0 auto 10px;
   text-align: center;
-  background-color: #009688;
+  background-color: var(--global-primary-color);
   cursor: pointer;
   color: #fff;
   border-radius: 50%;
@@ -261,6 +261,7 @@ body::-webkit-scrollbar {
 .layui-menu .layui-menu-item-group > .layui-menu-body-title {
   padding-left: 15px;
 }
+
 .lay-link:hover{
   color: #5FB878;
 }

example/src/layouts/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <lay-config-provider :theme="theme">
+  <lay-config-provider :themeVariable="themeVariable">
     <lay-layout class="layui-layout-document">
       <lay-header
         ><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
@@ -77,27 +77,24 @@ export default {
     });
 
     watch(
-      () => route.path,
-      (val) => {
+      () => route.path, (val) => {
         currentPath.value = val;
-      },
-      {
-        immediate: true,
-        deep: true,
-      }
+      },{immediate: true, deep: true}
     );
 
     const handleClick = function (menu) {
       router.push(menu.path);
     };
 
-    const theme = {
-      "@global-primary-color":"red"
+    const theme = "light";
+
+    const themeVariable = {
     }
 
     return {
       menus,
       theme,
+      themeVariable,
       currentPath,
       handleClick,
     };