From e1f617f582d9f4310e0bbb8ca995712d5030e345 Mon Sep 17 00:00:00 2001
From: xaoxuu <git@xaoxuu.com>
Date: Sat, 10 Dec 2022 15:49:59 +0800
Subject: [PATCH] [opt] color

---
 _config.yml                                | 18 +----
 scripts/tags/border.js                     | 10 ++-
 scripts/tags/note.js                       | 10 ++-
 source/css/_common/blockquote.styl         |  2 +-
 source/css/_custom.styl                    | 24 ++-----
 source/css/_defines/theme.styl             | 60 ++++++++++-------
 source/css/_layout/md.styl                 |  6 +-
 source/css/_layout/partial/paginator.styl  |  3 +-
 source/css/_layout/tag-plugins/common.styl | 77 +++++++---------------
 source/css/_layout/widgets/toc_common.styl |  2 +-
 source/css/_plugins/comments/twikoo.styl   |  1 -
 11 files changed, 81 insertions(+), 132 deletions(-)

diff --git a/_config.yml b/_config.yml
index 1d31f81..a3f86e0 100755
--- a/_config.yml
+++ b/_config.yml
@@ -346,23 +346,11 @@ style:
       button: 'hsl(192 98% 55%)' # 按钮颜色
       hover: 'hsl(14 100% 57%)' # 按钮高亮颜色
     # 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
-    dynamic: 
+    dynamic:
+      background: 'hsl(212 16% 98%)' # 浅色背景颜色
       block: 'hsl(212 8% 95%)' # 块背景颜色
-    light:
-      background: hsl(212 16% 98%) # 浅色背景颜色
-      block: 'hsl(212 8% 95%)' # 块背景颜色
-      card: 'white' # 卡片背景颜色
-      title: 'black' # 标题文本颜色
-      text: 'hsl(0 0% 20%)' # 正文文本颜色
       code: 'hsl(14 100% 48%)' # 行内代码颜色
-    dark:
-      background: 'hsl(212 6% 16%)' # 深色背景颜色
-      background-mobile: black # 移动端深色背景（OLED调成纯黑可以省电）
-      block: 'hsl(212 8% 20%)' # 块背景颜色
-      card: 'hsl(212 10% 22%)' # 卡片背景颜色
-      title: 'white' # 标题文本颜色
-      text: 'hsl(0 0% 93%)' # 正文文本颜色
-      code: 'hsl(14 100% 63%)' # 行内代码颜色
+      text: 'hsl(0 0% 20%)' # 文本颜色
   animated_avatar:
     animate: auto # auto, always
     background: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp
