From 347358f6bce4ed1b5169cb2ee02b18cdff303030 Mon Sep 17 00:00:00 2001
From: "xiaoqi.cxq" <xiaoqi.cxq@gmail.com>
Date: Thu, 6 Oct 2022 03:45:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E7=BC=96=E8=BE=91=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E4=B8=BB=E9=A2=98=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/index.js                              |   4 +
 src/components/App.vue                       |   3 +
 src/components/EditorInPageButtons.vue       | 154 +++++++++++++++++++
 src/components/Layout.vue                    |  11 +-
 src/components/common/DropdownMenu.vue       | 127 +++++++++++++++
 src/icons/FindReplace.vue                    |   3 +
 src/icons/Search.vue                         |   2 +-
 src/icons/SelectTheme.vue                    |   3 +
 src/icons/index.js                           |   6 +
 src/store/index.js                           |   2 +
 src/store/theme.js                           |  55 +++++++
 src/styles/markdownHighlighting.scss         |  12 +-
 static/themes/edit-theme-azure.js            |  72 +++++++++
 static/themes/edit-theme-carbonight.js       |  72 +++++++++
 static/themes/edit-theme-clouds.js           |  72 +++++++++
 static/themes/edit-theme-clouds_midnight.js  |  72 +++++++++
 static/themes/edit-theme-dawn.js             |  72 +++++++++
 static/themes/edit-theme-github.js           |  73 +++++++++
 static/themes/edit-theme-iceberg_contrast.js |  72 +++++++++
 static/themes/edit-theme-mintchoc.js         |  72 +++++++++
 static/themes/edit-theme-peacock.js          |  72 +++++++++
 static/themes/edit-theme-slate.js            |  72 +++++++++
 static/themes/edit-theme-solarized_light.js  |  72 +++++++++
 static/themes/edit-theme-spearmint.js        |  72 +++++++++
 24 files changed, 1239 insertions(+), 8 deletions(-)
 create mode 100644 src/components/EditorInPageButtons.vue
 create mode 100644 src/components/common/DropdownMenu.vue
 create mode 100644 src/icons/FindReplace.vue
 create mode 100644 src/icons/SelectTheme.vue
 create mode 100644 src/store/theme.js
 create mode 100644 static/themes/edit-theme-azure.js
 create mode 100644 static/themes/edit-theme-carbonight.js
 create mode 100644 static/themes/edit-theme-clouds.js
 create mode 100644 static/themes/edit-theme-clouds_midnight.js
 create mode 100644 static/themes/edit-theme-dawn.js
 create mode 100644 static/themes/edit-theme-github.js
 create mode 100644 static/themes/edit-theme-iceberg_contrast.js
 create mode 100644 static/themes/edit-theme-mintchoc.js
 create mode 100644 static/themes/edit-theme-peacock.js
 create mode 100644 static/themes/edit-theme-slate.js
 create mode 100644 static/themes/edit-theme-solarized_light.js
 create mode 100644 static/themes/edit-theme-spearmint.js

