update dependencies and fix dark mode issue for lib no sup on vite

package.json

@@ -13,7 +13,8 @@
         "axios": "^0.26.0",
         "bootstrap-icons": "^1.8.1",
         "csv-parse": "^5.0.4",
-        "dayjs": "^1.10.7",
+        "darkreader": "^4.9.44",
+        "dayjs": "^1.10.8",
         "dexie": "^3.2.1",
         "floating-vue": "^2.0.0-beta.6",
         "lodash": "^4.17.21",
@@ -22,14 +23,14 @@
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
-        "@vitejs/plugin-vue": "^2.2.2",
+        "@vitejs/plugin-vue": "^2.2.4",
         "eslint": "^8.10.0",
-        "eslint-config-prettier": "^8.4.0",
+        "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-vue": "^8.5.0",
         "prettier": "2.5.1",
         "rollup-plugin-visualizer": "^5.6.0",
         "sass": "^1.49.9",
-        "vite": "^2.8.4",
+        "vite": "^2.8.6",
         "vue3-eventbus": "^2.0.0"
     }
 }

src/App.vue

@@ -16,7 +16,7 @@ import Footer from "components/Footer.vue";
 import FunctionBar from "./components/FunctionBar.vue";
 import ImportSongList from "components/ImportSongList.vue";
 import InfoPopUp from "popup/Info.vue";
-import interpolator from "vue-apply-darkmode";
+import Interpolator from "utils/vue-apply-darkmode.esm.js";
 
 //debug用变量，由于没响应式需求所以不用ref创建
 const develop = false;
@@ -106,7 +106,7 @@ onMounted(() => {
 <template>
   <div id="app">
     <div class="c-outer">
-      <interpolator ref="nightmodecomp">
+      <Interpolator ref="nightmodecomp">
         <Banner />
         <input v-show="develop" type="checkbox" v-model="ifDebug" />
         <div v-show="ifDebug">
@@ -119,7 +119,7 @@ onMounted(() => {
         <Footer />
         <InfoPopUp v-if="showInfo" v-on:closepopup="showInfo = false" />
         <div id="spaceholder" />
-      </interpolator>
+      </Interpolator>
     </div>
   </div>
 </template>

src/utils/vue-apply-darkmode.esm.js

@@ -0,0 +1,125 @@
+import { openBlock, createBlock, renderSlot } from "vue";
+import {
+  enable as enableDarkMode,
+  disable as disableDarkMode,
+} from "darkreader";
+
+var script = {
+  props: {
+    dark: {
+      type: Boolean,
+      default: false,
+    },
+    watchSystem: {
+      type: Boolean,
+      default: false,
+    },
+    brightness: {
+      type: Number,
+      default: 100,
+    },
+    contrast: {
+      type: Number,
+      default: 90,
+    },
+    sepia: {
+      type: Number,
+      default: 10,
+    },
+  },
+
+  data() {
+    return {
+      activeDark: this.dark,
+      systemDark: false,
+      mq: null,
+    };
+  },
+
+  computed: {
+    appearanceSettings() {
+      return (
+        String(this.brightness).padStart(3, 0) +
+        String(this.contrast).padStart(3, 0) +
+        String(this.sepia).padStart(3, 0)
+      );
+    },
+  },
+  watch: {
+    activeDark() {
+      this.toggleDarkMode();
+    },
+
+    systemDark() {
+      this.toggleDarkMode();
+    },
+
+    appearanceSettings() {
+      this.toggleDarkMode();
+    },
+  },
+
+  mounted() {
+    if (this.mq === null && window) {
+      this.mq = window.matchMedia("(prefers-color-scheme: dark)");
+      this.mq.addEventListener("change", this.updateSystemTheme);
+    }
+
+    this.toggleDarkMode();
+  },
+
+  beforeDestroy() {
+    if (this.mq !== null) {
+      this.mq.removeEventListener("change", this.updateSystemTheme);
+    }
+  },
+
+  methods: {
+    updateSystemTheme(update) {
+      this.systemDark = update.matches;
+    },
+
+    toggleDarkMode() {
+      if (window) {
+        if (this.activeDark || (!this.activeDark && this.systemDark)) {
+          enableDarkMode({
+            brightness: this.brightness,
+            contrast: this.contrast,
+            sepia: this.sepia,
+          });
+        } else disableDarkMode();
+      }
+    },
+  },
+};
+
+const _hoisted_1 = {
+  class: "vue-apply-darkmode",
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (
+    openBlock(),
+    createBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")])
+  );
+}
+
+script.render = render;
+
+// Import vue component
+// IIFE injects install function into component, allowing component
+// to be registered via Vue.use() as well as Vue.component(),
+
+var entry_esm = /*#__PURE__*/ (() => {
+  // Get component instance
+  const installable = script; // Attach install function executed by Vue.use()
+
+  installable.install = (app) => {
+    app.component("VueApplyDarkmode", installable);
+  };
+
+  return installable;
+})(); // It's possible to expose named exports when writing components that can
+// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
+// export const RollupDemoDirective = directive;
+
+export default entry_esm;