feat: update themes

更新主题

README_CN.md

@@ -14,6 +14,34 @@
 ## 为什么要二次改造？
 每个人的审美都不一样，我希望能在基础 CSS 样式的基础上进行改造，定义一款自己喜欢的微信 Markdown 编辑器。
 
+## 如何扩展样式？
+- 首先在 `assets/scripts/themes/` 文件夹下添加一个 js 文件作为扩展的主题样式，如 `pink.js`，内容的格式与其他主题保持一致，let 变量命名为 `pinkTheme`。
+- 然后在 `assets/scripts/editor.js` 中，找到变量 `themeOption`，添加一个选项（建议将 author 设置为色值的十六进制），如：
+  ```javascript
+  themeOption: [
+    { label: '橘红', value: 'orange', author: '#ff5f2e' },
+    { label: '淡绿', value: 'lightgreen', author: '#42b983'},
+    { label: '暗青', value: 'darkcyan', author: '#008b8b'},
+    { label: '粉色', value: 'pink', author: '#ff1cae'},
+  ],
+  ```
+  接着在下方的 `styleThemes` 中添加 一个 pink 主题，如：
+  ```javascript
+  styleThemes: {
+    orange: orangeTheme,
+    lightgreen: lightgreenTheme,
+    darkcyan: darkcyanTheme,
+    pink: pinkTheme,
+  },
+  ```
+- 最后在 `index.html` 文件末尾引入 pink.js 文件，如：
+  ```javascript
+  <script src="assets/scripts/themes/orange.js"></script>
+  <script src="assets/scripts/themes/lightgreen.js"></script>
+  <script src="assets/scripts/themes/darkcyan.js"></script>
+  <script src="assets/scripts/themes/pink.js"></script>
+  ```
+
 ## 我的公众号
 可以用微信扫码关注我的公众号“Doocs开源社区”，原创技术文章第一时间推送。
 

assets/scripts/editor.js

@@ -27,17 +27,21 @@ let app = new Vue({
         { label: '16px', value: '16px', desc: '稍大' },
       ],
       themeOption: [
-        { label: 'default', value: 'default', author: '默认' },
+        { label: '橘红', value: 'orange', author: '#FF5F2E' },
+        { label: '淡绿', value: 'lightgreen', author: '#42B983'},
+        { label: '暗青', value: 'darkcyan', author: '#008B8B'}
       ],
       styleThemes: {
-        default: defaultTheme
+        orange: orangeTheme,
+        lightgreen: lightgreenTheme,
+        darkcyan: darkcyanTheme
       },
       aboutDialogVisible: false
     };
     d.currentEditorTheme = d.editorThemes[0].value;
     d.currentFont = d.builtinFonts[0].value;
     d.currentSize = d.sizeOption[0].value;
