mirror of
https://github.com/doocs/md.git
synced 2024-10-30 15:57:50 +08:00
chore: optimize custom theme creation (#367)
This commit is contained in:
YangFong
GitHub
parent
5ed3c7d5df
commit
a744ecba68
@ -1,6 +1,11 @@
|
||||
/*
|
||||
按 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 {
|
||||
}
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -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}`,
|
||||
'color': `var(--el-text-color-regular)`,
|
||||
'border-bottom': `2px solid var(--md-primary-color)`,
|
||||
'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}`,
|
||||
'border-bottom': `1px solid ${baseBorderColor}`,
|
||||
'color': `var(--el-text-color-regular)`,
|
||||
'font-size': `1.2em`,
|
||||
'border-left': `4px solid var(--md-primary-color)`,
|
||||
'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`,
|
||||
'display': `block`,
|
||||
'margin': `0.5em 8px`,
|
||||
'color': `var(--el-text-color-regular)`,
|
||||
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: {
|
||||
},
|
||||
|
||||
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`,
|
||||
'font-weight': `bold`,
|
||||
color: `#fff`,
|
||||
},
|
||||
|
||||
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)`,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@ -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) {
|
||||
return (color) => {
|
||||
return createCustomTheme(theme, color)
|
||||
}
|
||||
function createCustomTheme(theme, color) {
|
||||
const customTheme = JSON.parse(JSON.stringify(theme))
|
||||
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) {
|
||||
customTheme.block.h1[`font-size`] = `${fontSize * 1.2}px`
|
||||
customTheme.block.h2[`font-size`] = `${fontSize * 1.2}px`
|
||||
customTheme.block.h3[`font-size`] = `${fontSize * 1.1}px`
|
||||
customTheme.block.h4[`font-size`] = `${fontSize}px`
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
const v = customTheme.block[`h${i}`][`font-size`]
|
||||
customTheme.block[`h${i}`][`font-size`] = `${fontSize * Number.parseFloat(v)}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
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user