兼容 css3 特性

example/docs/zh-CN/components/animation.md

@@ -77,113 +77,6 @@ export default {
   }
 }
 </script>
-<style>
-.site-doc-icon {
-  margin-bottom: 50px;
-  font-size: 0;
-}
-
-.site-doc-icon li .doc-icon-name,
-.site-doc-icon li .doc-icon-code {
-  color: #c2c2c2;
-}
-
-.site-doc-icon li .doc-icon-fontclass {
-  height: 40px;
-  line-height: 20px;
-  padding: 0 5px;
-  font-size: 13px;
-  color: #333;
-}
-
-.site-doc-icon li {
-  display: inline-block;
-  vertical-align: middle;
-  width: 16.5%;
-  height: 105px;
-  line-height: 25px;
-  padding: 20px 0;
-  margin-right: -1px;
-  margin-bottom: -1px;
-  border: 1px solid #e2e2e2;
-  font-size: 14px;
-  text-align: center;
-  color: #666;
-  transition: all 0.3s;
-  -webkit-transition: all 0.3s;
-}
-
-.site-doc-icon li .layui-icon {
-  display: inline-block;
-  font-size: 32px;
-}
-
-.site-doc-color {
-  margin: 15px 0;
-}
-
-.site-doc-necolor li div {
-  border-radius: 0;
-  color: #000 !important;
-}
-
-.site-doc-color li div {
-  padding: 20px 10px;
-  color: #fff;
-  text-align: center;
-  line-height: 1.6;
-  font-size: 14px;
-}
-
-.site-doc-bgcolor li {
-  padding: 20px 10px;
-}
-.anim .site-doc-icon {
-  margin-bottom: 50px;
-  font-size: 0;
-}
-
-.anim .site-doc-icon li {
-  width: 50%;
-}
-
-.anim .site-doc-anim li {
-  height: auto;
-}
-
-.anim .site-doc-icon li {
-  display: inline-block;
-  vertical-align: middle;
-  width: 16.5%;
-  height: 105px;
-  line-height: 25px;
-  padding: 20px 0;
-  margin-right: -1px;
-  margin-bottom: -1px;
-  border: 1px solid #e2e2e2;
-  font-size: 14px;
-  text-align: center;
-  color: #666;
-  transition: all 0.3s;
-  -webkit-transition: all 0.3s;
-}
-
-.anim .site-doc-icon li .layui-anim {
-  width: 125px;
-  height: 125px;
-  line-height: 125px;
-  margin: 0 auto 10px;
-  text-align: center;
-  background-color: #009688;
-  cursor: pointer;
-  color: #fff;
-  border-radius: 50%;
-}
-
-.anim .site-doc-icon li .code {
-  white-space: nowrap;
-}
-</style>
 
 :::
 

example/docs/zh-CN/components/grid.md

@@ -15,11 +15,11 @@
 <template>
   <lay-row space="10">
      <lay-col md="12"><div class="grid-demo">1</div></lay-col>
-     <lay-col md="12"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
+     <lay-col md="12"><div class="grid-demo">2</div></lay-col>
      <lay-col md="6"><div class="grid-demo">3</div></lay-col>
-     <lay-col md="6"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
+     <lay-col md="6"><div class="grid-demo">4</div></lay-col>
      <lay-col md="6"><div class="grid-demo">5</div></lay-col>
-     <lay-col md="6"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
+     <lay-col md="6"><div class="grid-demo">6</div></lay-col>
   </lay-row>
 </template>
 