-    d.currentTheme = d.themeOption[0].value;
+    d.currentTheme = d.themeOption[1].value;
     return d;
   },
   mounted() {
@@ -57,7 +61,7 @@ let app = new Vue({
       self.saveEditorContent();
     });
     this.wxRenderer = new WxRenderer({
-      theme: this.styleThemes.default,
+      theme: this.styleThemes.lightgreen,
       fonts: this.currentFont,
       size: this.currentSize
     });

assets/scripts/themes/darkcyan.js

@@ -0,0 +1,147 @@
+let darkcyanTheme = {
+  BASE: {
+    'text-align': 'left',
+    'color': '#3f3f3f',
+    'line-height': '1.75',
+  },
+  BASE_BLOCK: {
+    'margin': '1em 8px'
+  },
+  block: {
+    h1: {
+      'font-size': '1.2em',
+      'text-align': 'center',
+      'font-weight': 'bold',
+      'display': 'table',
+      'margin': '2em auto 1em',
+      'padding': '0 1em',
+      'border-bottom': '2px solid rgba(0, 139, 139, 0.9)'
+    },
+    h2: {
+      'font-size': '1.1em',
+      'text-align': 'center',
+      'font-weight': 'bold',
+      'display': 'table',
+      'margin': '4em auto 2em',
+      'padding': '0 0.2em',
+      'background': 'rgba(0, 139, 139, 0.9)',
+      'color': '#fff'
+    },
+    h3: {
+      'font-weight': 'bold',
+      'font-size': '1.1em',
+      'margin': '2em 8px 0.75em 0',
+      'line-height': '1.2',
+      'padding-left': '8px',
+      'border-left': '3px solid rgba(0, 139, 139, 0.9)'
+    },
+    h4: {
+      'font-weight': 'bold',
+      'font-size': '1em',
+      'margin': '2em 8px 0.5em',
+    },
+    p: {
+      'margin': '1.5em 8px',
+      'letter-spacing': '0.1em'
+    },
+    blockquote: {
+      'font-style': 'normal',
+      'border-left': 'none',
+      'padding': '1em',
+      'border-radius': '4px',
+      'color': '#FEEEED',
+      'background': 'rgba(27,31,35,.05)',
+      'margin': '2em 8px'
+    },
+    blockquote_p: {
+      'letter-spacing': '0.1em',
+      'color': 'rgb(80, 80, 80)',
+      'font-family': 'PingFangSC-light, PingFangTC-light, Open Sans, Helvetica Neue, sans-serif',
+      'font-size': '1em',
+      'display': 'inline',
+    },
+    code: {
+      'font-size': '80%',
+      'overflow': 'auto',
+      'color': '#333',
+      'background': 'rgb(247, 247, 247)',
+      'border-radius': '2px',
+      'padding': '10px',
+      'line-height': '1.5',
+      'border': '1px solid rgb(236,236,236)',
+      'margin': '20px 0',
+    },
+    image: {
+      'border-radius': '4px',
+      'display': 'block',
+      'margin': '0.5em auto',
+      'width': '100% !important'
+    },
+    image_org: {
+      'border-radius': '4px',
+      'display': 'block'
+    },
+    ol: {
+      'margin-left': '0',
+      'padding-left': '1em'
+    },
+    ul: {
+      'margin-left': '0',
+      'padding-left': '1em',
+      'list-style': 'circle'
+    },
+    footnotes: {
+      'margin': '0.5em 8px',
+      'font-size': '80%'
+    },
+    figure: {
+      'margin': '1.5em 8px',
+    }
+  },
+  inline: {
+    listitem: {
+      'text-indent': '-1em',
+      'display': 'block',
+      'margin': '0.5em 8px'
+    },
+    codespan: {
+      'font-size': '90%',
+      'color': '#d14',
+      'background': 'rgba(27,31,35,.05)',
+      'padding': '3px 5px',
+      'border-radius': '4px',
+    },
+    link: {
+      'color': '#576b95'
+    },
+    wx_link: {
+      'color': '#576b95',
+      'text-decoration': 'none',
+    },
+    strong: {
+      'color': 'rgba(0, 139, 139, 0.9)',
+      'font-weight': 'bold',
+    },
+    table: {
+      'border-collapse': 'collapse',
+      'text-align': 'center',
+      'margin': '1em 8px'
+    },
+    thead: {
+      'background': 'rgba(0, 0, 0, 0.05)'
+    },
+    td: {
+      'font-size': '80%',
+      'border': '1px solid #dfdfdf',
+      'padding': '0.25em 0.5em'
+    },
+    footnote: {
+      'font-size': '12px'
+    },
+    figcaption: {
+      'text-align': 'center',
+      'color': '#888',
+      'font-size': '0.8em'
+    }
+  }
+};

assets/scripts/themes/lightgreen.js

@@ -0,0 +1,147 @@
+let lightgreenTheme = {
+  BASE: {
+    'text-align': 'left',
+    'color': '#3f3f3f',
+    'line-height': '1.75',
+  },
+  BASE_BLOCK: {
+    'margin': '1em 8px'
+  },
+  block: {
+    h1: {
+      'font-size': '1.2em',
+      'text-align': 'center',
+      'font-weight': 'bold',
+      'display': 'table',
+      'margin': '2em auto 1em',
+      'padding': '0 1em',
+      'border-bottom': '2px solid rgba(66, 185, 131, 0.9)'
+    },
+    h2: {
+      'font-size': '1.1em',
+      'text-align': 'center',
+      'font-weight': 'bold',
+      'display': 'table',
+      'margin': '4em auto 2em',
+      'padding': '0 0.2em',
+      'background': 'rgba(66, 185, 131, 0.9)',
+      'color': '#fff'
+    },
+    h3: {
+      'font-weight': 'bold',
+      'font-size': '1.1em',
+      'margin': '2em 8px 0.75em 0',
+      'line-height': '1.2',
+      'padding-left': '8px',
+      'border-left': '3px solid rgba(66, 185, 131, 0.9)'
+    },
+    h4: {
+      'font-weight': 'bold',
+      'font-size': '1em',
+      'margin': '2em 8px 0.5em',
+    },
+    p: {
+      'margin': '1.5em 8px',
+      'letter-spacing': '0.1em'
+    },
+    blockquote: {
+      'font-style': 'normal',
+      'border-left': 'none',
+      'padding': '1em',
+      'border-radius': '4px',
+      'color': '#FEEEED',
+      'background': 'rgba(27,31,35,.05)',
+      'margin': '2em 8px'
+    },
+    blockquote_p: {
+      'letter-spacing': '0.1em',
+      'color': 'rgb(80, 80, 80)',
+      'font-family': 'PingFangSC-light, PingFangTC-light, Open Sans, Helvetica Neue, sans-serif',
+      'font-size': '1em',
+      'display': 'inline',
+    },
+    code: {
+      'font-size': '80%',
+      'overflow': 'auto',
+      'color': '#333',
+      'background': 'rgb(247, 247, 247)',
+      'border-radius': '2px',
+      'padding': '10px',
+      'line-height': '1.5',
+      'border': '1px solid rgb(236,236,236)',
+      'margin': '20px 0',
+    },
+    image: {
+      'border-radius': '4px',
+      'display': 'block',
+      'margin': '0.5em auto',
+      'width': '100% !important'
+    },
+    image_org: {
+      'border-radius': '4px',
+      'display': 'block'
+    },
+    ol: {
+      'margin-left': '0',
+      'padding-left': '1em'
+    },
+    ul: {
+      'margin-left': '0',
+      'padding-left': '1em',
+      'list-style': 'circle'
+    },
+    footnotes: {
+      'margin': '0.5em 8px',
+      'font-size': '80%'
+    },
+    figure: {
+      'margin': '1.5em 8px',
+    }
+  },
+  inline: {
+    listitem: {
+      'text-indent': '-1em',
+      'display': 'block',
+      'margin': '0.5em 8px'
+    },
+    codespan: {
+      'font-size': '90%',
+      'color': '#d14',
+      'background': 'rgba(27,31,35,.05)',
+      'padding': '3px 5px',
+      'border-radius': '4px',
+    },
+    link: {
+      'color': '#576b95'
+    },
+    wx_link: {
+      'color': '#576b95',
+      'text-decoration': 'none',
+    },
+    strong: {
+      'color': 'rgba(66, 185, 131, 0.9)',
+      'font-weight': 'bold',
+    },
+    table: {
+      'border-collapse': 'collapse',
+      'text-align': 'center',
+      'margin': '1em 8px'
+    },
+    thead: {
+      'background': 'rgba(0, 0, 0, 0.05)'
+    },
+    td: {
+      'font-size': '80%',
+      'border': '1px solid #dfdfdf',
+      'padding': '0.25em 0.5em'
+    },
+    footnote: {
+      'font-size': '12px'
+    },
+    figcaption: {
+      'text-align': 'center',
+      'color': '#888',
+      'font-size': '0.8em'
+    }
+  }
+};

assets/scripts/themes/orange.js

@@ -1,4 +1,4 @@
-let defaultTheme = {
+let orangeTheme = {
   BASE: {
     'text-align': 'left',
     'color': '#3f3f3f',
@@ -15,7 +15,7 @@ let defaultTheme = {
       'display': 'table',
       'margin': '2em auto 1em',
       'padding': '0 1em',
-      'border-bottom': '2px solid #ff5f2e'
+      'border-bottom': '2px solid rgba(255, 95, 46, 0.9)'
     },
     h2: {
       'font-size': '1.1em',
@@ -24,7 +24,7 @@ let defaultTheme = {
       'display': 'table',
       'margin': '4em auto 2em',
       'padding': '0 0.2em',
-      'background': '#ff5f2e',
+      'background': 'rgba(255, 95, 46, 0.9)',
       'color': '#fff'
     },
     h3: {
@@ -33,7 +33,7 @@ let defaultTheme = {
       'margin': '2em 8px 0.75em 0',
       'line-height': '1.2',
       'padding-left': '8px',
-      'border-left': '3px solid #ff5f2e'
+      'border-left': '3px solid rgba(255, 95, 46, 0.9)'
     },
     h4: {
       'font-weight': 'bold',
@@ -119,7 +119,7 @@ let defaultTheme = {
       'text-decoration': 'none',
     },
     strong: {
-      'color': '#ff5f2e',
+      'color': 'rgba(255, 95, 46, 0.9)',
       'font-weight': 'bold',
     },
     table: {

index.html

@@ -128,7 +128,9 @@
   <script src="libs/sync-scroll.js"></script>
   <script src="libs/FuriganaMD.js"></script>
 
-  <script src="assets/scripts/themes/default.js"></script>
+  <script src="assets/scripts/themes/orange.js"></script>
+  <script src="assets/scripts/themes/lightgreen.js"></script>
+  <script src="assets/scripts/themes/darkcyan.js"></script>
   <script src="assets/scripts/renderers/wx-renderer.js"></script>
   <script src="assets/scripts/editor.js"></script>
   <script src="assets/scripts/loading.js"></script>