chore: optimize custom theme creation (#367)

src/assets/example/theme-css.txt

@@ -1,5 +1,10 @@
-/*
+/**
-  按 Alt/Option + Shift + F 可格式化
+ * 按 Alt/Option + Shift + F 可格式化
+ * 如需使用主题色，请使用 var(--md-primary-color) 代替颜色值
+ * 如：color: var(--md-primary-color);
+ *
+ * 召集令：如果你有好看的主题样式，欢迎分享，让更多人能够使用到你的主题。
+ * 提交区：https://github.com/doocs/md/issues/363
  */
 /* 一级标题样式 */
 h1 {

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -68,6 +68,7 @@ const {
   isDark,
   isCiteStatus,
   output,
+  fontColor,
 } = storeToRefs(store)
 
 const {
@@ -121,6 +122,8 @@ function copy() {
         .replace(/top:(.*?)em/g, `transform: translateY($1em)`)
         // 适配主题中的颜色变量
         .replaceAll(`var(--el-text-color-regular)`, `#3f3f3f`)
+        .replaceAll(`var(--md-primary-color)`, fontColor.value)
+        .replaceAll(/--md-primary-color:.+?;/g, ``)
       clipboardDiv.focus()
       window.getSelection().removeAllRanges()
       const range = document.createRange()

src/config/theme.ts

@@ -5,7 +5,6 @@ interface Theme {
 }
 
 const baseColor = `#3f3f3f`
-const baseBorderColor = `rgba(215, 16, 166, 0.8)`
 
 function mergeTheme(defaultTheme: Theme, newTheme: Theme) {
   const res: Theme = {
@@ -33,51 +32,52 @@ function mergeTheme(defaultTheme: Theme, newTheme: Theme) {
 
 const defaultTheme = {
   BASE: {
+    '--md-primary-color': `#000000`,
     'text-align': `left`,
     'line-height': `1.75`,
   },
   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, 152, 116, 0.9)`,
+      'border-bottom': `2px solid var(--md-primary-color)`,
+      'margin': `2em auto 1em`,
       'color': `var(--el-text-color-regular)`,
+      'font-size': `1.2em`,
+      'font-weight': `bold`,
+      'text-align': `center`,
     },
 
     // 二级标题样式
     h2: {
-      'font-size': `1.2em`,
-      'text-align': `center`,
-      'font-weight': `bold`,
       'display': `table`,
-      'margin': `4em auto 2em`,
       'padding': `0 0.2em`,
-      'background': `rgba(0, 152, 116, 0.9)`,
+      'margin': `4em auto 2em`,
       'color': `#fff`,
+      'background': `var(--md-primary-color)`,
+      'font-size': `1.2em`,
+      'font-weight': `bold`,
+      'text-align': `center`,
     },
 
     // 三级标题样式
     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, 152, 116, 0.9)`,
+      'border-left': `3px solid var(--md-primary-color)`,
+      'margin': `2em 8px 0.75em 0`,
       'color': `var(--el-text-color-regular)`,
+      'font-size': `1.1em`,
+      'font-weight': `bold`,
+      'line-height': `1.2`,
     },
 
     // 四级标题样式
     h4: {
-      'font-weight': `bold`,
-      'font-size': `1em`,
       'margin': `2em 8px 0.5em`,
-      'color': `rgba(66, 185, 131, 0.9)`,
+      'color': `var(--md-primary-color)`,
+      'font-size': `1em`,
+      'font-weight': `bold`,
     },
 
     // 段落样式
@@ -100,10 +100,10 @@ const defaultTheme = {
     },
 
     blockquote_p: {
+      'display': `block`,
+      'font-size': `1em`,
       'letter-spacing': `0.1em`,
       'color': `rgb(80, 80, 80)`,
-      'font-size': `1em`,
-      'display': `block`,
     },
     code_pre: {
       'font-size': `14px`,
@@ -120,22 +120,22 @@ const defaultTheme = {
     },
 
     image: {
-      'border-radius': `4px`,
       'display': `block`,
-      'margin': `0.1em auto 0.5em`,
       'width': `100% !important`,
+      'margin': `0.1em auto 0.5em`,
+      'border-radius': `4px`,
     },
 
     ol: {
-      'margin-left': `0`,
       'padding-left': `1em`,
+      'margin-left': `0`,
       'color': `var(--el-text-color-regular)`,
     },
 
     ul: {
-      'margin-left': `0`,
-      'padding-left': `1em`,
       'list-style': `circle`,
+      'padding-left': `1em`,
+      'margin-left': `0`,
       'color': `var(--el-text-color-regular)`,
     },
 
@@ -149,6 +149,7 @@ const defaultTheme = {
       margin: `1.5em 8px`,
       color: `var(--el-text-color-regular)`,
     },
+
     hr: {
       'border-style': `solid`,
       'border-width': `1px 0 0`,
@@ -187,7 +188,7 @@ const defaultTheme = {
 
     // 字体加粗样式
     strong: {
-      'color': `rgba(15, 76, 129, 0.9)`,
+      'color': `var(--md-primary-color)`,
       'font-weight': `bold`,
     },
 
@@ -225,176 +226,116 @@ const defaultTheme = {
 
 const graceTheme = mergeTheme(defaultTheme, {
   BASE: {
-    'text-align': `left`,
-    'line-height': `1.75`,
   },
   block: {
     h1: {
-      'font-size': `1.4em`,
-      'text-align': `center`,
-      'font-weight': `bold`,
-      'display': `table`,
-      'margin': `2em auto 1em`,
       'padding': `0.5em 1em`,
-      'border-bottom': `2px solid ${baseBorderColor}`,
+      'border-bottom': `2px solid var(--md-primary-color)`,
-      'color': `var(--el-text-color-regular)`,
+      'font-size': `1.4em`,
       'text-shadow': `2px 2px 4px rgba(0,0,0,0.1)`,
     },
 
     h2: {
-      'font-size': `1.3em`,
-      'text-align': `center`,
-      'font-weight': `bold`,
-      'display': `table`,
-      'margin': `4em auto 2em`,
       'padding': `0.3em 1em`,
-      'background': `${baseBorderColor}`,
-      'color': `#fff`,
       'border-radius': `8px`,
+      'font-size': `1.3em`,
       'box-shadow': `0 4px 6px rgba(0,0,0,0.1)`,
     },
 
     h3: {
-      'font-weight': `bold`,
-      'font-size': `1.2em`,
-      'margin': `2em 8px 0.75em 0`,
-      'line-height': `1.2`,
       'padding-left': `12px`,
-      'border-left': `4px solid ${baseBorderColor}`,
+      'font-size': `1.2em`,
-      'border-bottom': `1px solid ${baseBorderColor}`,
+      'border-left': `4px solid var(--md-primary-color)`,
-      'color': `var(--el-text-color-regular)`,
+      'border-bottom': `1px dashed var(--md-primary-color)`,
     },
 
     h4: {
-      'font-weight': `bold`,
       'font-size': `1.1em`,
-      'margin': `2em 8px 0.5em`,
-      'color': `rgba(66, 185, 131, 0.9)`,
     },
 
     p: {
-      'margin': `1.5em 8px`,
-      'letter-spacing': `0.1em`,
-      'color': `var(--el-text-color-regular)`,
-      'text-align': `justify`,
     },
 
     blockquote: {
       'font-style': `italic`,
-      'border-left': `4px solid ${baseBorderColor}`,
       'padding': `1em 1em 1em 2em`,
+      'border-left': `4px solid var(--md-primary-color)`,
       'border-radius': `6px`,
       'color': `rgba(0,0,0,0.6)`,
       'background': `linear-gradient(to right, #f7f7f7, #ffffff)`,
-      'margin': `2em 8px`,
       'box-shadow': `0 4px 6px rgba(0,0,0,0.05)`,
     },
 
     blockquote_p: {
-      'letter-spacing': `0.1em`,
-      'color': `rgb(80, 80, 80)`,
-      'font-size': `1em`,
-      'display': `block`,
     },
 
     code_pre: {
-      'font-size': `14px`,
-      'overflow-x': `auto`,
-      'border-radius': `8px`,
-      'padding': `1em`,
-      'line-height': `1.5`,
-      'margin': `10px 8px`,
       'box-shadow': `inset 0 0 10px rgba(0,0,0,0.05)`,
     },
 
     code: {
-      'margin': 0,
       'white-space': `pre-wrap`,
       'font-family': `'Fira Code', Menlo, Operator Mono, Consolas, Monaco, monospace`,
     },
 
     image: {
       'border-radius': `8px`,
-      'display': `block`,
-      'margin': `0.1em auto 0.5em`,
-      'width': `100% !important`,
       'box-shadow': `0 4px 8px rgba(0,0,0,0.1)`,
     },
 
     ol: {
-      'margin-left': `0`,
       'padding-left': `1.5em`,
-      'color': `var(--el-text-color-regular)`,
     },
 
     ul: {
-      'margin-left': `0`,
-      'padding-left': `1.5em`,
       'list-style': `none`,
-      'color': `var(--el-text-color-regular)`,
+      'padding-left': `1.5em`,
     },
 
     hr: {
-      border: `none`,
       height: `1px`,
-      background: `linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0))`,
+      border: `none`,
       margin: `2em 0`,
+      background: `linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0))`,
     },
   },
   inline: {
     listitem: {
-      'text-indent': `-1em`,
+      margin: `0.5em 8px`,
-      'display': `block`,
-      'margin': `0.5em 8px`,
-      'color': `var(--el-text-color-regular)`,
     },
 
     codespan: {
-      'font-size': `90%`,
-      'color': `#d14`,
-      'background': `rgba(27,31,35,.05)`,
-      'padding': `3px 5px`,
-      'border-radius': `4px`,
     },
 
     link: {
-      color: `#576b95`,
     },
 
     wx_link: {
     },
 
     strong: {
-      'color': `rgba(15, 76, 129, 0.9)`,
-      'font-weight': `bold`,
     },
 
     table: {
       'border-collapse': `separate`,
       'border-spacing': `0`,
-      'text-align': `center`,
+      'border-radius': `8px`,
       'margin': `1em 8px`,
       'color': `var(--el-text-color-regular)`,
       'box-shadow': `0 4px 6px rgba(0,0,0,0.1)`,
-      'border-radius': `8px`,
       'overflow': `hidden`,
     },
 
     thead: {
-      'background': `rgba(0, 0, 0, 0.05)`,
+      color: `#fff`,
-      'color': `#fff`,
-      'font-weight': `bold`,
     },
 
     td: {
-      border: `1px solid #dfdfdf`,
       padding: `0.5em 1em`,
-      color: baseColor,
     },
 
     footnote: {
-      'font-size': `12px`,
+      color: `rgba(0,0,0,0.5)`,
-      'color': `rgba(0,0,0,0.5)`,
     },
   },
 })

src/utils/index.js

@@ -9,27 +9,11 @@ export function addPrefix(str) {
   return `${prefix}__${str}`
 }
 
-function createCustomTheme(theme, color, isDefault = true) {
-  const customTheme = JSON.parse(JSON.stringify(theme))
-  customTheme.block.h1[`border-bottom`] = `2px solid ${color}`
-  customTheme.block.h2.background = color
-  customTheme.block.h3[`border-left`] = `3px solid ${color}`
-  customTheme.block.h4.color = color
-  customTheme.inline.strong.color = color
-
-  if (!isDefault) {
-    customTheme.block.h3[`border-bottom`] = `1px dashed ${color}`
-    customTheme.block.blockquote[`border-left`] = `4px solid ${color}`
-  }
-
-  return customTheme
-}
-
 // 设置自定义颜色
-export function setColorWithTemplate(theme) {
+function createCustomTheme(theme, color) {
-  return (color) => {
+  const customTheme = JSON.parse(JSON.stringify(theme))
-    return createCustomTheme(theme, color)
+  customTheme.BASE[`--md-primary-color`] = color
-  }
+  return customTheme
 }
 
 export function setColorWithCustomTemplate(theme, color, isDefault = true) {
@@ -38,21 +22,12 @@ export function setColorWithCustomTemplate(theme, color, isDefault = true) {
 
 // 设置自定义字体大小
 export function setFontSizeWithTemplate(template) {
-  return function (fontSize, isDefault = true) {
+  return function (fontSize) {
     const customTheme = JSON.parse(JSON.stringify(template))
-    if (isDefault) {
+    for (let i = 1; i <= 4; i++) {
-      customTheme.block.h1[`font-size`] = `${fontSize * 1.2}px`
+      const v = customTheme.block[`h${i}`][`font-size`]
-      customTheme.block.h2[`font-size`] = `${fontSize * 1.2}px`
+      customTheme.block[`h${i}`][`font-size`] = `${fontSize * Number.parseFloat(v)}px`
-      customTheme.block.h3[`font-size`] = `${fontSize * 1.1}px`
-      customTheme.block.h4[`font-size`] = `${fontSize}px`
     }
-    else {
-      customTheme.block.h1[`font-size`] = `${fontSize * 1.4}px`
-      customTheme.block.h2[`font-size`] = `${fontSize * 1.3}px`
-      customTheme.block.h3[`font-size`] = `${fontSize * 1.2}px`
-      customTheme.block.h4[`font-size`] = `${fontSize * 1.1}px`
-    }
-
     return customTheme
   }
 }