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 dfb6e0fca..1ae0b9cc8 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -13,4 +13,5 @@ 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'
 declare module 'to-json-schema'