diff --git a/scripts/tags/border.js b/scripts/tags/border.js
index 2705bb9..4e6d44e 100644
--- a/scripts/tags/border.js
+++ b/scripts/tags/border.js
@@ -11,13 +11,11 @@
 
 hexo.extend.tag.register('border', function(args, content) {
   args = hexo.args.map(args, ['color', 'child'], ['title']);
-  const color = args.color;
-  const title = args.title;
-  var el = '';
-  const defaultColor = hexo.theme.config.tag_plugins.note.default_color;
-  if (!color && defaultColor) {
-    color = defaultColor;
+  const { title } = args;
+  if (args.color == null) {
+    args.color = hexo.theme.config.tag_plugins.note.default_color
   }
+  var el = '';
   // header
   el += '<div class="tag-plugin note"';
   el += ' ' + hexo.args.joinTags(args, ['color', 'child']).join(' ');
diff --git a/scripts/tags/note.js b/scripts/tags/note.js
index a649801..04e2053 100644
--- a/scripts/tags/note.js
+++ b/scripts/tags/note.js
@@ -13,13 +13,11 @@ hexo.extend.tag.register('note', function(args) {
     args.content = args.title;
     args.title = '';
   }
-  const color = args.color;
-  const title = args.title;
-  var el = '';
-  const defaultColor = hexo.theme.config.tag_plugins.note.default_color;
-  if (!color && defaultColor) {
-    color = defaultColor;
+  const { title } = args;
+  if (args.color == null) {
+    args.color = hexo.theme.config.tag_plugins.note.default_color
   }
+  var el = '';
   // header
   el += '<div class="tag-plugin note"';
   el += ' ' + hexo.args.joinTags(args, ['color', 'child']).join(' ');
diff --git a/source/css/_common/blockquote.styl b/source/css/_common/blockquote.styl
index 81f2837..3f97bd8 100644
--- a/source/css/_common/blockquote.styl
+++ b/source/css/_common/blockquote.styl
@@ -5,6 +5,6 @@ blockquote
   padding: 0.5rem 0.75rem
   background: var(--block)
   $bd-left = 4px
-  border-left: $bd-left solid var(--text-meta)
+  border-left: $bd-left solid hsl($dynamic-block-h, $dynamic-block-s, $dynamic-block-l * 0.8)
   border-radius: $bd-left $border-block $border-block $bd-left
   color: var(--text-p2)
\ No newline at end of file
diff --git a/source/css/_custom.styl b/source/css/_custom.styl
index a3c8ea4..ad7e762 100644
--- a/source/css/_custom.styl
+++ b/source/css/_custom.styl
@@ -7,27 +7,11 @@ $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-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-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-background-mobile = convert(hexo-config('style.color.dark.background-mobile'))
-
-
+// 动态颜色
+$dynamic-background = convert(hexo-config('style.color.dynamic.background'))
 $dynamic-block = convert(hexo-config('style.color.dynamic.block'))
+$dynamic-code = convert(hexo-config('style.color.dynamic.code'))
+$dynamic-text = convert(hexo-config('style.color.dynamic.text'))
 
 // @font-face
 //   font-family: 'Dosis'
diff --git a/source/css/_defines/theme.styl b/source/css/_defines/theme.styl
index a24f428..d2e65eb 100644
--- a/source/css/_defines/theme.styl
+++ b/source/css/_defines/theme.styl
@@ -1,49 +1,59 @@
+$dynamic-background-h = hue($dynamic-background)
+$dynamic-background-s = saturation($dynamic-background)
+$dynamic-background-l = lightness($dynamic-background)
+
 $dynamic-block-h = hue($dynamic-block)
 $dynamic-block-s = saturation($dynamic-block)
 $dynamic-block-l = lightness($dynamic-block)
 
-set_text_light()
-  --text-p0: $dark-title
-  --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
+$dynamic-code-h = hue($dynamic-code)
+$dynamic-code-s = saturation($dynamic-code)
+$dynamic-code-l = lightness($dynamic-code)
+
+$dynamic-text-h = hue($dynamic-text)
+$dynamic-text-s = saturation($dynamic-text)
+$dynamic-text-l = lightness($dynamic-text)
+
 set_text_dark()
-  --text-p0: $light-title
-  --text-p1: $light-text
-  --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
+  --text-p0: hsl($dynamic-text-h, $dynamic-text-s, 0)
+  --text-p1: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l)
+  --text-p2: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 0.75)
+  --text-p3: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 1.25)
+  --text-p4: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 1.5)
+  --text-meta: hsl($dynamic-text-h, $dynamic-text-s, $dynamic-text-l / 0.5 * 2)
+  --text-code: hsl($dynamic-code-h, $dynamic-code-s, $dynamic-code-l * 1)
+
+set_text_light()
+  --text-p0: hsl($dynamic-text-h, $dynamic-text-s, 100)
+  --text-p1: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 0.25)
+  --text-p2: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 0.5)
+  --text-p3: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1)
+  --text-p4: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1.25)
+  --text-meta: hsl($dynamic-text-h, $dynamic-text-s, 100 - $dynamic-text-l / 0.5 * 1.5)
+  --text-code: hsl($dynamic-code-h, $dynamic-code-s, 48)
+
 :root
-  --site-bg: $light-background
-  --card: $light-card
+  --site-bg: hsl($dynamic-background-h, $dynamic-background-s, 98)
+  --card: hsl($dynamic-block-h, $dynamic-block-s, 100)
   --block: hsl($dynamic-block-h, $dynamic-block-s, 95)
   --block-border: hsl($dynamic-block-h, $dynamic-block-s, 90)
   --block-hover: hsl($dynamic-block-h, $dynamic-block-s, 92)
   --block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 100)
   set_text_dark()