@@ -35,15 +35,12 @@ export default {
 </script>
 
 <style>
-.grid-demo-bg1 {
-    background-color: #63BA79;
-}
 .grid-demo {
     padding: 10px;
     line-height: 50px;
     border-radius: 2px;
     text-align: center;
-    background-color: #79C48C;
+    background-color: var(--global-checked-color);
     color: #fff;
 }
 </style>
@@ -58,7 +55,7 @@ export default {
 <template>
   <lay-row space="10">
      <lay-col md="12"><div class="grid-demo">1</div></lay-col>
-     <lay-col md="6" mdOffset="6"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
+     <lay-col md="6" mdOffset="6"><div class="grid-demo">2</div></lay-col>
   </lay-row>
 </template>
 
@@ -74,15 +71,12 @@ export default {
 </script>
 
 <style>
-.grid-demo-bg1 {
-    background-color: #63BA79;
-}
 .grid-demo {
     padding: 10px;
     line-height: 50px;
     border-radius: 2px;
     text-align: center;
-    background-color: #79C48C;
+    background-color: var(--global-checked-color);
     color: #fff;
 }
 </style>
@@ -97,7 +91,7 @@ export default {
 <template>
   <lay-row space="10">
      <lay-col md="12" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
-     <lay-col md="12" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
+     <lay-col md="12" sm="12" xs="24"><div class="grid-demo">2</div></lay-col>
   </lay-row>
 </template>
 
@@ -112,15 +106,12 @@ export default {
 }
 </script>
 <style>
-.grid-demo-bg1 {
-    background-color: #63BA79;
-}
 .grid-demo {
     padding: 10px;
     line-height: 50px;
     border-radius: 2px;
     text-align: center;
-    background-color: #79C48C;
+    background-color: var(--global-checked-color);
     color: #fff;
 }
 </style>
@@ -136,11 +127,11 @@ export default {
   <lay-container fluid>
     <lay-row space="10">
       <lay-col md="4" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
-      <lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
+      <lay-col md="4" sm="12" xs="24"><div class="grid-demo">2</div></lay-col>
       <lay-col md="4" sm="12" xs="24"><div class="grid-demo">3</div></lay-col>
-      <lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
+      <lay-col md="4" sm="12" xs="24"><div class="grid-demo">4</div></lay-col>
       <lay-col md="4" sm="12" xs="24"><div class="grid-demo">5</div></lay-col>
-      <lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
+      <lay-col md="4" sm="12" xs="24"><div class="grid-demo">6</div></lay-col>
     </lay-row>
   </lay-container>
 </template>
@@ -156,15 +147,12 @@ export default {
 }
 </script>
 <style>
-.grid-demo-bg1 {
-    background-color: #63BA79;
-}
 .grid-demo {
     padding: 10px;
     line-height: 50px;
     border-radius: 2px;
     text-align: center;
-    background-color: #79C48C;
+    background-color: var(--global-checked-color);
     color: #fff;
 }
 </style>

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,
+      () => route.path, (val) => {
-      (val) => {
         currentPath.value = val;
-      },
+      },{immediate: true, deep: true}
-      {
-        immediate: true,
-        deep: true,
-      }
     );
 
     const handleClick = function (menu) {
       router.push(menu.path);
     };
 
-    const theme = {
+    const theme = "light";
-      "@global-primary-color":"red"
+
+    const themeVariable = {
     }
 
     return {
       menus,
       theme,
+      themeVariable,
       currentPath,
       handleClick,
     };

src/component/button/index.less

@@ -1,7 +1,12 @@
 @import "../../theme/variable.less";
 
-@button-primary-color: @global-primary-color;
+@button-primary-color: var(--button-primary-color);
-@button-border-radius: @global-border-radius;
+@button-border-radius: var(--button-border-radius);
+
+:root {
+  --button-primary-color: @global-primary-color;
+  --button-border-radius: @global-border-radius;
+}
 
 .layui-btn {
   height: 38px;

src/provider/index.vue

@@ -8,32 +8,41 @@ export default {
 <script setup lang="ts">
 
 export interface LayConfigProviderProps {
-    theme?: object;
+    local?: string;
+    theme?: string;
+    themeVariable?: object;
 }
 
 const props = withDefaults(defineProps<LayConfigProviderProps>(),
   {
-    
+    local: 'zh_cn', 
+    theme: 'light',
   }
 );
 
-
+const changeTheme = (theme: string) => {
-const changeTheme = (vars: any) => {
+  document.body.removeAttribute("lay-theme");
-  // @ts-ignore
+  document.body.setAttribute("lay-theme", theme);
-  if (!window.less || !window.less.modifyVars) {
+}
-    return;
+
+const changeThemeVariable = (vars: any) => {
+    if(vars!=null){
+      const keys = Object.keys(vars);
+      for(let i=0;i<keys.length;i++){
+        const key = keys[i];
+        const value=vars[key];
+        document.documentElement.style.setProperty(key,value);
+      }
     }
-  // @ts-ignore
-  window.less.modifyVars(vars).then((res) => {
-      console.log(res);
-  }).catch((res: any) => {
-      console.log(res);
-  });
 };
 
-watch(() => props.theme, (vars) => {
+watch(() => props.theme, (theme) => {
-    changeTheme(vars);
+  changeTheme(theme);
-},{immediate: true})
+},{immediate: true});
+
+watch(() => props.themeVariable, (vars) => {
+    changeThemeVariable(vars);
+},{immediate: true, deep: true});
 
 </script>
 

src/theme/variable.less

@@ -1,14 +1,30 @@
-// 主题色
+@global-primary-color: var(--global-primary-color);
-@global-primary-color: #009688;
 
-// 选中色
+@global-checked-color: var(--global-checked-color);
-@global-checked-color: #5FB878;
 
-// 圆角度
+@global-border-radius: var(--global-border-radius);
-@global-border-radius: 2px;
 
-// 前景色  
+@global-fore-color: var(--global-fore-color);
-@global-fore-color: #393D49;
 
-// 背景色
+@global-back-color: var(--global-back-color);
-@global-back-color: #ffffff;
+
+:root {
+
+  --global-primary-color: #009688;
+
+  --global-checked-color: #5fb878;
+
+  --global-border-radius: 2px;
+
+  --global-fore-color: #393d49;
+
+  --global-back-color: #ffffff;
+
+}
+
+body[lay-theme='dark'] {
+
+  --global-fore-color: #ffffff;
+
+  --global-back-color: #393d49;
+}