diff --git a/server/index.js b/server/index.js
index f6fc873c..fc8f16e2 100644
--- a/server/index.js
+++ b/server/index.js
@@ -64,6 +64,10 @@ module.exports = (app) => {
   // Google Drive action receiver
   app.get('/googleDriveAction', (req, res) =>
     res.redirect(`./app#providerId=googleDrive&state=${encodeURIComponent(req.query.state)}`));
+  // Serve the static folder with 1 year max-age
+  app.use('/themes', serveStatic(resolvePath('static/themes'), {
+    maxAge: '1m',
+  }));
 
   // Serve static resources
   if (process.env.NODE_ENV === 'production') {
diff --git a/src/components/App.vue b/src/components/App.vue
index 8238df6b..90b3102c 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -54,6 +54,9 @@ export default {
     try {
       await syncSvc.init();
       await networkSvc.init();
+      // store 编辑主题
+      const editTheme = localStorage.getItem('theme/currEditTheme');
+      store.dispatch('theme/setEditTheme', editTheme || 'default');
       this.ready = true;
       tempFileSvc.setReady();
     } catch (err) {
diff --git a/src/components/EditorInPageButtons.vue b/src/components/EditorInPageButtons.vue
new file mode 100644
index 00000000..9b959acc
--- /dev/null
+++ b/src/components/EditorInPageButtons.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="editor-in-page-buttons">
+    <ul>
+      <li :title="`查找 ${mod}+F`">
+        <a @click="showFind"><icon-search></icon-search></a>
+      </li>
+      <li :title="`替换 ${mod}+Alt+F`">
+        <a @click="showFindReplace"><icon-find-replace></icon-find-replace></a>
+      </li>
+      <li title="切换编辑主题">
+        <dropdown-menu :selected="selectedTheme" :options="allThemes" :closeOnItemClick="false" @change="changeTheme">
+          <icon-select-theme></icon-select-theme>
+        </dropdown-menu>
+      </li>
+      <li title="Markdown语法帮助">
+        <a @click="showHelp"><icon-help-circle></icon-help-circle></a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import store from '../store';
+import editorSvc from '../services/editorSvc';
+import DropdownMenu from './common/DropdownMenu';
+
+const mod = /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? 'Meta' : 'Ctrl';
+
+export default {
+  components: {
+    DropdownMenu,
+  },
+  data: () => ({
+    mod,
+    allThemes: [{
+      name: '默认主题',
+      value: 'default',
+    }, {
+      name: '天蓝黑',
+      value: 'azure',
+    }, {
+      name: '冰山黑',
+      value: 'iceberg_contrast',
+    }, {
+      name: '黎明白',
+      value: 'dawn',
+    }, {
+      name: '孔雀黑',
+      value: 'peacock',
+    }, {
+      name: '薄荷黑',
+      value: 'mintchoc',
+    }, {
+      name: '薄荷绿',
+      value: 'spearmint',
+    }, {
+      name: '暗蓝黑',
+      value: 'slate',
+    }, {
+      name: '文墨黑',
+      value: 'carbonight',
+    }, {
+      name: '日光白',
+      value: 'solarized_light',
+    }, {
+      name: 'Clouds白',
+      value: 'clouds',
+    }, {
+      name: 'Clouds黑',
+      value: 'clouds_midnight',
+    }, {
+      name: 'GitHub白',
+      value: 'github',
+    }],
+  }),
+  computed: {
+    ...mapGetters('theme', [
+      'currEditTheme',
+    ]),
+    selectedTheme() {
+      return {
+        value: this.currEditTheme || 'default',
+      };
+    },
+  },
+  methods: {
+    ...mapActions('data', [
+      'toggleSideBar',
+    ]),
+    showFind() {
+      store.dispatch('findReplace/open', {
+        type: 'find',
+        findText: editorSvc.clEditor.selectionMgr.hasFocus() &&
+          editorSvc.clEditor.selectionMgr.getSelectedText(),
+      });
+    },
+    showFindReplace() {
+      store.dispatch('findReplace/open', {
+        type: 'replace',
+        findText: editorSvc.clEditor.selectionMgr.hasFocus() &&
+          editorSvc.clEditor.selectionMgr.getSelectedText(),
+      });
+    },
+    async changeTheme(item) {
+      store.dispatch('theme/setEditTheme', item.value);
+    },
+    showHelp() {
+      this.toggleSideBar(true);
+      store.dispatch('data/setSideBarPanel', 'help');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../styles/variables.scss';
+
+.editor-in-page-buttons {
+  position: absolute;
+  top: 0;
+  right: 10px;
+  height: 34px;
+  padding: 5px;
+  background-color: rgba(187, 187, 187, 0.05);
+  border-radius: $border-radius-base;
+
+  ul {
+    padding: 0;
+    margin-left: 10px;
+
+    li {
+      line-height: 16px;
+      width: 16px;
+      display: inline-block;
+      list-style: none;
+      cursor: pointer;
+      font-size: 14px;
+      margin-right: 10px;
+    }
+  }
+
+  .icon {
+    color: #dea731;
+    opacity: 0.4;
+
+    &:active,
+    &:focus,
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+</style>
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index 18559303..4d444b06 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -9,11 +9,12 @@
           <navigation-bar></navigation-bar>
         </div>
         <div class="layout__panel flex flex--row" :style="{height: styles.innerHeight + 'px'}">
-          <div class="layout__panel layout__panel--editor" v-show="styles.showEditor" :style="{width: (styles.editorWidth + styles.editorGutterWidth) + 'px', fontSize: styles.fontSize + 'px'}">
+          <div class="layout__panel layout__panel--editor" :class="currTheme" v-show="styles.showEditor" :style="{width: (styles.editorWidth + styles.editorGutterWidth) + 'px', fontSize: styles.fontSize + 'px'}">
             <div class="gutter" :style="{left: styles.editorGutterLeft + 'px'}">
               <div class="gutter__background" v-if="styles.editorGutterWidth" :style="{width: styles.editorGutterWidth + 'px'}"></div>
             </div>
             <editor></editor>
+            <editor-in-page-buttons></editor-in-page-buttons>
             <div class="gutter" :style="{left: styles.editorGutterLeft + 'px'}">
               <sticky-comment v-if="styles.editorGutterWidth && stickyComment === 'top'"></sticky-comment>
               <current-discussion v-if="styles.editorGutterWidth"></current-discussion>
@@ -58,6 +59,7 @@ import SideBar from './SideBar';
 import Editor from './Editor';
 import Preview from './Preview';
 import Tour from './Tour';
+import EditorInPageButtons from './EditorInPageButtons';
 import StickyComment from './gutters/StickyComment';
 import CurrentDiscussion from './gutters/CurrentDiscussion';
 import FindReplace from './FindReplace';
@@ -75,6 +77,7 @@ export default {
     Editor,
     Preview,
     Tour,
+    EditorInPageButtons,
     StickyComment,
     CurrentDiscussion,
     FindReplace,
@@ -96,6 +99,12 @@ export default {
     ...mapGetters('data', [
       'layoutSettings',
     ]),
+    ...mapGetters('theme', [
+      'currEditTheme',
+    ]),
+    currTheme() {
+      return `edit-theme--${this.currEditTheme || 'default'}`;
+    },
     showFindReplace() {
       return !!store.state.findReplace.type;
     },
diff --git a/src/components/common/DropdownMenu.vue b/src/components/common/DropdownMenu.vue
new file mode 100644
index 00000000..549872c1
--- /dev/null
+++ b/src/components/common/DropdownMenu.vue
@@ -0,0 +1,127 @@
+<template>
+    <span class="dropdown-menu">
+      <span @click="toggleMenu()" class="dropdown-toggle">
+        <slot></slot>
+      </span>
+  
+      <ul class="dropdown-menu-items" v-if="showMenu">
+        <li v-for="(option, idx) in options" :key="idx">
+          <a href="javascript:void(0)" :class="{selected: option.value === selectedOption.value}" @click="updateOption(option)">
+            {{ option.name }}
+          </a>
+        </li>
+      </ul>
+    </span>
+  </template>
+  
+  <script>
+    export default {
+      data: () => ({
+        selectedOption: {
+          value: '',
+          name: '',
+        },
+        showMenu: false,
+      }),
+      props: {
+        options: {
+          type: [Array, Object],
+        },
+        selected: {},
+        closeOnOutsideClick: {
+          type: [Boolean],
+          default: true,
+        },
+        closeOnItemClick: {
+          type: [Boolean],
+          default: true,
+        },
+      },
+      mounted() {
+        this.selectedOption = this.selected;
+        if (this.closeOnOutsideClick) {
+          document.addEventListener('click', this.clickHandler);
+        }
+      },
+      beforeDestroy() {
+        document.removeEventListener('click', this.clickHandler);
+      },
+      methods: {
+        updateOption(option) {
+          this.selectedOption = option;
+          if (this.closeOnItemClick) {
+            this.showMenu = false;
+          }
+          this.$emit('change', this.selectedOption);
+        },
+        toggleMenu() {
+          this.showMenu = !this.showMenu;
+        },
+        clickHandler(event) {
+          const { target } = event;
+          const { $el } = this;
+          if (!$el.contains(target)) {
+            this.showMenu = false;
+          }
+        },
+      },
+      watch: {
+        selected(val) {
+          this.selectedOption = val;
+        },
+      },
+    };
+  </script>
+  
+<style lang="scss">
+.dropdown-menu {
+  .dropdown-menu-items {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    list-style: none;
+    font-size: 15px;
+    background-color: #666;
+    border: 1px solid #666;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 6px 12px rgb(0, 0, 0 / 18%);
+    box-shadow: 0 6px 12px rgb(0, 0, 0 / 18%);
+    background-clip: padding-box;
+
+    li {
+      width: 100%;
+      display: list-item;
+      text-align: -webkit-match-parent;
+
+      a {
+        display: block;
+        clear: both;
+        font-weight: normal;
+        line-height: 1.45;
+        white-space: nowrap;
+        color: #eee;
+        padding: 5px 20px;
+        border-top: 1px solid transparent;
+        border-bottom: 1px solid transparent;
+        text-decoration: none;
+
+        &:active,
+        &:focus,
+        &:hover {
+          background-color: rgb(82, 82, 82);
+        }
+      }
+
+      a.selected {
+        background: #74b936 !important;
+        color: #fff !important;
+      }
+    }
+  }
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/icons/FindReplace.vue b/src/icons/FindReplace.vue
new file mode 100644
index 00000000..3fea3162
--- /dev/null
+++ b/src/icons/FindReplace.vue
@@ -0,0 +1,3 @@
+<template>
+    <svg t="1664799557150" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8995" width="32" height="32"><path d="M781.702095 712.752762l208.847238 208.798476-68.998095 68.998095-208.798476-208.847238A436.906667 436.906667 0 0 1 438.857143 877.714286c-242.249143 0-438.857143-196.608-438.857143-438.857143s196.608-438.857143 438.857143-438.857143 438.857143 196.608 438.857143 438.857143a436.906667 436.906667 0 0 1-96.012191 273.895619zM714.800762 341.333333A292.571429 292.571429 0 0 0 438.857143 146.285714C277.211429 146.285714 146.285714 277.211429 146.285714 438.857143h97.52381a195.096381 195.096381 0 0 1 288.182857-171.398095L487.619048 341.333333h227.181714zM731.428571 438.857143h-97.523809a195.096381 195.096381 0 0 1-288.182857 171.398095L390.095238 536.380952H162.913524A292.571429 292.571429 0 0 0 438.857143 731.428571c161.645714 0 292.571429-130.925714 292.571428-292.571428z" p-id="8996"></path></svg>
+</template>
diff --git a/src/icons/Search.vue b/src/icons/Search.vue
index 713fe6eb..a8d8834f 100644
--- a/src/icons/Search.vue
+++ b/src/icons/Search.vue
@@ -1,3 +1,3 @@
 <template>
-  <svg t="1660710445280" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2419" width="32" height="32"><path d="M576 672a192 192 0 0 1 192-192 182.72 182.72 0 0 1 48 6.4v-106.56a48 48 0 0 0-13.12-32L565.76 96a48 48 0 0 0-34.88-15.04H128A48 48 0 0 0 80 128v768A48 48 0 0 0 128 944h640a48 48 0 0 0 48-48v-38.4a184.64 184.64 0 0 1-48 6.4 192 192 0 0 1-192-192z m-64-326.72V112l272 272h-233.28A38.72 38.72 0 0 1 512 345.28z" p-id="2420"></path><path d="M957.76 774.4l-71.36-53.76A128 128 0 1 0 768 800a125.76 125.76 0 0 0 79.36-28.48l72 54.08zM768 736a64 64 0 1 1 64-64 64 64 0 0 1-64 64z" p-id="2421"></path></svg>
+  <svg t="1664775684106" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6828" width="32" height="32"><path d="M694.857143 475.428571q0-105.714286-75.142857-180.857143t-180.857143-75.142857-180.857143 75.142857-75.142857 180.857143 75.142857 180.857143 180.857143 75.142857 180.857143-75.142857 75.142857-180.857143zm292.571429 475.428571q0 29.714286-21.714286 51.428571t-51.428571 21.714286q-30.857143 0-51.428571-21.714286l-196-195.428571q-102.285714 70.857143-228 70.857143-81.714286 0-156.285714-31.714286t-128.571429-85.714286-85.714286-128.571429-31.714286-156.285714 31.714286-156.285714 85.714286-128.571429 128.571429-85.714286 156.285714-31.714286 156.285714 31.714286 128.571429 85.714286 85.714286 128.571429 31.714286 156.285714q0 125.714286-70.857143 228l196 196q21.142857 21.142857 21.142857 51.428571z" p-id="6829"></path></svg>
 </template>
diff --git a/src/icons/SelectTheme.vue b/src/icons/SelectTheme.vue
new file mode 100644
index 00000000..9760698c
--- /dev/null
+++ b/src/icons/SelectTheme.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg t="1664776491043" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7365" width="32" height="32"><path d="M384.096 222.4L238.08 363.072l590.4 606.048 155.584-173.92-599.968-572.8z m442.368 652.96L328.832 364.512l55.456-53.408L895.072 798.72l-68.608 76.64zM205.312 321.856l140.384-134.08L286.304 129.6c-36.384-35.552-98.944-35.264-134.88 0.608a96.384 96.384 0 0 0-1.184 134.88l55.072 56.768zM416 64h64v64h-64zM320 672h64v64h-64zM32 352h64v64H32zM232.672 492.192l-60.48-20.864-16.512 47.776-48.768-15.136-18.944 61.088 46.848 14.56-15.488 44.928 60.48 20.864 16.16-46.784 45.824 14.208 18.976-61.12-43.904-13.632zM632.16 277.472l61.312 18.368 14.72-49.152 45.6 14.144 18.976-61.088-46.176-14.368 14.048-46.848-61.312-18.368-13.888 46.24-46.496-14.432-19.008 61.088 47.136 14.656z" p-id="7366"></path></svg>
+</template>
diff --git a/src/icons/index.js b/src/icons/index.js
index d8a231a7..467ebf50 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -59,6 +59,9 @@ import Key from './Key';
 import DotsHorizontal from './DotsHorizontal';
 import Seal from './Seal';
 import SwitchTheme from './SwitchTheme';
+import Search from './Search';
+import FindReplace from './FindReplace';
+import SelectTheme from './SelectTheme';
 
 Vue.component('iconProvider', Provider);
 Vue.component('iconFormatBold', FormatBold);
@@ -120,3 +123,6 @@ Vue.component('iconKey', Key);
 Vue.component('iconDotsHorizontal', DotsHorizontal);
 Vue.component('iconSeal', Seal);
 Vue.component('iconSwitchTheme', SwitchTheme);
+Vue.component('iconSearch', Search);
+Vue.component('iconFindReplace', FindReplace);
+Vue.component('iconSelectTheme', SelectTheme);
diff --git a/src/store/index.js b/src/store/index.js
index 6365c9dc..f81e6ac8 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -19,6 +19,7 @@ import syncedContent from './syncedContent';
 import userInfo from './userInfo';
 import workspace from './workspace';
 import img from './img';
+import theme from './theme';
 import locationTemplate from './locationTemplate';
 import emptyPublishLocation from '../data/empties/emptyPublishLocation';
 import emptySyncLocation from '../data/empties/emptySyncLocation';
@@ -49,6 +50,7 @@ const store = new Vuex.Store({
     userInfo,
     workspace,
     img,
+    theme,
   },
   state: {
     light: false,
diff --git a/src/store/theme.js b/src/store/theme.js
new file mode 100644
index 00000000..ffc36a02
--- /dev/null
+++ b/src/store/theme.js
@@ -0,0 +1,55 @@
+const localKey = 'theme/currEditTheme';
+
+export default {
+  namespaced: true,
+  state: {
+    // 当前编辑主题
+    currEditTheme: null,
+    initEditTheme: false,
+  },
+  mutations: {
+    setEditTheme: (state, value) => {
+      state.currEditTheme = value;
+    },
+    setInitEditTheme: (state, value) => {
+      state.initEditTheme = value;
+    },
+  },
+  getters: {
+    currEditTheme: state => state.currEditTheme,
+    initEditTheme: state => state.initEditTheme,
+  },
+  actions: {
+    async setEditTheme({ commit }, theme) {
+      commit('setEditTheme', theme);
+      commit('setInitEditTheme', true);
+      localStorage.setItem(localKey, theme);
+      // 如果不是default 则加载样式
+      if (!theme || theme === 'default') {
+        return;
+      }
+      const themeStyle = document.getElementById(`edit-theme-${theme}`);
+      if (themeStyle) {
+        return;
+      }
+      const script = document.createElement('script');
+      let timeout;
+      try {
+        await new Promise((resolve, reject) => {
+          script.onload = resolve;
+          script.onerror = reject;
+          script.src = `/themes/edit-theme-${theme}.js`;
+          try {
+            document.head.appendChild(script);
+            timeout = setTimeout(reject, 30);
+          } catch (e) {
+            reject(e);
+          }
+        });
+      } finally {
+        clearTimeout(timeout);
+        document.head.removeChild(script);
+      }
+    },
+  },
+};
diff --git a/src/styles/markdownHighlighting.scss b/src/styles/markdownHighlighting.scss
index 65bcebf7..c992f2b0 100644
--- a/src/styles/markdownHighlighting.scss
+++ b/src/styles/markdownHighlighting.scss
@@ -188,28 +188,28 @@
 
   .h1,
   .h11 {
-    font-size: 2em;
+    font-size: 1.7em;
   }
 
   .h2,
   .h22 {
-    font-size: 1.5em;
+    font-size: 1.4em;
   }
 
   .h3 {
-    font-size: 1.17em;
+    font-size: 1.2em;
   }
 
   .h4 {
-    font-size: 1em;
+    font-size: 1.1em;
   }
 
   .h5 {
-    font-size: 0.83em;
+    font-size: 1em;
   }
 
   .h6 {
-    font-size: 0.75em;
+    font-size: 0.9em;
   }
 
   .cl-hash {
diff --git a/static/themes/edit-theme-azure.js b/static/themes/edit-theme-azure.js
new file mode 100644
index 00000000..0d9c6c00
--- /dev/null
+++ b/static/themes/edit-theme-azure.js
@@ -0,0 +1,72 @@
+function init_edit_theme_azure() {
+  const style = document.createElement('style');
+  style.id = 'edit-theme-azure';
+  style.type = 'text/css';
+  style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
+.edit-theme--azure .editor__inner {\n\
+  color: #fff;\n\
+  caret-color: #fff;\n\
+}\n\
+.edit-theme--azure .editor {\n\
+  background-color: #181D26;\n\
+}\n\
+/* 标题颜色 */\n\
+.edit-theme--azure .editor__inner .cn-head,\n\
+.edit-theme--azure .editor-in-page-buttons .icon {\n\
+  color: #64aeb3;\n\
+}\n\
+/* 加粗颜色 */\n\
+.edit-theme--azure .editor__inner .cn-strong {\n\
+  color: #508aaa;\n\
+}\n\
+/* 信息块颜色 */\n\
+.edit-theme--azure .editor__inner .blockquote {\n\
+  color: #52708b;\n\
+}\n\
+/* 源信息、md标记符号等非关键信息的颜色 */\n\
+.edit-theme--azure .editor__inner .cl,\n\
+.edit-theme--azure .editor__inner .hr,\n\
+.edit-theme--azure .editor__inner .link,\n\
+.edit-theme--azure .editor__inner .linkref, \n\
+.edit-theme--azure .editor__inner .linkdef .url {\n\
+  color: rgba(139,158,177,0.8);\n\
+}\n\
+.edit-theme--azure .editor__inner .cn-toc, \n\
+.edit-theme--azure .editor__inner .code,\n\
+.edit-theme--azure .editor__inner .img,\n\
+.edit-theme--azure .editor__inner .img-wrapper,\n\
+.edit-theme--azure .editor__inner .imgref,\n\
+.edit-theme--azure .editor__inner .cl-toc {\n\
+  color: rgba(139,158,177,0.8);\n\
+  background-color: rgba(0,0,0,0.33);\n\
+}\n\
+/* 代码块颜色 */\n\
+.edit-theme--azure .editor__inner .cn-code {\n\
+  color: #6AB0A3;\n\
+}\n\
+/* 链接颜色 */\n\
+.edit-theme--azure .editor__inner .img .cl-underlined-text,\n\
+.edit-theme--azure .editor__inner .imgref .cl-underlined-text,\n\
+.edit-theme--azure .editor__inner .link .cl-underlined-text,\n\
+.edit-theme--azure .editor__inner .linkref .cl-underlined-text {\n\
+  color: #64aeb3;\n\
+}\n\
+/* 图片原始链接背景颜色 */\n\
+.edit-theme--azure .editor__inner .img-wrapper .img {\n\
+  background-color: transparent;\n\
+}\n\
+.edit-theme--azure .editor__inner .keyword {\n\
+  color: #508aaa;\n\
+}\n\
+.edit-theme--azure .editor__inner .email,\n\
+.edit-theme--azure .editor__inner .cl-title,\n\
+.edit-theme--azure .editor__inner .tag,\n\
+.edit-theme--azure .editor__inner .latex,\n\
+.edit-theme--azure .editor__inner .math,\n\
+.edit-theme--azure .editor__inner .entity,\n\
+.edit-theme--azure .editor__inner .pre [class*='language-'] {\n\
+  color: #fff;\n\
+}";
+  document.head.appendChild(style);
+}
+init_edit_theme_azure();
\ No newline at end of file
diff --git a/static/themes/edit-theme-carbonight.js b/static/themes/edit-theme-carbonight.js
new file mode 100644
index 00000000..e670a1c6
--- /dev/null
+++ b/static/themes/edit-theme-carbonight.js
@@ -0,0 +1,72 @@
+function init_edit_theme_carbonight() {
+  const style = document.createElement('style');
+  style.id = 'edit-theme-carbonight';
+  style.type = 'text/css';
+  style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
+.edit-theme--carbonight .editor__inner {\n\
+  color: #B0B0B0;\n\
+  caret-color: #B0B0B0;\n\
+}\n\
+.edit-theme--carbonight .editor {\n\
+  background-color: #2E2C2B;\n\
+}\n\
+/* 标题颜色 */\n\
+.edit-theme--carbonight .editor__inner .cn-head,\n\
+.edit-theme--carbonight .editor-in-page-buttons .icon {\n\
+  color: #B0B0B0;\n\
+}\n\
+/* 加粗颜色 */\n\
+.edit-theme--carbonight .editor__inner .cn-strong {\n\
+  color: #eeeeee;\n\
+}\n\
+/* 信息块颜色 */\n\
+.edit-theme--carbonight .editor__inner .blockquote {\n\
+  color: #8C8C8C;\n\
+}\n\
+/* 源信息、md标记符号等非关键信息的颜色 */\n\
+.edit-theme--carbonight .editor__inner .cl,\n\
+.edit-theme--carbonight .editor__inner .hr,\n\
+.edit-theme--carbonight .editor__inner .link,\n\
+.edit-theme--carbonight .editor__inner .linkref, \n\
+.edit-theme--carbonight .editor__inner .linkdef .url {\n\
+  color: rgba(139,158,177,0.8);\n\
+}\n\
+.edit-theme--carbonight .editor__inner .cn-toc, \n\
+.edit-theme--carbonight .editor__inner .code,\n\
+.edit-theme--carbonight .editor__inner .img,\n\
+.edit-theme--carbonight .editor__inner .img-wrapper,\n\
+.edit-theme--carbonight .editor__inner .imgref,\n\
+.edit-theme--carbonight .editor__inner .cl-toc {\n\
+  color: rgba(139,158,177,0.8);\n\
+  background-color: rgba(0,0,0,0.33);\n\
+}\n\
+/* 代码块颜色 */\n\
+.edit-theme--carbonight .editor__inner .cn-code {\n\
+  color: #fff;\n\
+}\n\
+/* 链接颜色 */\n\
+.edit-theme--carbonight .editor__inner .img .cl-underlined-text,\n\
+.edit-theme--carbonight .editor__inner .imgref .cl-underlined-text,\n\
+.edit-theme--carbonight .editor__inner .link .cl-underlined-text,\n\
+.edit-theme--carbonight .editor__inner .linkref .cl-underlined-text {\n\
+  color: #fff;\n\
+}\n\
+/* 图片原始链接背景颜色 */\n\
+.edit-theme--carbonight .editor__inner .img-wrapper .img {\n\
+  background-color: transparent;\n\
+}\n\
+.edit-theme--carbonight .editor__inner .keyword {\n\
+  color: #47596b;\n\
+}\n\
+.edit-theme--carbonight .editor__inner .email,\n\
+.edit-theme--carbonight .editor__inner .cl-title,\n\
+.edit-theme--carbonight .editor__inner .tag,\n\
+.edit-theme--carbonight .editor__inner .latex,\n\
+.edit-theme--carbonight .editor__inner .math,\n\
+.edit-theme--carbonight .editor__inner .entity,\n\
+.edit-theme--carbonight .editor__inner .pre [class*='language-'] {\n\
+  color: #B0B0B0;\n\
+}";
+  document.head.appendChild(style);
+}
+init_edit_theme_carbonight();
\ No newline at end of file
diff --git a/static/themes/edit-theme-clouds.js b/static/themes/edit-theme-clouds.js
new file mode 100644
index 00000000..12ccb8dc
--- /dev/null
+++ b/static/themes/edit-theme-clouds.js
@@ -0,0 +1,72 @@
+function init_edit_theme_clouds() {
+  const style = document.createElement('style');
+  style.id = 'edit-theme-clouds';
+  style.type = 'text/css';
+  style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
+.edit-theme--clouds .editor__inner {\n\
+  color: #000;\n\
+  caret-color: #000;\n\
+}\n\
+.edit-theme--clouds .editor {\n\
+  background-color: #fff;\n\
+}\n\
+/* 标题颜色 */\n\
+.edit-theme--clouds .editor__inner .cn-head,\n\
+.edit-theme--clouds .editor-in-page-buttons .icon {\n\
+  color: #46A609;\n\
+}\n\
+/* 加粗颜色 */\n\
+.edit-theme--clouds .editor__inner .cn-strong {\n\
+  color: #AF956F;\n\
+}\n\
+/* 信息块颜色 */\n\
+.edit-theme--clouds .editor__inner .blockquote {\n\
+  color: #5D90CD;\n\
+}\n\
+/* 源信息、md标记符号等非关键信息的颜色 */\n\
+.edit-theme--clouds .editor__inner .cl,\n\
+.edit-theme--clouds .editor__inner .hr,\n\
+.edit-theme--clouds .editor__inner .link,\n\
+.edit-theme--clouds .editor__inner .linkref, \n\
+.edit-theme--clouds .editor__inner .linkdef .url {\n\
+  color: rgba(102,128,153,0.6);\n\
+}\n\
+.edit-theme--clouds .editor__inner .cn-toc, \n\
+.edit-theme--clouds .editor__inner .code,\n\
+.edit-theme--clouds .editor__inner .img,\n\
+.edit-theme--clouds .editor__inner .img-wrapper,\n\
+.edit-theme--clouds .editor__inner .imgref,\n\
+.edit-theme--clouds .editor__inner .cl-toc {\n\
+  color: rgba(102,128,153,0.6);\n\
+  background-color: rgba(102,128,153,0.075);\n\
+}\n\
+/* 代码块颜色 */\n\
+.edit-theme--clouds .editor__inner .cn-code {\n\
+  color: #C52727;\n\
+}\n\
+/* 链接颜色 */\n\
+.edit-theme--clouds .editor__inner .img .cl-underlined-text,\n\
+.edit-theme--clouds .editor__inner .imgref .cl-underlined-text,\n\
+.edit-theme--clouds .editor__inner .link .cl-underlined-text,\n\
+.edit-theme--clouds .editor__inner .linkref .cl-underlined-text {\n\
+  color: #5D90CD;\n\
+}\n\
+/* 图片原始链接背景颜色 */\n\
+.edit-theme--clouds .editor__inner .img-wrapper .img {\n\
+  background-color: transparent;\n\
+}\n\
+.edit-theme--clouds .editor__inner .keyword {\n\
+  color: #47596b;\n\
+}\n\
+.edit-theme--clouds .editor__inner .email,\n\
+.edit-theme--clouds .editor__inner .cl-title,\n\
+.edit-theme--clouds .editor__inner .tag,\n\
+.edit-theme--clouds .editor__inner .latex,\n\
+.edit-theme--clouds .editor__inner .math,\n\
+.edit-theme--clouds .editor__inner .entity,\n\
+.edit-theme--clouds .editor__inner .pre [class*='language-'] {\n\
+  color: #000;\n\
+}";
+  document.head.appendChild(style);
+}
+init_edit_theme_clouds();
\ No newline at end of file
diff --git a/static/themes/edit-theme-clouds_midnight.js b/static/themes/edit-theme-clouds_midnight.js
new file mode 100644
index 00000000..3cade637
--- /dev/null
+++ b/static/themes/edit-theme-clouds_midnight.js
@@ -0,0 +1,72 @@
+function init_edit_theme_clouds_midnight() {
+  const style = document.createElement('style');
+  style.id = 'edit-theme-clouds_midnight';
+  style.type = 'text/css';
+  style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
+.edit-theme--clouds_midnight .editor__inner {\n\
+  color: #929292;\n\
+  caret-color: #929292;\n\
+}\n\
+.edit-theme--clouds_midnight .editor {\n\
+  background-color: #191919;\n\
+}\n\
+/* 标题颜色 */\n\
+.edit-theme--clouds_midnight .editor__inner .cn-head,\n\
+.edit-theme--clouds_midnight .editor-in-page-buttons .icon {\n\
+  color: #46A609;\n\
+}\n\
+/* 加粗颜色 */\n\
+.edit-theme--clouds_midnight .editor__inner .cn-strong {\n\
+  color: #927C5D;\n\
+}\n\
+/* 信息块颜色 */\n\
+.edit-theme--clouds_midnight .editor__inner .blockquote {\n\
+  color: #5D90CD;\n\
+}\n\
+/* 源信息、md标记符号等非关键信息的颜色 */\n\
+.edit-theme--clouds_midnight .editor__inner .cl,\n\
+.edit-theme--clouds_midnight .editor__inner .hr,\n\
+.edit-theme--clouds_midnight .editor__inner .link,\n\
+.edit-theme--clouds_midnight .editor__inner .linkref, \n\
+.edit-theme--clouds_midnight .editor__inner .linkdef .url {\n\
+  color: rgba(139,158,177,0.8);\n\
+}\n\
+.edit-theme--clouds_midnight .editor__inner .cn-toc, \n\
+.edit-theme--clouds_midnight .editor__inner .code,\n\
+.edit-theme--clouds_midnight .editor__inner .img,\n\
+.edit-theme--clouds_midnight .editor__inner .img-wrapper,\n\
+.edit-theme--clouds_midnight .editor__inner .imgref,\n\
+.edit-theme--clouds_midnight .editor__inner .cl-toc {\n\
+  color: rgba(139,158,177,0.8);\n\
+  background-color: rgba(0,0,0,0.33);\n\
+}\n\
+/* 代码块颜色 */\n\
+.edit-theme--clouds_midnight .editor__inner .cn-code {\n\
+  color: #E92E2E;\n\
+}\n\
+/* 链接颜色 */\n\
+.edit-theme--clouds_midnight .editor__inner .img .cl-underlined-text,\n\
+.edit-theme--clouds_midnight .editor__inner .imgref .cl-underlined-text,\n\
+.edit-theme--clouds_midnight .editor__inner .link .cl-underlined-text,\n\
+.edit-theme--clouds_midnight .editor__inner .linkref .cl-underlined-text {\n\
+  color: #5D90CD;\n\
+}\n\
+/* 图片原始链接背景颜色 */\n\
+.edit-theme--clouds_midnight .editor__inner .img-wrapper .img {\n\
+  background-color: transparent;\n\
+}\n\
+.edit-theme--clouds_midnight .editor__inner .keyword {\n\
+  color: #47596b;\n\
+}\n\
+.edit-theme--clouds_midnight .editor__inner .email,\n\
+.edit-theme--clouds_midnight .editor__inner .cl-title,\n\
+.edit-theme--clouds_midnight .editor__inner .tag,\n\
+.edit-theme--clouds_midnight .editor__inner .latex,\n\
+.edit-theme--clouds_midnight .editor__inner .math,\n\
+.edit-theme--clouds_midnight .editor__inner .entity,\n\
+.edit-theme--clouds_midnight .editor__inner .pre [class*='language-'] {\n\
+  color: #929292;\n\
+}";
+  document.head.appendChild(style);
+}
+init_edit_theme_clouds_midnight();
\ No newline at end of file
diff --git a/static/themes/edit-theme-dawn.js b/static/themes/edit-theme-dawn.js
new file mode 100644
index 00000000..02e3d0d2
--- /dev/null
+++ b/static/themes/edit-theme-dawn.js
@@ -0,0 +1,72 @@
+function init_edit_theme_dawn() {
+  const style = document.createElement('style');
+  style.id = 'edit-theme-dawn';
+  style.type = 'text/css';
+  style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
+.edit-theme--dawn .editor__inner {\n\
+  color: #080808;\n\
+  caret-color: #080808;\n\
+}\n\
+.edit-theme--dawn .editor {\n\
+  background-color: #F9F9F9;\n\
+}\n\
+/* 标题颜色 */\n\
+.edit-theme--dawn .editor__inner .cn-head,\n\
+.edit-theme--dawn .editor-in-page-buttons .icon {\n\
+  color: #19356D;\n\
+}\n\
+/* 加粗颜色 */\n\
+.edit-theme--dawn .editor__inner .cn-strong {\n\
+  color: #794938;\n\
+}\n\
+/* 信息块颜色 */\n\
+.edit-theme--dawn .editor__inner .blockquote {\n\
+  color: #811F24;\n\
+}\n\
+/* 源信息、md标记符号等非关键信息的颜色 */\n\
+.edit-theme--dawn .editor__inner .cl,\n\
+.edit-theme--dawn .editor__inner .hr,\n\
+.edit-theme--dawn .editor__inner .link,\n\
+.edit-theme--dawn .editor__inner .linkref, \n\
+.edit-theme--dawn .editor__inner .linkdef .url {\n\
+  color: rgba(102,128,153,0.6);\n\
+}\n\
+.edit-theme--dawn .editor__inner .cn-toc, \n\
+.edit-theme--dawn .editor__inner .code,\n\
+.edit-theme--dawn .editor__inner .img,\n\
+.edit-theme--dawn .editor__inner .img-wrapper,\n\
+.edit-theme--dawn .editor__inner .imgref,\n\
+.edit-theme--dawn .editor__inner .cl-toc {\n\
+  color: rgba(102,128,153,0.6);\n\
+  background-color: rgba(102,128,153,0.075);\n\
+}\n\
+/* 代码块颜色 */\n\
+.edit-theme--dawn .editor__inner .cn-code {\n\
+  color: #693A17;\n\
+}\n\
+/* 链接颜色 */\n\
+.edit-theme--dawn .editor__inner .img .cl-underlined-text,\n\
+.edit-theme--dawn .editor__inner .imgref .cl-underlined-text,\n\
+.edit-theme--dawn .editor__inner .link .cl-underlined-text,\n\
+.edit-theme--dawn .editor__inner .linkref .cl-underlined-text {\n\
+  color: #0B6125;\n\
+}\n\
+/* 图片原始链接背景颜色 */\n\
+.edit-theme--dawn .editor__inner .img-wrapper .img {\n\
+  background-color: transparent;\n\
+}\n\
+.edit-theme--dawn .editor__inner .keyword {\n\
+  color: #47596b;\n\
+}\n\
+.edit-theme--dawn .editor__inner .email,\n\
+.edit-theme--dawn .editor__inner .cl-title,\n\
+.edit-theme--dawn .editor__inner .tag,\n\
+.edit-theme--dawn .editor__inner .latex,\n\
+.edit-theme--dawn .editor__inner .math,\n\
+.edit-theme--dawn .editor__inner .entity,\n\
+.edit-theme--dawn .editor__inner .pre [class*='language-'] {\n\
+  color: #080808;\n\
+}";
+  document.head.appendChild(style);
+}
+init_edit_theme_dawn();
\ No newline at end of file
diff --git a/static/themes/edit-theme-github.js b/static/themes/edit-theme-github.js
new file mode 100644
index 00000000..a78e0258
--- /dev/null
+++ b/static/themes/edit-theme-github.js
@@ -0,0 +1,73 @@
+function init_edit_theme_github() {
+  const style = document.createElement('style');
+  style.id = 'edit-theme-github';
+  style.type = 'text/css';
+  style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
+.edit-theme--github .editor__inner {\n\
+  color: #000;\n\
+  caret-color: #000;\n\
+  background-color: #fff;\n\
+}\n\
+.edit-theme--github .editor {\n\
+  background-color: #fff;\n\
+}\n\
+/* 标题颜色 */\n\
+.edit-theme--github .editor__inner .cn-head,\n\
+.edit-theme--github .editor-in-page-buttons .icon {\n\
+  color: #AAAAAA;\n\
+}\n\
+/* 加粗颜色 */\n\
+.edit-theme--github .editor__inner .cn-strong {\n\
+  color: #000;\n\
+}\n\
+/* 信息块颜色 */\n\
+.edit-theme--github .editor__inner .blockquote {\n\
+  color: rgba(0,0,0,0.48);\n\
+}\n\
+/* 源信息、md标记符号等非关键信息的颜色 */\n\
+.edit-theme--github .editor__inner .cl,\n\
+.edit-theme--github .editor__inner .hr,\n\
+.edit-theme--github .editor__inner .link,\n\
+.edit-theme--github .editor__inner .linkref, \n\
+.edit-theme--github .editor__inner .linkdef .url {\n\
+  color: rgba(0,0,0,0.28);\n\
+}\n\
+.edit-theme--github .editor__inner .cn-toc, \n\
+.edit-theme--github .editor__inner .code,\n\
+.edit-theme--github .editor__inner .img,\n\
+.edit-theme--github .editor__inner .img-wrapper,\n\
+.edit-theme--github .editor__inner .imgref,\n\
+.edit-theme--github .editor__inner .cl-toc {\n\
+  color: rgba(0,0,0,0.28);\n\
+  background-color: rgba(102,128,153,0.075);\n\
+}\n\
+/* 代码块颜色 */\n\
+.edit-theme--github .editor__inner .cn-code {\n\
+  color: #0086B3;\n\
+}\n\
+/* 链接颜色 */\n\
+.edit-theme--github .editor__inner .img .cl-underlined-text,\n\
+.edit-theme--github .editor__inner .imgref .cl-underlined-text,\n\
+.edit-theme--github .editor__inner .link .cl-underlined-text,\n\
+.edit-theme--github .editor__inner .linkref .cl-underlined-text {\n\
+  color: #D14;\n\
+}\n\
+/* 图片原始链接背景颜色 */\n\
+.edit-theme--github .editor__inner .img-wrapper .img {\n\
+  background-color: transparent;\n\
+}\n\
+.edit-theme--github .editor__inner .keyword {\n\
+  color: rgba(0,0,0,0.75);\n\
+}\n\
+.edit-theme--github .editor__inner .email,\n\
+.edit-theme--github .editor__inner .cl-title,\n\
+.edit-theme--github .editor__inner .tag,\n\
+.edit-theme--github .editor__inner .latex,\n\
+.edit-theme--github .editor__inner .math,\n\
+.edit-theme--github .editor__inner .entity,\n\
+.edit-theme--github .editor__inner .pre [class*='language-'] {\n\
+  color: #29333d;\n\
+}";
+  document.head.appendChild(style);
+}
+init_edit_theme_github();
\ No newline at end of file
diff --git a/static/themes/edit-theme-iceberg_contrast.js b/static/themes/edit-theme-iceberg_contrast.js
new file mode 100644
index 00000000..12e44baf
--- /dev/null
+++ b/static/themes/edit-theme-iceberg_contrast.js
@@ -0,0 +1,72 @@
+function init_edit_theme_iceberg_contrast() {
+  const style = document.createElement('style');
+  style.id = 'edit-theme-iceberg_contrast';
+  style.type = 'text/css';
+  style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
+.edit-theme--iceberg_contrast .editor__inner {\n\
+  color: #BDD6DB;\n\
+  caret-color: #fff;\n\
+}\n\
+.edit-theme--iceberg_contrast .editor {\n\
+  background-color: #0b0e0e;\n\
+}\n\
+/* 标题颜色 */\n\
+.edit-theme--iceberg_contrast .editor__inner .cn-head,\n\
+.edit-theme--iceberg_contrast .editor-in-page-buttons .icon {\n\
+  color: #fff;\n\
+}\n\
+/* 加粗颜色 */\n\
+.edit-theme--iceberg_contrast .editor__inner .cn-strong {\n\
+  color: #B1E2F2;\n\
+}\n\
+/* 信息块颜色 */\n\
+.edit-theme--iceberg_contrast .editor__inner .blockquote {\n\
+  color: #ffffff;\n\
+}\n\
+/* 源信息、md标记符号等非关键信息的颜色 */\n\
+.edit-theme--iceberg_contrast .editor__inner .cl,\n\
+.edit-theme--iceberg_contrast .editor__inner .hr,\n\
+.edit-theme--iceberg_contrast .editor__inner .link,\n\
+.edit-theme--iceberg_contrast .editor__inner .linkref, \n\
+.edit-theme--iceberg_contrast .editor__inner .linkdef .url {\n\
+  color: rgba(139,158,177,0.8);\n\
+}\n\
+.edit-theme--iceberg_contrast .editor__inner .cn-toc, \n\
+.edit-theme--iceberg_contrast .editor__inner .code,\n\
+.edit-theme--iceberg_contrast .editor__inner .img,\n\
+.edit-theme--iceberg_contrast .editor__inner .img-wrapper,\n\
+.edit-theme--iceberg_contrast .editor__inner .imgref,\n\
+.edit-theme--iceberg_contrast .editor__inner .cl-toc {\n\
+  color: rgba(139,158,177,0.8);\n\
+  background-color: rgba(0,0,0,0.33);\n\
+}\n\
+/* 代码块颜色 */\n\
+.edit-theme--iceberg_contrast .editor__inner .cn-code {\n\
+  color: #fff;\n\
+}\n\
+/* 链接颜色 */\n\
+.edit-theme--iceberg_contrast .editor__inner .img .cl-underlined-text,\n\
+.edit-theme--iceberg_contrast .editor__inner .imgref .cl-underlined-text,\n\
+.edit-theme--iceberg_contrast .editor__inner .link .cl-underlined-text,\n\
+.edit-theme--iceberg_contrast .editor__inner .linkref .cl-underlined-text {\n\
+  color: #fff;\n\
+}\n\
+/* 图片原始链接背景颜色 */\n\
+.edit-theme--iceberg_contrast .editor__inner .img-wrapper .img {\n\
+  background-color: transparent;\n\
+}\n\
+.edit-theme--iceberg_contrast .editor__inner .keyword {\n\
+  color: #fff;\n\
+}\n\
+.edit-theme--iceberg_contrast .editor__inner .email,\n\
+.edit-theme--iceberg_contrast .editor__inner .cl-title,\n\
+.edit-theme--iceberg_contrast .editor__inner .tag,\n\
+.edit-theme--iceberg_contrast .editor__inner .latex,\n\
+.edit-theme--iceberg_contrast .editor__inner .math,\n\
+.edit-theme--iceberg_contrast .editor__inner .entity,\n\
+.edit-theme--iceberg_contrast .editor__inner .pre [class*='language-'] {\n\
+  color: #BDD6DB;\n\
+}";
+  document.head.appendChild(style);
+}
+init_edit_theme_iceberg_contrast();
\ No newline at end of file
diff --git a/static/themes/edit-theme-mintchoc.js b/static/themes/edit-theme-mintchoc.js
new file mode 100644
index 00000000..05795dc9
--- /dev/null
+++ b/static/themes/edit-theme-mintchoc.js
@@ -0,0 +1,72 @@
+function init_edit_theme_mintchoc() {
+  const style = document.createElement('style');
+  style.id = 'edit-theme-mintchoc';
+  style.type = 'text/css';
+  style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
+.edit-theme--mintchoc .editor__inner {\n\
+  color: #BABABA;\n\
+  caret-color: #BABABA;\n\
+}\n\
+.edit-theme--mintchoc .editor {\n\
+  background-color: #2b221c;\n\
+}\n\
+/* 标题颜色 */\n\
+.edit-theme--mintchoc .editor__inner .cn-head,\n\
+.edit-theme--mintchoc .editor-in-page-buttons .icon {\n\
+  color: #00E08C;\n\
+}\n\
+/* 加粗颜色 */\n\
+.edit-theme--mintchoc .editor__inner .cn-strong {\n\
+  color: #9D8262;\n\
+}\n\
+/* 信息块颜色 */\n\
+.edit-theme--mintchoc .editor__inner .blockquote {\n\
+  color: #008D62;\n\
+}\n\
+/* 源信息、md标记符号等非关键信息的颜色 */\n\
+.edit-theme--mintchoc .editor__inner .cl,\n\
+.edit-theme--mintchoc .editor__inner .hr,\n\
+.edit-theme--mintchoc .editor__inner .link,\n\
+.edit-theme--mintchoc .editor__inner .linkref, \n\
+.edit-theme--mintchoc .editor__inner .linkdef .url {\n\
+  color: rgba(139,158,177,0.8);\n\
+}\n\
+.edit-theme--mintchoc .editor__inner .cn-toc, \n\
+.edit-theme--mintchoc .editor__inner .code,\n\
+.edit-theme--mintchoc .editor__inner .img,\n\
+.edit-theme--mintchoc .editor__inner .img-wrapper,\n\
+.edit-theme--mintchoc .editor__inner .imgref,\n\
+.edit-theme--mintchoc .editor__inner .cl-toc {\n\
+  color: rgba(139,158,177,0.8);\n\
+  background-color: rgba(0,0,0,0.33);\n\
+}\n\
+/* 代码块颜色 */\n\
+.edit-theme--mintchoc .editor__inner .cn-code {\n\
+  color: #008D62;\n\
+}\n\
+/* 链接颜色 */\n\
+.edit-theme--mintchoc .editor__inner .img .cl-underlined-text,\n\
+.edit-theme--mintchoc .editor__inner .imgref .cl-underlined-text,\n\
+.edit-theme--mintchoc .editor__inner .link .cl-underlined-text,\n\
+.edit-theme--mintchoc .editor__inner .linkref .cl-underlined-text {\n\
+  color: #00E08C;\n\
+}\n\
+/* 图片原始链接背景颜色 */\n\
+.edit-theme--mintchoc .editor__inner .img-wrapper .img {\n\
+  background-color: transparent;\n\
+}\n\
+.edit-theme--mintchoc .editor__inner .keyword {\n\
+  color: #47596b;\n\
+}\n\
+.edit-theme--mintchoc .editor__inner .email,\n\
+.edit-theme--mintchoc .editor__inner .cl-title,\n\
+.edit-theme--mintchoc .editor__inner .tag,\n\
+.edit-theme--mintchoc .editor__inner .latex,\n\
+.edit-theme--mintchoc .editor__inner .math,\n\
+.edit-theme--mintchoc .editor__inner .entity,\n\
+.edit-theme--mintchoc .editor__inner .pre [class*='language-'] {\n\
+  color: #BABABA;\n\
+}";
+  document.head.appendChild(style);
+}
+init_edit_theme_mintchoc();
\ No newline at end of file
diff --git a/static/themes/edit-theme-peacock.js b/static/themes/edit-theme-peacock.js
new file mode 100644
index 00000000..02054ec1
--- /dev/null
+++ b/static/themes/edit-theme-peacock.js
@@ -0,0 +1,72 @@
+function init_edit_theme_peacock() {
+  const style = document.createElement('style');
+  style.id = 'edit-theme-peacock';
+  style.type = 'text/css';
+  style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
+.edit-theme--peacock .editor__inner {\n\
+  color: #ede0ce;\n\
+  caret-color: #ede0ce;\n\
+}\n\
+.edit-theme--peacock .editor {\n\
+  background-color: #2b2a27;\n\
+}\n\
+/* 标题颜色 */\n\
+.edit-theme--peacock .editor__inner .cn-head,\n\
+.edit-theme--peacock .editor-in-page-buttons .icon {\n\
+  color: #bcd42a;\n\
+}\n\
+/* 加粗颜色 */\n\
+.edit-theme--peacock .editor__inner .cn-strong {\n\
+  color: #26A6A6;\n\
+}\n\
+/* 信息块颜色 */\n\
+.edit-theme--peacock .editor__inner .blockquote {\n\
+  color: #ff5d38;\n\
+}\n\
+/* 源信息、md标记符号等非关键信息的颜色 */\n\
+.edit-theme--peacock .editor__inner .cl,\n\
+.edit-theme--peacock .editor__inner .hr,\n\
+.edit-theme--peacock .editor__inner .link,\n\
+.edit-theme--peacock .editor__inner .linkref, \n\
+.edit-theme--peacock .editor__inner .linkdef .url {\n\
+  color: rgba(139,158,177,0.8);\n\
+}\n\
+.edit-theme--peacock .editor__inner .cn-toc, \n\
+.edit-theme--peacock .editor__inner .code,\n\
+.edit-theme--peacock .editor__inner .img,\n\
+.edit-theme--peacock .editor__inner .img-wrapper,\n\
+.edit-theme--peacock .editor__inner .imgref,\n\
+.edit-theme--peacock .editor__inner .cl-toc {\n\
+  color: rgba(139,158,177,0.8);\n\
+  background-color: rgba(0,0,0,0.33);\n\
+}\n\
+/* 代码块颜色 */\n\
+.edit-theme--peacock .editor__inner .cn-code {\n\
+  color: #FF5D38;\n\
+}\n\
+/* 链接颜色 */\n\
+.edit-theme--peacock .editor__inner .img .cl-underlined-text,\n\
+.edit-theme--peacock .editor__inner .imgref .cl-underlined-text,\n\
+.edit-theme--peacock .editor__inner .link .cl-underlined-text,\n\
+.edit-theme--peacock .editor__inner .linkref .cl-underlined-text {\n\
+  color: #bcd42a;\n\
+}\n\
+/* 图片原始链接背景颜色 */\n\
+.edit-theme--peacock .editor__inner .img-wrapper .img {\n\
+  background-color: transparent;\n\
+}\n\
+.edit-theme--peacock .editor__inner .keyword {\n\
+  color: #47596b;\n\
+}\n\
+.edit-theme--peacock .editor__inner .email,\n\
+.edit-theme--peacock .editor__inner .cl-title,\n\
+.edit-theme--peacock .editor__inner .tag,\n\
+.edit-theme--peacock .editor__inner .latex,\n\
+.edit-theme--peacock .editor__inner .math,\n\
+.edit-theme--peacock .editor__inner .entity,\n\
+.edit-theme--peacock .editor__inner .pre [class*='language-'] {\n\
+  color: #ede0ce;\n\
+}";
+  document.head.appendChild(style);
+}
+init_edit_theme_peacock();
\ No newline at end of file
diff --git a/static/themes/edit-theme-slate.js b/static/themes/edit-theme-slate.js
new file mode 100644
index 00000000..cde34d4b
--- /dev/null
+++ b/static/themes/edit-theme-slate.js
@@ -0,0 +1,72 @@
+function init_edit_theme_slate() {
+  const style = document.createElement('style');
+  style.id = 'edit-theme-slate';
+  style.type = 'text/css';
+  style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
+.edit-theme--slate .editor__inner {\n\
+  color: #ebebf4;\n\
+  caret-color: #ebebf4;\n\
+}\n\
+.edit-theme--slate .editor {\n\
+  background-color: #19191f;\n\
+}\n\
+/* 标题颜色 */\n\
+.edit-theme--slate .editor__inner .cn-head,\n\
+.edit-theme--slate .editor-in-page-buttons .icon {\n\
+  color: #9eb2d9;\n\
+}\n\
+/* 加粗颜色 */\n\
+.edit-theme--slate .editor__inner .cn-strong {\n\
+  color: #566981;\n\
+}\n\
+/* 信息块颜色 */\n\
+.edit-theme--slate .editor__inner .blockquote {\n\
+  color: #89A7B1;\n\
+}\n\
+/* 源信息、md标记符号等非关键信息的颜色 */\n\
+.edit-theme--slate .editor__inner .cl,\n\
+.edit-theme--slate .editor__inner .hr,\n\
+.edit-theme--slate .editor__inner .link,\n\
+.edit-theme--slate .editor__inner .linkref, \n\
+.edit-theme--slate .editor__inner .linkdef .url {\n\
+  color: rgba(139,158,177,0.8);\n\
+}\n\
+.edit-theme--slate .editor__inner .cn-toc, \n\
+.edit-theme--slate .editor__inner .code,\n\
+.edit-theme--slate .editor__inner .img,\n\
+.edit-theme--slate .editor__inner .img-wrapper,\n\
+.edit-theme--slate .editor__inner .imgref,\n\
+.edit-theme--slate .editor__inner .cl-toc {\n\
+  color: rgba(139,158,177,0.8);\n\
+  background-color: rgba(0,0,0,0.33);\n\
+}\n\
+/* 代码块颜色 */\n\
+.edit-theme--slate .editor__inner .cn-code {\n\
+  color: #89A7B1;\n\
+}\n\
+/* 链接颜色 */\n\
+.edit-theme--slate .editor__inner .img .cl-underlined-text,\n\
+.edit-theme--slate .editor__inner .imgref .cl-underlined-text,\n\
+.edit-theme--slate .editor__inner .link .cl-underlined-text,\n\
+.edit-theme--slate .editor__inner .linkref .cl-underlined-text {\n\
+  color: #9eb2d9;\n\
+}\n\
+/* 图片原始链接背景颜色 */\n\
+.edit-theme--slate .editor__inner .img-wrapper .img {\n\
+  background-color: transparent;\n\
+}\n\
+.edit-theme--slate .editor__inner .keyword {\n\
+  color: #47596b;\n\
+}\n\
+.edit-theme--slate .editor__inner .email,\n\
+.edit-theme--slate .editor__inner .cl-title,\n\
+.edit-theme--slate .editor__inner .tag,\n\
+.edit-theme--slate .editor__inner .latex,\n\
+.edit-theme--slate .editor__inner .math,\n\
+.edit-theme--slate .editor__inner .entity,\n\
+.edit-theme--slate .editor__inner .pre [class*='language-'] {\n\
+  color: #ebebf4;\n\
+}";
+  document.head.appendChild(style);
+}
+init_edit_theme_slate();
\ No newline at end of file
diff --git a/static/themes/edit-theme-solarized_light.js b/static/themes/edit-theme-solarized_light.js
new file mode 100644
index 00000000..e83fae3f
--- /dev/null
+++ b/static/themes/edit-theme-solarized_light.js
@@ -0,0 +1,72 @@
+function init_edit_theme_solarized_light() {
+  const style = document.createElement('style');
+  style.id = 'edit-theme-solarized_light';
+  style.type = 'text/css';
+  style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
+.edit-theme--solarized_light .editor__inner {\n\
+  color: #586E75;\n\
+  caret-color: #586E75;\n\
+}\n\
+.edit-theme--solarized_light .editor {\n\
+  background-color: #FDF6E3;\n\
+}\n\
+/* 标题颜色 */\n\
+.edit-theme--solarized_light .editor__inner .cn-head,\n\
+.edit-theme--solarized_light .editor-in-page-buttons .icon {\n\
+  color: #D33682;\n\
+}\n\
+/* 加粗颜色 */\n\
+.edit-theme--solarized_light .editor__inner .cn-strong {\n\
+  color: #859900;\n\
+}\n\
+/* 信息块颜色 */\n\
+.edit-theme--solarized_light .editor__inner .blockquote {\n\
+  color: #CB4B16;\n\
+}\n\
+/* 源信息、md标记符号等非关键信息的颜色 */\n\
+.edit-theme--solarized_light .editor__inner .cl,\n\
+.edit-theme--solarized_light .editor__inner .hr,\n\
+.edit-theme--solarized_light .editor__inner .link,\n\
+.edit-theme--solarized_light .editor__inner .linkref, \n\
+.edit-theme--solarized_light .editor__inner .linkdef .url {\n\
+  color: rgba(102,128,153,0.6);\n\
+}\n\
+.edit-theme--solarized_light .editor__inner .cn-toc, \n\
+.edit-theme--solarized_light .editor__inner .code,\n\
+.edit-theme--solarized_light .editor__inner .img,\n\
+.edit-theme--solarized_light .editor__inner .img-wrapper,\n\
+.edit-theme--solarized_light .editor__inner .imgref,\n\
+.edit-theme--solarized_light .editor__inner .cl-toc {\n\
+  color: rgba(102,128,153,0.6);\n\
+  background-color: rgba(102,128,153,0.075);\n\
+}\n\
+/* 代码块颜色 */\n\
+.edit-theme--solarized_light .editor__inner .cn-code {\n\
+  color: #268BD2;\n\
+}\n\
+/* 链接颜色 */\n\
+.edit-theme--solarized_light .editor__inner .img .cl-underlined-text,\n\
+.edit-theme--solarized_light .editor__inner .imgref .cl-underlined-text,\n\
+.edit-theme--solarized_light .editor__inner .link .cl-underlined-text,\n\
+.edit-theme--solarized_light .editor__inner .linkref .cl-underlined-text {\n\
+  color: #2AA198;\n\
+}\n\
+/* 图片原始链接背景颜色 */\n\
+.edit-theme--solarized_light .editor__inner .img-wrapper .img {\n\
+  background-color: transparent;\n\
+}\n\
+.edit-theme--solarized_light .editor__inner .keyword {\n\
+  color: #47596b;\n\
+}\n\
+.edit-theme--solarized_light .editor__inner .email,\n\
+.edit-theme--solarized_light .editor__inner .cl-title,\n\
+.edit-theme--solarized_light .editor__inner .tag,\n\
+.edit-theme--solarized_light .editor__inner .latex,\n\
+.edit-theme--solarized_light .editor__inner .math,\n\
+.edit-theme--solarized_light .editor__inner .entity,\n\
+.edit-theme--solarized_light .editor__inner .pre [class*='language-'] {\n\
+  color: #586E75;\n\
+}";
+  document.head.appendChild(style);
+}
+init_edit_theme_solarized_light();
\ No newline at end of file
diff --git a/static/themes/edit-theme-spearmint.js b/static/themes/edit-theme-spearmint.js
new file mode 100644
index 00000000..8c312ac6
--- /dev/null
+++ b/static/themes/edit-theme-spearmint.js
@@ -0,0 +1,72 @@
+function init_edit_theme_spearmint() {
+  const style = document.createElement('style');
+  style.id = 'edit-theme-spearmint';
+  style.type = 'text/css';
+  style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
+.edit-theme--spearmint .editor__inner {\n\
+  color: #719692;\n\
+  caret-color: #719692;\n\
+}\n\
+.edit-theme--spearmint .editor {\n\
+  background-color: #E1F0EE;\n\
+}\n\
+/* 标题颜色 */\n\
+.edit-theme--spearmint .editor__inner .cn-head,\n\
+.edit-theme--spearmint .editor-in-page-buttons .icon {\n\
+  color: #199FA8;\n\
+}\n\
+/* 加粗颜色 */\n\
+.edit-theme--spearmint .editor__inner .cn-strong {\n\
+  color: #69ADB5;\n\
+}\n\
+/* 信息块颜色 */\n\
+.edit-theme--spearmint .editor__inner .blockquote {\n\
+  color: #25808A;\n\
+}\n\
+/* 源信息、md标记符号等非关键信息的颜色 */\n\
+.edit-theme--spearmint .editor__inner .cl,\n\
+.edit-theme--spearmint .editor__inner .hr,\n\
+.edit-theme--spearmint .editor__inner .link,\n\
+.edit-theme--spearmint .editor__inner .linkref, \n\
+.edit-theme--spearmint .editor__inner .linkdef .url {\n\
+  color: rgba(102,128,153,0.6);\n\
+}\n\
+.edit-theme--spearmint .editor__inner .cn-toc, \n\
+.edit-theme--spearmint .editor__inner .code,\n\
+.edit-theme--spearmint .editor__inner .img,\n\
+.edit-theme--spearmint .editor__inner .img-wrapper,\n\
+.edit-theme--spearmint .editor__inner .imgref,\n\
+.edit-theme--spearmint .editor__inner .cl-toc {\n\
+  color: rgba(102,128,153,0.6);\n\
+  background-color: rgba(102,128,153,0.075);\n\
+}\n\
+/* 代码块颜色 */\n\
+.edit-theme--spearmint .editor__inner .cn-code {\n\
+  color: #199FA8;\n\
+}\n\
+/* 链接颜色 */\n\
+.edit-theme--spearmint .editor__inner .img .cl-underlined-text,\n\
+.edit-theme--spearmint .editor__inner .imgref .cl-underlined-text,\n\
+.edit-theme--spearmint .editor__inner .link .cl-underlined-text,\n\
+.edit-theme--spearmint .editor__inner .linkref .cl-underlined-text {\n\
+  color: #4CD7E0;\n\
+}\n\
+/* 图片原始链接背景颜色 */\n\
+.edit-theme--spearmint .editor__inner .img-wrapper .img {\n\
+  background-color: transparent;\n\
+}\n\
+.edit-theme--spearmint .editor__inner .keyword {\n\
+  color: #47596b;\n\
+}\n\
+.edit-theme--spearmint .editor__inner .email,\n\
+.edit-theme--spearmint .editor__inner .cl-title,\n\
+.edit-theme--spearmint .editor__inner .tag,\n\
+.edit-theme--spearmint .editor__inner .latex,\n\
+.edit-theme--spearmint .editor__inner .math,\n\
+.edit-theme--spearmint .editor__inner .entity,\n\
+.edit-theme--spearmint .editor__inner .pre [class*='language-'] {\n\
+  color: #719692;\n\
+}";
+  document.head.appendChild(style);
+}
+init_edit_theme_spearmint();
\ No newline at end of file