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) => {

package/document/src/document/zh-CN/guide/changelog.md

@@ -16,6 +16,7 @@
       <li> 
         <h3>1.0.2 <span class="layui-badge-rim">2022-04-07</span></h3> 
         <ul>
+          <li>[新增] config-provider 组件 dark-partial 属性, 夜间主题偏好配置。(by @就眠儀式)</li>
           <li>[修复] page 组件 pages 属性为单数时, 页码计算错误。(by @就眠儀式)</li>
           <li>[修复] dark 模式 step 组件线条不显示。(by @莫名点)</li>
         </ul> 

package/document/src/document/zh-CN/guide/dark.md

@@ -17,4 +17,40 @@
 <script setup>
 const theme = ref('dark')
 </script>
-```
+```
+
+::: title 偏好设置
+:::
+
+::: describe 当内置的夜间样式不满足要求时, 我们提供 dark-partial 配置偏好。
+:::
+
+```vue
+<template>
+    <lay-config-provider :theme="theme" :dark-partial="darkPartial">
+        <App />
+    </lay-config-provider>
+</template>
+
+<script setup>
+const theme = ref('dark')
+
+const darkPartial = {
+    brightness: 100,
+    contrast: 90,
+    grayscale: 0,
+    darkSchemeBackgroundColor: "black";
+    darkSchemeTextColor: "white";
+}
+</script>
+```
+::: describe brightness: 亮度
+:::
+::: describe contrast: 对比度
+:::
+::: describe grayscale: 灰度值
+:::
+::: describe darkSchemeBackgroundColor: 背景颜色
+:::
+::: describe darkSchemeTextColor: 文字颜色
+:::

pnpm-lock.yaml

@@ -52,6 +52,7 @@ importers:
       '@vue/compiler-sfc': ^3.2.31
       '@vue/server-renderer': ^3.2.31
       '@vueuse/core': ^7.6.2
+      animate.css: ^4.1.1
       async-validator: ^4.0.7
       cropperjs: ^1.5.12
       darkreader: ^4.9.46
@@ -71,6 +72,7 @@ importers:
       xlsx: ^0.18.4
     dependencies:
       '@vueuse/core': 7.7.1_vue@3.2.31
+      animate.css: 4.1.1
       async-validator: 4.0.7
       cropperjs: 1.5.12
       darkreader: 4.9.46
@@ -2071,6 +2073,10 @@ packages:
       uri-js: 4.4.1
     dev: true
 
+  /animate.css/4.1.1:
+    resolution: {integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==}
+    dev: false
+
   /ansi-escapes/3.2.0:
     resolution: {integrity: sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==}
     engines: {node: '>=4'}