diff --git a/_config.yml b/_config.yml index 7fa967e..efcba82 100755 --- a/_config.yml +++ b/_config.yml @@ -171,6 +171,9 @@ plugins: style: darkmode: auto # set 'auto' to enable, set 'false' to disable + theme: + light: '#f8f8f8' + dark: '#20252B' animated_avatar: animate: auto # auto, always background: https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs index cf1066f..98509ec 100755 --- a/layout/_partial/head.ejs +++ b/layout/_partial/head.ejs @@ -58,7 +58,7 @@ function og_args() { - + <%- generate_title() %> <% if (theme.open_graph && theme.open_graph.enable) { %> diff --git a/source/css/_common/highlight.styl b/source/css/_common/highlight.styl index 9af7a17..c5c20d7 100644 --- a/source/css/_common/highlight.styl +++ b/source/css/_common/highlight.styl @@ -49,12 +49,12 @@ article.md .highlight padding: 0 1em border-width: 0 margin-left: 0 - position: sticky + // position: sticky // 如果希望行标固定请打开此行;但是如果想在较窄屏幕上拥有较好的阅读体验,建议让行标跟随滚动。 left: 0 z-index: 1 background: var(--block) pre .line - color: var(--text-p2) + color: var(--text-p4) .code pre display: block @@ -136,7 +136,7 @@ article.md .highlight -$hl-keyword = #9c27b0 +$hl-keyword = #8959a8 $hl-blue = #1E80F0 $hl-cyan = #17AFCA $hl-green = #3FA33F @@ -168,13 +168,14 @@ pre // 注释 .comment - color: var(--text-p3) + color: var(--text-p4) + font-style: italic .keyword, .meta-keyword, .javascript .function color: $hl-keyword .type, .built_in, .tag .name - color: $color-md-light-blue + color: $color-md-blue .variable, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo color: $hl-amber @@ -214,14 +215,8 @@ pre .line .meta color: $hl-keyword - .meta-string,.string - color: $hl-orange .class color: $hl-text - .title - color: $hl-blue - .comment - color: $hl-green .highlight.json .line diff --git a/source/css/_custom.styl b/source/css/_custom.styl index 704c5ef..3b4db20 100644 --- a/source/css/_custom.styl +++ b/source/css/_custom.styl @@ -6,22 +6,23 @@ $color-link = #2196f3 $color-button = #1BCDFC $color-hover = #ff5722 $color-inner = #fff -$color-inlinecode = #ff7043 $color-cat = #FF7844 $color-cat-hover = darken($color-cat, 20) // 浅色 -$light-site-bg = #f8f8f8 +$light-site-bg = convert(hexo-config('style.theme.light')) $light-block = #f2f2f2 $light-title = #000 -$light-text = #222 +$light-text = #444 +$light-code = #111 $light-card = white // 深色 -$dark-site-bg = #20252B +$dark-site-bg = convert(hexo-config('style.theme.dark')) $dark-block = #2E353D $dark-title = #fff -$dark-text = #eee +$dark-text = #ddd +$dark-code = #ff7043 $dark-card = #40454B // 移动端深色背景(OLED调成纯黑可以省电) diff --git a/source/css/_defines/theme.styl b/source/css/_defines/theme.styl index 24b4fea..cb55d51 100644 --- a/source/css/_defines/theme.styl +++ b/source/css/_defines/theme.styl @@ -7,7 +7,9 @@ --text-p1: $light-text --text-p2: mix($light-text, $light-site-bg, 80) --text-p3: mix($light-text, $light-site-bg, 60) + --text-p4: mix($light-text, $light-site-bg, 35) --text-meta: mix($light-text, $light-site-bg, 20) + --text-code: $light-code --card: $light-card --theme-highlight: darken($color-theme, 5) --theme-bg: mix($color-theme, $light-card, 10) @@ -24,7 +26,9 @@ if hexo-config('style.darkmode') == 'auto' --text-p1: $dark-text --text-p2: mix($dark-text, $dark-site-bg, 70) --text-p3: mix($dark-text, $dark-site-bg, 45) + --text-p4: mix($dark-text, $dark-site-bg, 35) --text-meta: mix($dark-text, $dark-site-bg, 30) + --text-code: $dark-code --card: $dark-card --theme-highlight: $color-theme --theme-bg: mix($color-theme, $dark-card, 10) diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl index d2f0fc8..48b5846 100644 --- a/source/css/_layout/md.styl +++ b/source/css/_layout/md.styl @@ -68,14 +68,16 @@ article.md p // code article.md code - color: $color-inlinecode + -webkit-font-smoothing: auto + -moz-osx-font-smoothing: auto + color: var(--text-code) font-family: $ff-code word-break: break-all - font-size: inherit + font-size: 85% background: var(--block) - padding: 2px + padding: .2em .4em border-radius: 2px - border: 1px solid var(--block-border) + // border: 1px solid var(--block-border) // div article.md>div