diff --git a/package.json b/package.json
index d077e98b5..b831783f1 100644
--- a/package.json
+++ b/package.json
@@ -13,13 +13,13 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/vue-fontawesome": "^3.0.1",
     "@nutui/nutui": "^3.1.23-beta.1",
+    "@vueuse/core": "^8.9.2",
     "axios": "^0.27.2",
     "dayjs": "^1.11.3",
     "modern-css-reset": "^1.4.0",
     "monaco-editor": "^0.33.0",
     "pinia": "^2.0.14",
     "vue": "^3.2.37",
-    "vue-clipboard3": "^2.0.0",
     "vue-i18n": "^9.2.0-beta.36",
     "vue-router": "^4.0.16",
     "vuedraggable": "^4.1.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 09ca75d5a..b790bcff5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,6 +12,7 @@ specifiers:
   '@types/node': ^18.0.0
   '@vitejs/plugin-legacy': ^1.8.2
   '@vitejs/plugin-vue': ^2.3.3
+  '@vueuse/core': ^8.9.2
   axios: ^0.27.2
   consola: ^2.15.3
   dayjs: ^1.11.3
@@ -29,7 +30,6 @@ specifiers:
   vite-plugin-style-import: ^2.0.0
   vite-plugin-svg-icons: ^2.0.1
   vue: ^3.2.37
-  vue-clipboard3: ^2.0.0
   vue-i18n: ^9.2.0-beta.36
   vue-router: ^4.0.16
   vue-tsc: ^0.35.2
@@ -41,13 +41,13 @@ dependencies:
   '@fortawesome/free-solid-svg-icons': 6.1.1
   '@fortawesome/vue-fontawesome': 3.0.1_u4vq2zlnk6o5gih5o4cnqmjgea
   '@nutui/nutui': 3.1.23-beta.1_vue@3.2.37
+  '@vueuse/core': 8.9.2_vue@3.2.37
   axios: 0.27.2
   dayjs: 1.11.3
   modern-css-reset: 1.4.0
   monaco-editor: 0.33.0
   pinia: 2.0.14_j6bzmzd4ujpabbp5objtwxyjp4
   vue: 3.2.37
-  vue-clipboard3: 2.0.0
   vue-i18n: 9.2.0-beta.36_vue@3.2.37
   vue-router: 4.0.16_vue@3.2.37
   vuedraggable: 4.1.0_vue@3.2.37
@@ -502,6 +502,10 @@ packages:
       '@types/node': 18.0.0
     dev: true
 
+  /@types/web-bluetooth/0.0.14:
+    resolution: {integrity: sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==}
+    dev: false
+
   /@vitejs/plugin-legacy/1.8.2_vite@2.9.13:
     resolution: {integrity: sha512-NCOKU+pU+cxLMR9P9RTolEuOK+h+zYBXlknj+zGcKSj/NXBZYgA1GAH1FnO4zijoWRiTaiOm2ha9LQrELE7XHg==}
     engines: {node: '>=12.0.0'}
@@ -634,6 +638,43 @@ packages:
   /@vue/shared/3.2.37:
     resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}
 
+  /@vueuse/core/8.9.2_vue@3.2.37:
+    resolution: {integrity: sha512-dE3/JgwqIHmmtmRBdZAnq87rZCSFbYVps2t3gWy9Jv/+Qp6sHSSKuPFtwguJVZ2OnaGnB/AMRmx4CuFRxFin3A==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      '@types/web-bluetooth': 0.0.14
+      '@vueuse/metadata': 8.9.2
+      '@vueuse/shared': 8.9.2_vue@3.2.37
+      vue: 3.2.37
+      vue-demi: 0.13.1_vue@3.2.37
+    dev: false
+
+  /@vueuse/metadata/8.9.2:
+    resolution: {integrity: sha512-g2s2BeyeEtJElmMFfFPnM+BTvnt0omniyvz8U18/zXDpQIMGozlNQgHoFeratyMfgVBhH/u2VKzmchChtDsgPQ==}
+    dev: false
+
+  /@vueuse/shared/8.9.2_vue@3.2.37:
+    resolution: {integrity: sha512-s4Nk82oheL5z1GywyGnqjob0MzbAt88olMZa0vgt/p3gcMsT8Ff7+SqmNgEFC6AAs6xiuhOAZpnew9Zs3d90yQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      vue: 3.2.37
+      vue-demi: 0.13.1_vue@3.2.37
+    dev: false
+
   /JSONStream/1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
@@ -960,14 +1001,6 @@ packages:
       static-extend: 0.1.2
     dev: true
 
-  /clipboard/2.0.11:
-    resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==}
-    dependencies:
-      good-listener: 1.2.2
-      select: 1.1.2
-      tiny-emitter: 2.1.0
-    dev: false
-
   /cliui/7.0.4:
     resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
     dependencies:
@@ -1297,10 +1330,6 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
-  /delegate/3.2.0:
-    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
-    dev: false
-
   /diff/3.5.0:
     resolution: {integrity: sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==}
     engines: {node: '>=0.3.1'}
@@ -1869,12 +1898,6 @@ packages:
       ini: 1.3.8
     dev: true
 
-  /good-listener/1.2.2:
-    resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==}
-    dependencies:
-      delegate: 3.2.0
-    dev: false
-
   /graceful-fs/4.2.10:
     resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
     dev: true
