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>