Skip to content

Commit

Permalink
chore: optimize custom theme creation (#364)
Browse files Browse the repository at this point in the history
  • Loading branch information
@YangFong
YangFong committed Aug 29, 2024
1 parent f263fa5 commit 1df41df
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 136 deletions.
11 changes: 8 additions & 3 deletions src/assets/example/theme-css.txt
View file
Original file line number Diff line number Diff line change
@@ -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 {
}
Expand Down
143 changes: 42 additions & 101 deletions src/config/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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`,
},

// 段落样式
Expand All @@ -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`,
Expand All @@ -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)`,
},

Expand All @@ -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`,
Expand Down Expand Up @@ -187,7 +188,7 @@ const defaultTheme = {

// 字体加粗样式
strong: {
'color': `rgba(15, 76, 129, 0.9)`,
'color': `var(--md-primary-color)`,
'font-weight': `bold`,
},

Expand Down Expand Up @@ -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)`,
},
},
})
Expand Down
Loading

0 comments on commit 1df41df

Please sign in to comment.