custom style

_config.yml

@@ -370,16 +370,28 @@ style:
     logo: system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
     body: system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
     code: Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
-  theme:
-    main: '#1BCDFC'
-    link: '#2196f3'
-    button: '#1BCDFC'
-    hover: '#ff5722'
-    highlight: '#ff5722'
-    inner: '#fff'
-    cat: '#FF7844'
-    light: '#f8f8f8' #浅色背景颜色
-    dark: '#313438' #深色背景颜色
+  color:
+    common:
+      theme: '#1BCDFC' # 主题色
+      accent: '#ff5722' # 强调色
+      link: '#2196f3' # 超链接颜色
+      button: '#1BCDFC' # 按钮颜色
+      hover: '#ff5722' # 按钮高亮颜色
+    light:
+      background: '#f8f8f8' # 浅色背景颜色
+      block: '#f2f2f2' # 块背景颜色
+      card: white # 卡片背景颜色
+      title: '#000' # 标题文本颜色
+      text: '#333' # 正文文本颜色
+      code: '#111' # 行内代码颜色
+    dark:
+      background: '#313438' # 深色背景颜色
+      background-mobile: black # 移动端深色背景（OLED调成纯黑可以省电）
+      block: '#2B2F33' # 块背景颜色
+      card: '#464D57' # 卡片背景颜色
+      title: '#fff' # 标题文本颜色
+      text: '#eee' # 正文文本颜色
+      code: '#ff7043' # 行内代码颜色
   animated_avatar:
     animate: auto # auto, always
     background: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp

source/css/_custom.styl

@@ -1,33 +1,30 @@
 @require('_defines/const')
 
 // 通用主题色
-$color-theme = convert(hexo-config('style.theme.main'))
-$color-link = convert(hexo-config('style.theme.link'))
-$color-button = convert(hexo-config('style.theme.button'))
-$color-hover = convert(hexo-config('style.theme.hover'))
-$color-highlight = convert(hexo-config('style.theme.highlight'))
-$color-inner = convert(hexo-config('style.theme.inner'))
-$color-cat = convert(hexo-config('style.theme.cat'))
-$color-cat-hover = darken($color-cat, 20)
+$color-theme = convert(hexo-config('style.color.common.theme'))
+$color-accent = convert(hexo-config('style.color.common.accent'))
+$color-link = convert(hexo-config('style.color.common.link'))
+$color-button = convert(hexo-config('style.color.common.button'))
+$color-hover = convert(hexo-config('style.color.common.hover'))
 
 // 浅色
-$light-site-bg = convert(hexo-config('style.theme.light'))
-$light-block = #f2f2f2
-$light-title = #000
-$light-text = #333
-$light-code = #111
-$light-card = white
+$light-background = convert(hexo-config('style.color.light.background'))
+$light-block = convert(hexo-config('style.color.light.block'))
+$light-card = convert(hexo-config('style.color.light.card'))
+$light-title = convert(hexo-config('style.color.light.title'))
+$light-text = convert(hexo-config('style.color.light.text'))
+$light-code = convert(hexo-config('style.color.light.code'))
 
 // 深色
-$dark-site-bg = convert(hexo-config('style.theme.dark'))
-$dark-block = darken(saturate($dark-site-bg, 40%), 2)
-$dark-title = #fff
-$dark-text = #eee
-$dark-code = #ff7043
-$dark-card = lighten(saturate($dark-site-bg, 50%), 10)
+$dark-background = convert(hexo-config('style.color.dark.background'))
+$dark-block = convert(hexo-config('style.color.dark.block'))
+$dark-card = convert(hexo-config('style.color.dark.card'))
+$dark-title = convert(hexo-config('style.color.dark.title'))
+$dark-text = convert(hexo-config('style.color.dark.text'))
+$dark-code = convert(hexo-config('style.color.dark.code'))
 
 // 移动端深色背景（OLED调成纯黑可以省电）
-$dark-site-bg-mobile = black
+$dark-background-mobile = convert(hexo-config('style.color.dark.background-mobile'))
 
 
 // @font-face

source/css/_defines/theme.styl

@@ -1,14 +1,14 @@
 :root
-  --site-bg: $light-site-bg
+  --site-bg: $light-background
   --block: $light-block
   --block-border: darken($light-block, 5)
   --block-hover: darken($light-block, 2)
   --text-p0: $light-title
   --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-p2: mix($light-text, $light-background, 80)
+  --text-p3: mix($light-text, $light-background, 60)
+  --text-p4: mix($light-text, $light-background, 35)
+  --text-meta: mix($light-text, $light-background, 20)
   --text-code: $light-code
   --card: $light-card
   --theme-highlight: darken($color-theme, 5)
@@ -16,22 +16,22 @@
 
 set_darkmode()
   :root
-    --site-bg: $dark-site-bg
+    --site-bg: $dark-background
     --block: $dark-block
     --block-border: lighten($dark-block, 6)
     --block-hover: darken($dark-block, 4)
     --text-p0: $dark-title
-    --text-p1: mix($dark-text, $dark-site-bg, 85)
-    --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-p1: mix($dark-text, $dark-background, 85)
+    --text-p2: mix($dark-text, $dark-background, 70)
+    --text-p3: mix($dark-text, $dark-background, 45)
+    --text-p4: mix($dark-text, $dark-background, 35)
+    --text-meta: mix($dark-text, $dark-background, 30)
     --text-code: $dark-code
     --card: $dark-card
     --theme-highlight: $color-theme
     --theme-bg: mix($color-theme, $dark-card, 10)
     @media screen and (max-width: $device-mobile-max)
-      --site-bg: $dark-site-bg-mobile
+      --site-bg: $dark-background-mobile
       --card: darken($dark-card, 6)
       --block: darken($dark-block, 4)
       --block-border: lighten($dark-block, 2)

source/css/_layout/md.styl

@@ -32,7 +32,7 @@ article.md.content
     >h2:not([class])
       align-self: center
       border-bottom-style: dashed
-      border-bottom-color: $color-highlight
+      border-bottom-color: $color-accent
   >:first-child
     margin-top: 0
   h1:not(:first-child)

source/css/_layout/tag-plugins/poetry.styl

@@ -47,4 +47,4 @@
       top: 6px
       bottom: 6px
       border-radius: 4px
-      background: $color-highlight
+      background: $color-accent

source/css/_layout/tag-plugins/quot.styl

@@ -41,13 +41,13 @@ article.md.content
   &:before
     top: 8px
     left: 0
-    border-top: 6px solid $color-highlight
-    border-left: 6px solid $color-highlight
+    border-top: 6px solid $color-accent
+    border-left: 6px solid $color-accent
   &:after
     right: 0
     bottom: 0
-    border-right: 6px solid $color-highlight
-    border-bottom: 6px solid $color-highlight
+    border-right: 6px solid $color-accent
+    border-bottom: 6px solid $color-accent
 article.md.content h1.quot[type=text]
   &:before,&:after
     width: 12px
@@ -59,7 +59,7 @@ article.md.content h1.quot[type=text]
   .icon
     height: 1.5em
     display: inline-block
-    color: $color-highlight
+    color: $color-accent
     border-radius: 0
     &.prefix
       margin-left: -0.5rem
@@ -71,7 +71,7 @@ article.md.content h1.quot[type=text]
 .md span.tag-plugin.quot
   font-weight: 500
   &:before,&:after
-    color: $color-highlight
+    color: $color-accent
     font-weight: 900
   &:before
     content: "「"