兼容 css3 特性

src/component/button/index.less

@@ -1,7 +1,12 @@
 @import "../../theme/variable.less";
 
-@button-primary-color: @global-primary-color;
-@button-border-radius: @global-border-radius;
+@button-primary-color: var(--button-primary-color);
+@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) => {
+  document.body.removeAttribute("lay-theme");
+  document.body.setAttribute("lay-theme", theme);
+}
 
-const changeTheme = (vars: any) => {
-  // @ts-ignore
-  if (!window.less || !window.less.modifyVars) {
-    return;
-  }
-  // @ts-ignore
-  window.less.modifyVars(vars).then((res) => {
-      console.log(res);
-  }).catch((res: any) => {
-      console.log(res);
-  });
+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);
+      }
+    }
 };
 
-watch(() => props.theme, (vars) => {
-    changeTheme(vars);
-},{immediate: true})
+watch(() => props.theme, (theme) => {
+  changeTheme(theme);
+},{immediate: true});
+
+watch(() => props.themeVariable, (vars) => {
+    changeThemeVariable(vars);
+},{immediate: true, deep: true});
 
 </script>
 

src/theme/variable.less

@@ -1,14 +1,30 @@
-// 主题色
-@global-primary-color: #009688;
+@global-primary-color: var(--global-primary-color);
 
-// 选中色
-@global-checked-color: #5FB878;
+@global-checked-color: var(--global-checked-color);
 
-// 圆角度
-@global-border-radius: 2px;
+@global-border-radius: var(--global-border-radius);
 
-// 前景色  
-@global-fore-color: #393D49;
+@global-fore-color: var(--global-fore-color);
 
-// 背景色
-@global-back-color: #ffffff;
+@global-back-color: var(--global-back-color);
+
+: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;
+}