@@ -3025,10 +3048,6 @@ packages:
       immutable: 4.1.0
       source-map-js: 1.0.2
 
-  /select/1.1.2:
-    resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==}
-    dev: false
-
   /semver/5.7.1:
     resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
     hasBin: true
@@ -3352,10 +3371,6 @@ packages:
       readable-stream: 3.6.0
     dev: true
 
-  /tiny-emitter/2.1.0:
-    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
-    dev: false
-
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -3629,12 +3644,6 @@ packages:
       - supports-color
     dev: false
 
-  /vue-clipboard3/2.0.0:
-    resolution: {integrity: sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==}
-    dependencies:
-      clipboard: 2.0.11
-    dev: false
-
   /vue-demi/0.13.1_vue@3.2.37:
     resolution: {integrity: sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==}
     engines: {node: '>=12'}
diff --git a/src/App.vue b/src/App.vue
index 4cd30dc19..38508aeb8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,6 @@
 
 <script setup lang="ts">
   import NavBar from '@/components/NavBar.vue';
-  import { setColorThemeClass } from '@/utils/setColorThemeClass';
   import { onMounted, watchEffect, ref } from 'vue';
   import { useGlobalStore } from '@/store/global';
   import { useI18n } from 'vue-i18n';
@@ -15,6 +14,7 @@
   import { storeToRefs } from 'pinia';
   import { useSubsStore } from '@/store/subs';
   import { getFlowsUrlList } from '@/utils/getFlowsUrlList';
+  import { useDark } from '@vueuse/core';
 
   const { t } = useI18n();
 
@@ -31,7 +31,12 @@
   globalStore.setBottomSafeArea(navigator.standalone ? 32 : 6);
 
   // 初始化颜色主题
-  setColorThemeClass();
+  useDark({
+    selector: 'body',
+    attribute: 'class',
+    valueDark: 'dark-mode',
+    valueLight: 'light-mode',
+  });
 
   // 引入 inoBounce 禁止过度滑动橡皮筋效果
   onMounted(() => {
diff --git a/src/components/ArtifactsListItem.vue b/src/components/ArtifactsListItem.vue
index 5ca6f8dcb..016e5110f 100644
--- a/src/components/ArtifactsListItem.vue
+++ b/src/components/ArtifactsListItem.vue
@@ -102,10 +102,10 @@
   import { useArtifactsStore } from '@/store/artifacts';
   import { Dialog, Toast, Notify } from '@nutui/nutui';
   import { butifyDate } from '@/utils/butifyDate';
-  import useClipboard from 'vue-clipboard3';
   import { storeToRefs } from 'pinia';
+  import { useClipboard } from '@vueuse/core';
 
-  const { toClipboard } = useClipboard();
+  const { copy } = useClipboard();
 
   const { t } = useI18n();
 
@@ -214,17 +214,11 @@
     }
   };
 
-  const onClickCopyLink = async () => {
-    try {
-      await toClipboard(artifact.value.url);
-      Notify.success(t('syncPage.copyNotify.succeed'), {
-        duration: 1500,
-      });
-    } catch (e) {
-      Notify.danger(t('syncPage.copyNotify.succeed', { e }), {
-        duration: 1500,
-      });
-    }
+  const onClickCopyLink = () => {
+    copy(encodeURI(artifact.value.url));
+    Notify.success(t('syncPage.copyNotify.succeed'), {
+      duration: 1500,
+    });
   };
 
   const onDeleteConfirm = async () => {
diff --git a/src/components/SubListItem.vue b/src/components/SubListItem.vue
index 97f95cdeb..3ee4a8dee 100644
--- a/src/components/SubListItem.vue
+++ b/src/components/SubListItem.vue
@@ -92,19 +92,19 @@
   import PreviewPanel from '@/components/PreviewPanel.vue';
   import icon from '@/assets/icons/logo.svg';
   import { isMobile } from '@/utils/isMobile';
-  import { Dialog, Notify, Toast } from '@nutui/nutui';
+  import { Dialog, Toast, Notify } from '@nutui/nutui';
   import dayjs from 'dayjs';
   import { createVNode, ref, computed, toRaw } from 'vue';
   import { useRouter } from 'vue-router';
-  import useClipboard from 'vue-clipboard3';
   import { useSubsStore } from '@/store/subs';
   import { storeToRefs } from 'pinia';
   import { useGlobalStore } from '@/store/global';
   import { getString } from '@/utils/flowTransfer';
   import { useI18n } from 'vue-i18n';
   import { useSubsApi } from '@/api/subs';
+  import { useClipboard } from '@vueuse/core';
 
-  const { toClipboard } = useClipboard();
+  const { copy } = useClipboard();
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -261,22 +261,15 @@
     });
   };
 
