docs: 集成 dark-reader

package.json

@@ -43,6 +43,7 @@
     "@layui/layer-vue": "^1.3.11",
     "@vueuse/core": "^7.6.2",
     "async-validator": "^4.0.7",
+    "darkreader": "^4.9.46",
     "evtd": "^0.2.3",
     "moment": "^2.29.1",
     "uuid": "^8.3.2",

src/component/button/index.vue

@@ -13,7 +13,7 @@ import {
   ButtonSize,
   ButtonType,
 } from "./interface";
-import { BooleanOrString, String } from "src/types";
+import { BooleanOrString, String } from "../../types";
 
 export interface LayButtonProps {
   type?: ButtonType;

src/component/card/index.vue

@@ -7,7 +7,7 @@ export default {
 <script setup lang="ts">
 import { computed, useSlots } from "vue";
 import "./index.less";
-import { String } from "src/types";
+import { String } from "../../types";
 import { CardShadow } from "./interface";
 
 const slot = useSlots();

src/component/datePicker/interface.ts

@@ -0,0 +1 @@
+export type DatePickerType = "date" | "datetime" | "year" | "time" | "month";

src/provider/index.vue

@@ -7,6 +7,11 @@ export default {
 <script setup lang="ts">
 import { watch } from "vue";
 import { useI18n } from "vue-i18n";
+import {
+  enable as enableDarkMode,
+  disable as disableDarkMode,
+} from "darkreader";
+
 const { locale, setLocaleMessage, mergeLocaleMessage } = useI18n();
 
 export interface LayConfigProviderProps {
@@ -34,8 +39,15 @@ const changeLocales = (lang: string, locales: any, merge: boolean) => {
 };
 
 const changeTheme = (theme: string) => {
-  document.body.removeAttribute("lay-theme");
-  document.body.setAttribute("lay-theme", theme);
+  if (theme === "dark") {
+    enableDarkMode({
+      brightness: 100,
+      contrast: 90,
+      sepia: 10,
+    });
+  } else {
+    disableDarkMode();
+  }
 };
 
 const changeThemeVariable = (vars: any) => {

src/theme/variable.less

@@ -44,10 +44,6 @@
 
   --global-border-radius: 2px;
 
-  --global-fore-color: #333;
-
-  --global-back-color: #ffffff;
-
   --global-neutral-color-1: #FAFAFA;
 
   --global-neutral-color-2: #F6F6F6;
@@ -63,27 +59,5 @@
   --global-neutral-color-7: #cccccc;
   
   --global-neutral-color-8: #c2c2c2;
-}
-
-body[lay-theme="dark"] {
   
-  --global-fore-color: #ffffff;
-
-  --global-back-color: #333;
-
-  --global-neutral-color-1: #FAFAFA;
-
-  --global-neutral-color-2: #F6F6F6;
-  
-  --global-neutral-color-3: #eeeeee;
-  
-  --global-neutral-color-4: #e2e2e2;
-  
-  --global-neutral-color-5: #dddddd;
-  
-  --global-neutral-color-6: #d2d2d2;
-  
-  --global-neutral-color-7: #cccccc;
-  
-  --global-neutral-color-8: #c2c2c2;
-}
+}