chore: 代码渲染块主题更换

src/components/markdown-render/markdown-render.vue

@@ -6,7 +6,8 @@ import 'katex/dist/katex.min.css'
 import { throttle, debounce } from 'lodash-es'
 import DOMPurify from 'dompurify'
 import hljs from 'highlight.js'
-import 'highlight.js/styles/panda-syntax-light.css'
+// import 'highlight.js/styles/panda-syntax-light.css'
+import 'highlight.js/styles/atom-one-dark.min.css'
 import './style/github-markdown.css'
 import markedKatex, { MarkedKatexOptions } from 'marked-katex-extension'
 import { copyToClip } from '@/utils/copy'
@@ -23,7 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   rawTextContent: '',
   fontSize: '14px',
   color: '#333',
-  darkTheme: false,
+  darkTheme: true,
 })
 
 const katexOptions: MarkedKatexOptions = {
@@ -174,7 +175,7 @@ defineExpose({
   <div ref="markdownRenderContainerRef" class="markdown-render-container">
     <article
       class="markdown-body markdown-render-inner"
-      data-theme="dark"
+      :data-theme="darkTheme ? 'dark' : 'light'"
       :style="articleContainerStyle"
       v-html="renderTextContent"
     />
@@ -204,9 +205,12 @@ defineExpose({
       display: flex;
       justify-content: space-between;
       padding: 8px 16px;
-      color: v-bind('props.darkTheme ? "#fff" : "#ccc"');
+      color: v-bind('props.darkTheme ? "#fff" : "#333"');
       user-select: none;
-      background-color: v-bind('props.darkTheme ? "#484a4b" : "#f1f1f1"');
+      background-color: v-bind('props.darkTheme ? "#323740" : "#EEEEEE"');
+
+      // background-color: v-bind('props.darkTheme ? "#484a4b" : "#EEEEEE"');
+      // background-color: v-bind('props.darkTheme ? "#333842" : "#EEEEEE"');
 
       .language {
         display: flex;
@@ -258,7 +262,12 @@ defineExpose({
 :deep(.markdown-body) {
   &[data-theme='dark'] {
     /* stylelint-disable-next-line custom-property-pattern */
-    --bgColor-muted: #1d1e1f;
+    --bgColor-muted: #282c34;
+  }
+
+  &[data-theme='light'] {
+    /* stylelint-disable-next-line custom-property-pattern */
+    --bgColor-muted: #fdfdfd;
   }
 
   & .code-container-wrapper {