feat: 新增 config-provider 夜间模式偏好配置

package/component/package.json

@@ -4,7 +4,7 @@
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
-  "homepage": "http://www.layui-vue.com",
+  "homepage": "https://gitee.com/layui/layui-vue/blob/next/README.md",
   "main": "es/index.js",
   "unpkg": "umd/index.js",
   "jsdelivr": "umd/index.js",
@@ -39,7 +39,8 @@
     "moment": "^2.29.1",
     "uuid": "^8.3.2",
     "vue-i18n": "^9.2.0-beta.34",
-    "xlsx": "^0.18.4"
+    "xlsx": "^0.18.4",
+    "animate.css": "^4.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",

package/component/src/provider/index.vue

@@ -10,6 +10,8 @@ import { useI18n } from "vue-i18n";
 import {
   enable as enableDarkMode,
   disable as disableDarkMode,
+  Theme,
+  DynamicThemeFix,
 } from "darkreader";
 
 const { locale, setLocaleMessage, mergeLocaleMessage } = useI18n();
@@ -19,6 +21,7 @@ export interface LayConfigProviderProps {
   locales?: [];
   theme?: string;
   themeVariable?: any;
+  darkPartial?: any;
 }
 
 const props = withDefaults(defineProps<LayConfigProviderProps>(), {
@@ -39,28 +42,33 @@ const changeLocales = (lang: string, locales: any, merge: boolean) => {
 };
 
 const changeTheme = (theme: string) => {
+
+  const defaultPartial: Partial<Theme> = {
+    mode: 1,
+    brightness: 100,
+    contrast: 90,
+    sepia: 0,
+    grayscale: 0
+  };
+
+  const defaultFixes: DynamicThemeFix = {
+    css: "",
+    invert: [],
+    ignoreImageAnalysis: [],
+    disableStyleSheetsProxy: false,
+    ignoreInlineStyle: [
+      ".layui-colorpicker-trigger-span",
+      "div.layui-color-picker *",
+    ]
+  };
+
+  Object.assign(defaultPartial, props.darkPartial);
+
   if (theme === "dark") {
-    enableDarkMode(
-      {
-        mode: 1,
-        brightness: 100,
-        contrast: 90,
-        sepia: 0,
-      },
-      {
-        invert: [],
-        css: ``,
-        ignoreInlineStyle: [
-          ".layui-colorpicker-trigger-span",
-          "div.layui-color-picker *",
-        ],
-        ignoreImageAnalysis: [],
-        disableStyleSheetsProxy: false,
-      }
-    );
-  } else {
+    enableDarkMode(defaultPartial, defaultFixes);
+  } else if(theme === "light"){
     disableDarkMode();
-  }
+  } 
 };
 
 const changeThemeVariable = (vars: any) => {