From fd3dd3ebffb9c4c880cd39d01c4c52f886b0ac14 Mon Sep 17 00:00:00 2001
From: Kinplemelon <wujiu529@gmail.com>
Date: Mon, 11 Nov 2024 10:55:44 +0800
Subject: [PATCH] fix(plugin): style of readme in dark mode

---
 src/components/MarkdownContent.vue | 21 +++++++++++++++++++--
 src/shims-vue.d.ts                 |  1 +
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/MarkdownContent.vue b/src/components/MarkdownContent.vue
index db6811867..453d02012 100644
--- a/src/components/MarkdownContent.vue
+++ b/src/components/MarkdownContent.vue
@@ -18,9 +18,9 @@
 
 <script setup lang="ts">
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import 'github-markdown-css/github-markdown.css'
 import { ref, defineProps, onMounted, onUnmounted, PropType, watch } from 'vue'
 import { marked } from 'marked'
+import { useStore } from 'vuex'
 import xss from 'xss'
 
 interface TocItem {
@@ -102,8 +102,15 @@ const setEle = (val: string | undefined) => {
   }
 }
 
-onMounted(() => {
+const { state } = useStore()
+onMounted(async () => {
   setEle(props.content)
+  const theme = state.theme
+  if (theme === 'dark') {
+    await import('github-markdown-css/github-markdown-dark.css')
+  } else {
+    await import('github-markdown-css/github-markdown-light.css')
+  }
 })
 
 onUnmounted(() => {
@@ -113,3 +120,13 @@ onUnmounted(() => {
 
 watch(() => props.content, setEle)
 </script>
+
+<style lang="scss">
+[data-theme='dark'] {
+  .markdown-content {
+    .markdown-body {
+      background-color: var(--color-bg-content);
+    }
+  }
+}
+</style>
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 6f1c9022a..4fe5ca9f4 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -13,3 +13,4 @@ declare module 'js-sql-parser'
 declare module 'highlight.js/lib/core'
 declare module 'highlight.js/lib/languages/sql'
 declare module 'hocon-parser'
+declare module 'github-markdown-css/*.css'