-  const onClickCopyLink = async () => {
-    try {
-      const host = import.meta.env.VITE_API_URL;
-      const url = `${host}/download/${
-        props.type === 'collection' ? 'collection/' : ''
-      }${name}`;
-      await toClipboard(encodeURI(url));
-      Notify.success(t('subPage.copyNotify.succeed'), {
-        duration: 1500,
-      });
-    } catch (e) {
-      Notify.danger(t('subPage.copyNotify.succeed', { e }), {
-        duration: 1500,
-      });
-      console.error(e);
-    }
+  const onClickCopyLink = () => {
+    const host = import.meta.env.VITE_API_URL;
+    const url = `${host}/download/${
+      props.type === 'collection' ? 'collection/' : ''
+    }${name}`;
+    copy(encodeURI(url));
+    Notify.success(t('subPage.copyNotify.succeed'), {
+      duration: 1500,
+    });
   };
 </script>
 
diff --git a/src/router/index.ts b/src/router/index.ts
index c5b7c75e3..6003a379d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -112,7 +112,7 @@ router.beforeResolve(async to => {
                 cover: true,
               }
             );
-            await initStores(false, true, false);
+            await initStores(false, true, true);
             fetchLoading.hide();
           }
         }
diff --git a/src/utils/setColorThemeClass.ts b/src/utils/setColorThemeClass.ts
deleted file mode 100644
index a033a9f4c..000000000
--- a/src/utils/setColorThemeClass.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useGlobalStore } from '@/store/global';
-
-export const setColorThemeClass = () => {
-  const themeList = ['light-mode', 'dark-mode'];
-  const body = document.querySelector('body');
-  const mql = window.matchMedia('(prefers-color-scheme: dark)');
-
-  const setTheme = () => {
-    if (mql.matches) {
-      body.classList.add('dark-mode');
-      useGlobalStore().setDarkMode(true);
-    } else {
-      body.classList.add('light-mode');
-      useGlobalStore().setDarkMode(false);
-    }
-  };
-
-  const event = e => {
-    body.classList.remove(...themeList);
-    setTheme();
-    console.log('dark mode: ', e.matches);
-  };
-
-  setTheme();
-  if (mql.addEventListener) mql.addEventListener('change', event);
-  // 兼容低版本
-  if (mql.addListener) mql.addListener(event);
-};
diff --git a/src/views/SubEditor.vue b/src/views/SubEditor.vue
index 5e5215846..706f3e326 100644
--- a/src/views/SubEditor.vue
+++ b/src/views/SubEditor.vue
@@ -445,7 +445,7 @@
       if (configName === 'UNTITLED') {
         res = await subsApi.createSub(editType as string, data);
         await subsStore.fetchSubsData();
-        if (data.source === 'remote') await initStores(false, true, true);
+        if (data.source === 'remote') await initStores(false, true, false);
       } else {
         let apiType = '';
         if (editType === 'subs') {
diff --git a/src/views/editor/ActionBlock.vue b/src/views/editor/ActionBlock.vue
index d861082ad..e7c8cfb55 100644
--- a/src/views/editor/ActionBlock.vue
+++ b/src/views/editor/ActionBlock.vue
@@ -101,6 +101,7 @@
   import { useI18n } from 'vue-i18n';
   import i18nFile from '@/locales/zh';
   import { isMobile } from '@/utils/isMobile';
+  import { useEventListener } from '@vueuse/core';
 
   const { t } = useI18n();
   const drag = ref(true);
@@ -203,7 +204,7 @@
     if (!isMobile()) {
       clickValue.value = toRaw(columns.value[0]);
       const body = document.querySelector('body');
-      body.addEventListener('click', e => {
+      useEventListener(body, 'click', e => {
         const el = e.target as HTMLElement;
         if (el.className === 'nut-picker-roller-item') {
           const container = el.parentElement;