-  --theme-highlight: darken($color-theme, 5)
-  --theme-bg: mix($color-theme, $light-card, 10)
+  --theme-bg: $color-theme
   --theme-link: $color-link
 
 set_darkmode()
   :root
-    --site-bg: $dark-background
-    --card: $dark-card
+    --site-bg: hsl($dynamic-background-h, $dynamic-background-s / 2, 16)
+    --card: hsl($dynamic-block-h, $dynamic-block-s * 1.5, 25)
     --block: hsl($dynamic-block-h, $dynamic-block-s, 12)
     --block-border: hsl($dynamic-block-h, $dynamic-block-s, 24)
     --block-hover: hsl($dynamic-block-h, $dynamic-block-s, 9)
     --block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 30)
     set_text_light()
-    --theme-highlight: $color-theme
-    --theme-bg: mix($color-theme, $dark-card, 10)
     @media screen and (max-width: $device-mobile-max)
-      --site-bg: $dark-background-mobile
-      --card: darken($dark-card, 6)
+      --site-bg: black
 
 if hexo-config('style.darkmode') == 'auto'
   // 系统的dark模式
diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl
index 6b2e0db..a428000 100644
--- a/source/css/_layout/md.styl
+++ b/source/css/_layout/md.styl
@@ -129,7 +129,7 @@ h1.article-title
       padding: 2px 0
       text-decoration: none
       line-height: 1.2
-      &:after
+      &:before
         content: ''
         position: absolute
         border-radius: 2px
@@ -143,9 +143,11 @@ h1.article-title
       &:hover
         border-bottom: none
         color: var(--theme-link)
-        &:after
+        z-index 0
+        &:before
           height: 100%
           opacity: 0.2
+          z-index -1
           bottom: 0
           left: -2px
           right: -2px
diff --git a/source/css/_layout/partial/paginator.styl b/source/css/_layout/partial/paginator.styl
index a0808ba..845d745 100644
--- a/source/css/_layout/partial/paginator.styl
+++ b/source/css/_layout/partial/paginator.styl
@@ -9,10 +9,11 @@
   border-radius: $border-card
   overflow: hidden
   box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.03)
-  .page-number 
+  .page-number
     padding: 4px 8px
     border-radius: 8px
     background: var(--block)
+    margin: 2px
   .extend
     text-align: center
     background-size: contain
diff --git a/source/css/_layout/tag-plugins/common.styl b/source/css/_layout/tag-plugins/common.styl
index 761db3e..7fa0a84 100644
--- a/source/css/_layout/tag-plugins/common.styl
+++ b/source/css/_layout/tag-plugins/common.styl
@@ -4,18 +4,17 @@ set_text_white()
   --text-p2: #eee
   --text-p3: #ddd
   --text-code: white
-  --card: $dark-card
-  --block-border: lighten($dark-block, 6)
-  --block-hover: darken($dark-block, 4)
 set_text_black()
   --text-p0: black
   --text-p1: #111
   --text-p2: #333
   --text-p3: #555
   --text-code: white
-  --card: $light-card
-  --block-border: darken($light-block, 5)
-  --block-hover: darken($light-block, 2)
+
+set_dynamic_color($theme)
+  --theme: $theme
+  --theme-bg: hsl(hue($theme), 100, 95)
+  --theme-border: hsl(hue($theme), 90, 50)
 
 .tag-plugin
   --theme: var(--text-p1)
@@ -23,39 +22,19 @@ set_text_black()
   --theme-bg: var(--block)
 
 .tag-plugin[color='red']
-  --theme: $c-red
-  --theme-border: mix($c-red, white, 60)
-  --theme-bg: mix($c-red, white, 15)
-
+  set_dynamic_color($c-red)
 .tag-plugin[color='orange']
-  --theme: $c-orange
-  --theme-border: mix($c-orange, white, 60)
-  --theme-bg: mix($c-orange, white, 15)
-
+  set_dynamic_color($c-orange)
 .tag-plugin[color='yellow']
