From f397b82111d3a8e032e933a4f742889e1cfb0b18 Mon Sep 17 00:00:00 2001
From: ivamp <im@ivampiresp.com>
Date: Thu, 7 Dec 2023 22:17:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E8=BF=9B=20=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/getTheme.ts        | 8 ++++++++
 src/views/documents/Create.vue | 7 ++-----
 src/views/documents/View.vue   | 4 +++-
 3 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 src/plugins/getTheme.ts

diff --git a/src/plugins/getTheme.ts b/src/plugins/getTheme.ts
new file mode 100644
index 0000000..388a9e7
--- /dev/null
+++ b/src/plugins/getTheme.ts
@@ -0,0 +1,8 @@
+let matchResult = window.matchMedia('(prefers-color-scheme: dark)');
+
+
+function getTheme() {
+    return matchResult.matches ? 'dark' : 'light'
+}
+
+export default getTheme()
diff --git a/src/views/documents/Create.vue b/src/views/documents/Create.vue
index 2380b9b..dcfb4de 100644
--- a/src/views/documents/Create.vue
+++ b/src/views/documents/Create.vue
@@ -13,7 +13,7 @@
   </div>
 
   <MdEditor
-    :theme="theme == 'dark' ? 'dark' : 'light'"
+    :theme="getTheme"
     v-model="createData.Content"
   />
 
@@ -60,10 +60,7 @@ import { MdEditor } from "md-editor-v3";
 import "md-editor-v3/lib/style.css";
 import router from "@/router/index";
 import { document } from "@/plugins/api";
-import { useTheme } from "vuetify/lib/framework.mjs";
-
-// get current theme
-const theme = useTheme().name;
+import getTheme from "@/plugins/getTheme";
 
 const created = ref(false);
 
diff --git a/src/views/documents/View.vue b/src/views/documents/View.vue
index a6c8fc6..b7f0700 100644
--- a/src/views/documents/View.vue
+++ b/src/views/documents/View.vue
@@ -4,6 +4,8 @@ import { ref } from "vue";
 import { document } from "@/plugins/api";
 import { MdPreview } from "md-editor-v3";
 import LoadingComponent from "@/components/Loading.vue";
+import getTheme from "@/plugins/getTheme";
+
 
 const libraryId = parseInt(router.currentRoute.value.params.LibraryId);
 const documentId = parseInt(router.currentRoute.value.params.DocumentId);
@@ -36,7 +38,7 @@ document
     <div v-else>
       <h2>{{ docu.Title }}</h2>
 
-      <MdPreview :modelValue="docu.Content" />
+      <MdPreview :theme="getTheme" :modelValue="docu.Content" />
     </div>
   </div>
 </template>