feat: 新增暗黑模式

electron/main/index.ts

@@ -4,7 +4,7 @@ process.env['PUBLIC'] = app.isPackaged
   ? process.env['DIST']
   : join(process.env['DIST_ELECTRON'], '../public');
 
-import { app, BrowserWindow, shell, ipcMain, Tray, Menu } from 'electron';
+import { app, BrowserWindow, shell, ipcMain, Tray, Menu, nativeTheme } from 'electron';
 import { release } from 'os';
 import { join, dirname } from 'path';
 import { setMenu } from './menu';
@@ -110,6 +110,12 @@ ipcMain.on('drop-file', (_event, filePath: string) => {
   win?.setRepresentedFilename(filePath);
 });
 
+ipcMain.on('changeSystemTheme', (_event, value: any) => {
+  console.log(value, 9666);
+  // 记录最近打开的文件
+  nativeTheme.themeSource = value;
+});
+
 // 渲染线程请求关闭窗口
 ipcMain.on('close-window', () => {
   win?.close();

electron/main/menu.ts

@@ -1,4 +1,4 @@
-import { Menu, dialog, BrowserWindow, MenuItem } from 'electron';
+import { Menu, dialog, BrowserWindow, MenuItem, nativeTheme } from 'electron';
 import { readMDFile } from '../utils/file';
 
 export function setMenu(getWin: () => BrowserWindow | null) {
@@ -47,6 +47,30 @@ export function setMenu(getWin: () => BrowserWindow | null) {
     }),
   ];
 
+  // 主题切换菜单
+  oldMenu.insert(
+    5,
+    new MenuItem({
+      label: 'Theme',
+      submenu: [
+        {
+          label: 'light',
+          click() {
+            nativeTheme.themeSource = 'light';
+            getWin()?.webContents.send('changeTheme', 'light');
+          },
+        },
+        {
+          label: 'dark',
+          click() {
+            nativeTheme.themeSource = 'dark';
+            getWin()?.webContents.send('changeTheme', 'dark');
+          },
+        },
+      ],
+    }),
+  );
+
   const fileMenuSub = fileMenu.submenu as Menu;
   for (let i = template.length - 1; i >= 0; i--) {
     const item = template[i as keyof typeof template] as MenuItem;

src/App.vue

@@ -12,6 +12,13 @@ const isShowClass = ref<string>('');
 const editorRef = ref();
 const activeTitleIndex = ref(0);
 const directory = ref<MDDirectory[]>([]);
+// const theme = ref('');
+
+// // 暂定
+// ipcRenderer.on('changeTheme', (event, value) => {
+//   console.log(event, value);
+//   theme.value = value;
+// });
 
 watch(
   mdStore,
@@ -26,7 +33,7 @@ watch(
 );
 
 watch(
-  () => store.getIsShowCatalogue,
+  () => store.isShowCatalogue,
   (newVal: boolean) => {
     if (newVal) {
       isShowClass.value = '';
@@ -38,7 +45,13 @@ watch(
 </script>
 
 <template>
-  <div class="app-main" draggable="true" @drop.stop.prevent="mdStore.onDrop" @dragover.stop.prevent>
+  <div
+    class="app-main"
+    :class="store.theme"
+    draggable="true"
+    @drop.stop.prevent="mdStore.onDrop"
+    @dragover.stop.prevent
+  >
     <section class="directory" :class="isShowClass">
       <md-directory
         :active-title-index="activeTitleIndex"

src/assets/index.scss

@@ -0,0 +1,23 @@
+// 暂定
+.dark {
+  background: #1a2229;
+  color: #fff;
+
+  .md-directory li {
+    color: #fff;
+    &.active {
+      color: #fff;
+    }
+    &:hover {
+      background: #626262;
+    }
+  }
+  .md-editor {
+    position: relative;
+    box-sizing: border-box;
+    .toastui-editor-defaultUI {
+      border-radius: 0;
+      border: #1a2229;
+    }
+  }
+}

src/components/MdEditor.vue

@@ -7,6 +7,7 @@ import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell';
 import '@toast-ui/editor/dist/toastui-editor.css';
 import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
 import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
+import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
 import 'prismjs/themes/prism.min.css';
 import '@toast-ui/editor/dist/i18n/zh-cn';
 import { debounce } from '@mxssfd/ts-utils';
@@ -35,7 +36,7 @@ function saveFile() {
 
 type EditorMode = 'wysiwyg' | 'markdown';
 
-let editor: Editor;
+let editor: any;
 let lastHeadingList: HTMLElement[];
 let lastGetHeadingListTime = Date.now();
 
@@ -116,6 +117,19 @@ onUnmounted(() => {
   window.removeEventListener('resize', listener);
 });
 
+watch(
+  () => store.theme,
+  (newVal) => {
+    const editorDom: any = editorDomRef.value;
+    console.log(newVal);
+    if (newVal === 'dark') {
+      editorDom.classList.add('toastui-editor-dark');
+    } else {
+      editorDom.classList.remove('toastui-editor-dark');
+    }
+  },
+);
+
 onMounted(() => {
   editor = new Editor({
     el: editorDomRef.value as HTMLElement,
@@ -128,7 +142,12 @@ onMounted(() => {
     plugins: [[codeSyntaxHighlight, { highlighter: Prism }], colorSyntax, tableMergedCell],
   });
 
-  // editor.changeMode('wysiwyg');
+  const editorDom: any = editorDomRef.value;
+  if (localStorage.getItem('theme') === 'dark') {
+    editorDom.classList.add('toastui-editor-dark');
+  } else {
+    editorDom.classList.remove('toastui-editor-dark');
+  }
 
   editor.on('change', () => {
     mdStore.content = editor.getMarkdown();
@@ -176,7 +195,7 @@ onMounted(() => {
 });
 
 const isShowClick = () => {
-  store.setIsShowCatalogue(!store.getIsShowCatalogue);
+  store.setIsShowCatalogue(!store.isShowCatalogue);
 };
 </script>
 <template>

src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import './samples/node-api';
 import pinia from './store/init';
+import './assets/index.scss';
 createApp(App)
   .use(pinia)
   .mount('#app')

src/store/index.ts

@@ -1,19 +1,29 @@
 import { defineStore } from 'pinia';
+import { reactive, toRefs } from 'vue';
+import { ipcRenderer } from 'electron';
 
-export const useStore = defineStore('store', {
-  state: () => {
-    return {
-      isShowCatalogue: true,
-    };
-  },
-  getters: {
-    getIsShowCatalogue: (state) => {
-      return state.isShowCatalogue;
+export const useStore = defineStore('store', () => {
+  const state = reactive({ isShowCatalogue: true, theme: localStorage.getItem('theme') });
+
+  const actions = reactive({
+    setIsShowCatalogue(isShowCatalogue: boolean): void {
+      state.isShowCatalogue = isShowCatalogue;
     },
-  },
-  actions: {
-    setIsShowCatalogue(isShowCatalogue: boolean) {
-      this.isShowCatalogue = isShowCatalogue;
+    setTheme(theme: any): void {
+      localStorage.setItem('theme', theme);
+      state.theme = theme;
     },
-  },
+  });
+
+  function addListener(): void {
+    ipcRenderer.send('changeSystemTheme', localStorage.getItem('theme'));
+
+    ipcRenderer.on('changeTheme', (event, value) => {
+      // state.theme = value;
+      console.log(63311);
+      actions.setTheme(value);
+    });
+  }
+  addListener();
+  return { ...toRefs(state), ...actions };
 });