-  --theme: $c-yellow
-  --theme-border: mix($c-yellow, white, 60)
-  --theme-bg: mix($c-yellow, white, 20)
-
+  set_dynamic_color($c-yellow)
 .tag-plugin[color='green']
-  --theme: $c-green
-  --theme-border: mix($c-green, white, 60)
-  --theme-bg: mix($c-green, white, 15)
-
+  set_dynamic_color($c-green)
 .tag-plugin[color='cyan']
-  --theme: $c-cyan
-  --theme-border: mix($c-cyan, white, 60)
-  --theme-bg: mix($c-cyan, white, 15)
-
+  set_dynamic_color($c-cyan)
 .tag-plugin[color='blue']
-  --theme: $c-blue
-  --theme-border: mix($c-blue, white, 60)
-  --theme-bg: mix($c-blue, white, 15)
-
+  set_dynamic_color($c-blue)
 .tag-plugin[color='purple']
-  --theme: $c-purple
-  --theme-border: mix($c-purple, white, 60)
-  --theme-bg: mix($c-purple, white, 15)
+  set_dynamic_color($c-purple)
 
 .tag-plugin[color='light']
   --theme-bg: white
@@ -78,34 +57,24 @@ set_text_black()
   set_text_white()
 
 set_darkmode_tags()
+  set_dynamic_color($theme)
+    --theme: $theme
+    --theme-bg: hsl(hue($theme), 30, 20)
+    --theme-border: hsl(hue($theme), 90, 40)
   .tag-plugin[color='red']
-    --theme-border: mix($c-red, black, 70)
-    --theme-bg: mix($c-red, black, 35)
-
+    set_dynamic_color($c-red)
   .tag-plugin[color='orange']
-    --theme-border: mix($c-orange, black, 70)
-    --theme-bg: mix($c-orange, black, 35)
-
+    set_dynamic_color($c-orange)
   .tag-plugin[color='yellow']
-    --theme-border: mix($c-yellow, black, 70)
-    --theme-bg: mix($c-yellow, black, 30)
-
+    set_dynamic_color($c-yellow)
   .tag-plugin[color='green']
-    --theme-border: mix($c-green, black, 70)
-    --theme-bg: mix($c-green, black, 30)
-
+    set_dynamic_color($c-green)
   .tag-plugin[color='cyan']
-    --theme-border: mix($c-cyan, black, 70)
-    --theme-bg: mix($c-cyan, black, 30)
-
+    set_dynamic_color($c-cyan)
   .tag-plugin[color='blue']
-    --theme-border: mix($c-blue, black, 70)
-    --theme-bg: mix($c-blue, black, 35)
-
+    set_dynamic_color($c-blue)
   .tag-plugin[color='purple']
-    --theme-border: mix($c-purple, black, 70)
-    --theme-bg: mix($c-purple, black, 40)
-
+    set_dynamic_color($c-purple)
   .tag-plugin[color='light']
     --theme-border: white
     --theme-bg: #fff
diff --git a/source/css/_layout/widgets/toc_common.styl b/source/css/_layout/widgets/toc_common.styl
index 5eab337..5e35eab 100644
--- a/source/css/_layout/widgets/toc_common.styl
+++ b/source/css/_layout/widgets/toc_common.styl
@@ -66,6 +66,6 @@
   &:hover
     background: var(--block-hover)
   &.active
-    color: var(--theme-highlight) !important
+    color: $color-theme !important
     &:before
       visibility: visible
diff --git a/source/css/_plugins/comments/twikoo.styl b/source/css/_plugins/comments/twikoo.styl
index 039d1e8..2f2b1ed 100644
--- a/source/css/_plugins/comments/twikoo.styl
+++ b/source/css/_plugins/comments/twikoo.styl
@@ -110,7 +110,6 @@ set_darkmode_comments()
   .cmt-body.twikoo
     --twikoo-lighttext: #f2b94b;
     --twikoo-secondtext: #a1a2b8;
-    --twikoo-emoji-background: darken($dark-block, 1);
     --twikoo-theme: #409eff;
 
 if hexo-config('style.darkmode') == 'auto'