feat: 支持切换编辑器主题

src/App.vue

@@ -158,9 +158,9 @@ body {
 }
 
 .split-trigger {
-    width: 5px;
+    width: 2px;
     height: 100vh;
-    background-color: gray;
+    background-color: #e6e6e6;
 }
 
 .split-trigger:hover {
@@ -168,7 +168,7 @@ body {
 }
 
 .split-right {
-    margin-left: 5px;
+    margin-left: 2px;
 }
 
 .hidden {

src/components/MainEditor.vue

@@ -2,8 +2,9 @@
     <Split v-model="split">
         <template #left>
             <MdEditor ref="editorRef" v-model="editorState.text" :id="editorState.id" :theme="editorState.theme"
-                :style="{ height: editorState.height }" :toolbars="editorState.toolbars" :toolbarsExclude="['github']"
+                :previewTheme="editorState.previewTheme" :style="{ height: editorState.height }"
-                @onSave="onSave" @onHtmlChanged="getPreviewedHTML">
+                :toolbars="editorState.toolbars" :toolbarsExclude="editorState.toolbarsExclude" @onSave="onSave"
+                @onHtmlChanged="getPreviewedHTML">
                 <template #defToolbars>
                     <NormalToolbar :title="leftSidebarState == 'open' ? '隐藏文件树' : '显示文件树'" @onClick="toggleLeftSideBar">
                         <template #trigger>
@@ -22,6 +23,28 @@
                             <Icon class="md-editor-icon" type="md-cloud-upload" size="22" />
                         </template>
                     </NormalToolbar>
+                    <NormalToolbar title="切换编辑器主题" @onClick="toggleEditorTheme">
+                        <template #trigger>
+                            <Icon v-if="editorState.theme == 'dark'" type="ios-sunny-outline" size="22" />
+                            <Icon v-else type="md-moon" size="22" />
+                        </template>
+                    </NormalToolbar>
+                    <DropdownToolbar title="切换预览主题" :visible="editorState.showPreviewThemeList"
+                        :onChange="selectPreviewThemeList">
+                        <template #overlay>
+                            <div>
+                                <List border size="small">
+                                    <ListItem v-for="theme in editorState.previewThemeList" :key="theme"
+                                        :class="theme == editorState.previewTheme ? 'md-editor-toolbar-active' : ''"
+                                        @click="togglePreviewTheme(theme)">{{ theme }}
+                                    </ListItem>
+                                </List>
+                            </div>
+                        </template>
+                        <template #trigger>
+                            <Icon class="md-editor-icon" type="ios-color-filter-outline" :size="22" />
+                        </template>
+                    </DropdownToolbar>
                 </template>
             </MdEditor>
         </template>
@@ -29,7 +52,7 @@
             <div class="split-trigger"></div>
         </template>
         <template #right>
-            <div class="md-catalog">
+            <div class="split-right md-catalog">
                 <MdCatalog :class="hiddenSplitRight" :editorId="editorState.id" :theme="editorState.theme" />
             </div>
         </template>
@@ -38,7 +61,7 @@
 
 <script setup>
 import 'md-editor-v3/lib/style.css';
-import { MdEditor, MdCatalog, NormalToolbar } from 'md-editor-v3';
+import { MdEditor, MdCatalog, NormalToolbar, DropdownToolbar } from 'md-editor-v3';
 import { ref, reactive, watch } from "vue";
 import { Message } from 'view-ui-plus'
 
@@ -88,7 +111,10 @@ watch(split, (newSplit) => {
 const editorRef = ref(null);
 const editorState = reactive({
     id: 'markdown-editor',
-    theme: 'light',
+    theme: '',
+    previewTheme: 'default',
+    previewThemeList: ['default', 'github', 'vuepress', 'mk-cute', 'smart-blue', 'cyanosis'],
+    showPreviewThemeList: false,
     height: '100vh',
     text: props.markdownCode,
     toolbars: [
@@ -129,7 +155,10 @@ const editorState = reactive({
         'htmlPreview',
         'catalog',
         'github',
-    ]
+        3,
+        4,
+    ],
+    toolbarsExclude: ['fullscreen', 'github'], // 工具栏排除全屏和 github 等
 });
 // 监听 markdownCode（由父组件更新） 和 text（本组件更新）以实现双向更新
 watch(() => props.markdownCode, (newCode) => {
@@ -157,6 +186,19 @@ const toggleCatalog = () => {
     }
 }
 
+const toggleEditorTheme = () => {
+    editorState.theme = editorState.theme == '' ? 'dark' : '';
+}
+
+const selectPreviewThemeList = (visible) => {
+    editorState.showPreviewThemeList = visible;
+}
+
+const togglePreviewTheme = (theme) => {
+    editorState.previewTheme = theme;
+    editorState.showPreviewThemeList = false;
+}
+
 const onSave = (v, h) => {
     // 调用 save 方法保存代码（参数 v 为 markdown code）
     props.save(v);