From 20a93e4c01afb3a91d10c38777382443e2e20b9c Mon Sep 17 00:00:00 2001
From: xaoxuu <git@xaoxuu.com>
Date: Wed, 7 Feb 2024 16:21:19 +0800
Subject: [PATCH] [opt] style

---
 _config.yml                                   |  7 ++-
 .../plugins/comments/giscus/layout.ejs        |  7 ++-
 layout/_partial/widgets/recent.ejs            |  6 +-
 scripts/tags/lib/button.js                    |  2 +-
 source/css/_common/button.styl                | 10 +++-
 source/css/_common/device.styl                | 10 ++--
 source/css/_custom.styl                       |  7 ---
 source/css/_defines/func.styl                 | 18 ++++--
 source/css/_defines/theme.styl                | 58 ++++++++++---------
 source/css/_layout/md.styl                    |  8 ++-
 source/css/_layout/pages/archives.styl        |  5 +-
 .../css/_layout/partial/article-banner.styl   | 18 +++---
 .../css/_layout/partial/article-footer.styl   |  5 --
 source/css/_layout/sidebar/footer.styl        |  2 +
 source/css/_layout/tag-plugins/common.styl    | 13 +++--
 source/css/_layout/tag-plugins/image.styl     |  2 +-
 source/css/_layout/tag-plugins/quot.styl      |  2 +-
 source/css/_layout/tag-plugins/timeline.styl  |  8 ++-
 source/css/_layout/widgets/timeline.styl      |  2 +
 source/css/_layout/widgets/widgets.styl       |  5 ++
 source/css/_plugins/comments/twikoo.styl      | 12 ++--
 source/css/_plugins/comments/waline.styl      | 21 ++++---
 source/css/_plugins/mermaid.styl              | 11 ++--
 23 files changed, 137 insertions(+), 102 deletions(-)

diff --git a/_config.yml b/_config.yml
index 054c8b5..696ab39 100755
--- a/_config.yml
+++ b/_config.yml
@@ -321,6 +321,9 @@ tag_plugins:
   icon:
     # 留空时，图标和文字颜色相同
     default_color: accent # theme, accent, red, orange, yellow, green, cyan, blue, purple
+  # {% button 标题 链接 %}
+  button:
+    default_color: theme # theme, accent, red, orange, yellow, green, cyan, blue, purple
   # {% image %}
   image:
     fancybox: false # true, false
@@ -486,7 +489,7 @@ plugins:
     typingAnimate: true # 打字机动画 
 
 style:
-  darkmode: auto # auto / always / false
+  prefers_theme: auto # auto / light / dark
   smooth_scroll: false # true / false 开启时如果目录过长可能无法准确定位
   font-size:
     root: 16px # 改这个会影响全局所有文字的字号
@@ -516,7 +519,6 @@ style:
     theme: 'hsl(192 98% 55%)' # 主题色
     accent: 'hsl(14 100% 57%)' # 强调色
     link: 'hsl(207 90% 54%)' # 超链接颜色
-    button: 'hsl(192 98% 55%)' # 按钮颜色
     hover: 'hsl(14 100% 57%)' # 按钮高亮颜色
   animated_avatar:
     animate: auto # auto, always
@@ -529,7 +531,6 @@ style:
     error: 加载失败，请稍后重试。
   gradient: # https://webgradients.com/
     start: 'linear-gradient(to right, hsl(215, 95%, 64%), hsl(195, 95%, 60%), hsl(165, 95%, 56%), hsl(165, 95%, 56%), hsl(195 95% 60%), hsl(215, 95%, 64%))'
-    search: 'linear-gradient(to right, #04F3FF, #08FFC6, #DDF730, #FFBD19, #FF1FE0, #C418FF, #04F3FF)'
   leftbar:
     # 可以设置：纯色/渐变色/图片作为背景
     # background: var(--leftbar-bg)
diff --git a/layout/_partial/plugins/comments/giscus/layout.ejs b/layout/_partial/plugins/comments/giscus/layout.ejs
index d386fd3..05f8d40 100644
--- a/layout/_partial/plugins/comments/giscus/layout.ejs
+++ b/layout/_partial/plugins/comments/giscus/layout.ejs
@@ -2,9 +2,12 @@
 function layoutDiv() {
   var el = '';
   const cmt = page.cmt;
-  if (cmt && cmt.service && (cmt.service.length > 0)) {
+  if (cmt?.service?.length > 0) {
     const name = cmt.service;
-    const body = cmt[name];
+    var body = cmt[name];
+    if (theme.style.prefers_theme != 'auto' && body['data-theme'] == 'preferred_color_scheme') {
+      body['data-theme'] = theme.style.prefers_theme
+    }
     el += '<div id="' + name + '"';
     for (let key of Object.keys(body)) {
       if (body[key] !== null) {
diff --git a/layout/_partial/widgets/recent.ejs b/layout/_partial/widgets/recent.ejs
index fe3bf5e..ab7b0cf 100644
--- a/layout/_partial/widgets/recent.ejs
+++ b/layout/_partial/widgets/recent.ejs
@@ -30,8 +30,7 @@ function layoutDiv() {
   arr.length = item.limit
   arr.forEach(post => {
     if (!post) { return }
-    const isActive = post.path == page.path
-    el += `<a class="item title${post.path == page.path ? ' active' : ''}" href="${url_for(post.link || post.path)}">`
+    el += `<a class="item title" href="${url_for(post.link || post.path)}">`
     el += '<span class="title">'
     if (post.wiki) {
       const proj = theme.wiki.tree[post.wiki];
@@ -41,9 +40,6 @@ function layoutDiv() {
       }
     }
     el += post.title + '</span>';
-    if (isActive) {
-      el += icon('default:bookmark.active')
-    }
     el += '</a>';
     el += '';
   });
diff --git a/scripts/tags/lib/button.js b/scripts/tags/lib/button.js
index 70e8b3c..9b7cd7d 100644
--- a/scripts/tags/lib/button.js
+++ b/scripts/tags/lib/button.js
@@ -22,7 +22,7 @@ module.exports = ctx => function(args) {
     args.text = `${args.text} ${arr.join(' ')}`
   }
   if (args.color == null) {
-    args.color = 'theme'
+    args.color = ctx.theme.config.tag_plugins.button.default_color
   }
   var el = ''
   el += '<a class="tag-plugin colorful button"'
diff --git a/source/css/_common/button.styl b/source/css/_common/button.styl
index e0c47c5..924bbd4 100644
--- a/source/css/_common/button.styl
+++ b/source/css/_common/button.styl
@@ -27,7 +27,7 @@ a[onclick]:hover
 
 a.button.start.gradient
   position relative
-  @media (prefers-color-scheme: dark)
+  ondark()
     transition: 0.38s ease-out
     z-index: 0
     background: convert(hexo-config('style.gradient.start'))
@@ -58,4 +58,10 @@ a.button.start.gradient
       transition: 0.38s ease-out
     &:hover:after
       filter: blur(36px)
-      opacity 1
\ No newline at end of file
+      opacity 1
+  
+  if theme(dark)
+    ondark()
+  else if theme(auto)
+    @media (prefers-color-scheme: dark)
+      ondark()
diff --git a/source/css/_common/device.styl b/source/css/_common/device.styl
index e5fb2f0..80e1f67 100644
--- a/source/css/_common/device.styl
+++ b/source/css/_common/device.styl
@@ -25,11 +25,13 @@
   --blur-px: 16px
   --blur-bg: alpha(#fff, .4)
   trans1: all
-  if hexo-config('style.darkmode') == 'auto'
-    @media (prefers-color-scheme: dark)
-      --blur-bg: alpha(#000, .4)
-  if hexo-config('style.darkmode') == 'always'
+  ondark()
     --blur-bg: alpha(#000, .4)
+  if theme(dark)
+    ondark()
+  else if theme(auto)
+    @media (prefers-color-scheme: dark)
+      ondark()
 
 // 侧边栏弹出按钮
 .float-panel button
diff --git a/source/css/_custom.styl b/source/css/_custom.styl
index f1676cf..4187ff1 100644
--- a/source/css/_custom.styl
+++ b/source/css/_custom.styl
@@ -4,7 +4,6 @@
 $color-theme = convert(hexo-config('style.color.theme'))
 $color-accent = convert(hexo-config('style.color.accent'))
 $color-link = convert(hexo-config('style.color.link'))
-$color-button = convert(hexo-config('style.color.button'))
 $color-hover = convert(hexo-config('style.color.hover'))
 
 // 动态颜色
@@ -13,12 +12,6 @@ $color-block = convert(hexo-config('style.color.block'))
 $color-code = convert(hexo-config('style.color.code'))
 $color-text = convert(hexo-config('style.color.text'))
 
-// @font-face
-//   font-family: 'Dosis'
-//   src: url('https://gcore.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf')
-//   font-weight: normal
-//   font-style: normal
-
 $ff-body = system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
 $ff-codeblock = Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
 $ff-code = $ff-codeblock
diff --git a/source/css/_defines/func.styl b/source/css/_defines/func.styl
index 6631912..647f310 100644
--- a/source/css/_defines/func.styl
+++ b/source/css/_defines/func.styl
@@ -106,10 +106,20 @@ floatable-float()
 
 hoverable-card()
   trans1 all
-  @media (prefers-color-scheme: dark)
-    &:hover
-      box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
-  @media (prefers-color-scheme: light)
+  onlight()
     box-shadow: $boxshadow-card
     &:hover
       floatable-float()
+  ondark()
+    &:hover
+      box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
+  if theme(light)
+    onlight()
+  else if theme(dark)
+    ondark()
+  else
+    @media (prefers-color-scheme: light)
+      onlight()
+    @media (prefers-color-scheme: dark)
+      ondark()
+  
\ No newline at end of file
diff --git a/source/css/_defines/theme.styl b/source/css/_defines/theme.styl
index a6794eb..5916046 100644
--- a/source/css/_defines/theme.styl
+++ b/source/css/_defines/theme.styl
@@ -1,3 +1,6 @@
+theme($t)
+  convert(hexo-config('style.prefers_theme')) == $t
+
 $color-background-h = hue($color-background)
 $color-background-s = saturation($color-background)
 $color-background-l = lightness($color-background)
@@ -14,7 +17,7 @@ $color-text-h = hue($color-text)
 $color-text-s = saturation($color-text)
 $color-text-l = lightness($color-text)
 
-set_text_dark()
+_dark_text()
   --text: hsl($color-text-h, $color-text-s, 0)
   --text-p1: hsl($color-text-h, $color-text-s, $color-text-l)
   --text-p2: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 0.75)
@@ -23,7 +26,7 @@ set_text_dark()
   --text-meta: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 2)
   --text-code: hsl($color-code-h, $color-code-s, $color-code-l)
 
-set_text_light()
+_light_text()
   --text: hsl($color-text-h, $color-text-s, 100)
   --text-p1: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.5)
   --text-p2: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 0.75)
@@ -32,23 +35,24 @@ set_text_light()
   --text-meta: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.75)
   --text-code: hsl($color-code-h, $color-code-s, (100 - $color-code-l) * 1.2)
 
-:root
-  --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
-  --card: hsl($color-block-h, $color-block-s, 100)
-  --alpha20: rgba(white, 0.2)
-  --alpha50: rgba(white, 0.5)
-  --alpha60: rgba(white, 0.6)
-  --alpha75: rgba(white, 0.75)
-  --alpha100: white
-  --leftbar-bg: hsl($color-block-h, $color-block-s, 90)
-  --block: hsl($color-block-h, $color-block-s, 95)
-  --block-border: hsl($color-block-h, $color-block-s, 90)
-  --block-hover: hsl($color-block-h, $color-block-s, 92)
-  set_text_dark()
-  --theme-link: $color-link
-  --theme-link-opa: rgba($color-link, 0.2)
+_light_root()
+  :root
+    --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
+    --card: hsl($color-block-h, $color-block-s, 100)
+    --alpha20: rgba(white, 0.2)
+    --alpha50: rgba(white, 0.5)
+    --alpha60: rgba(white, 0.6)
+    --alpha75: rgba(white, 0.75)
+    --alpha100: white
+    --leftbar-bg: hsl($color-block-h, $color-block-s, 90)
+    --block: hsl($color-block-h, $color-block-s, 95)
+    --block-border: hsl($color-block-h, $color-block-s, 90)
+    --block-hover: hsl($color-block-h, $color-block-s, 92)
+    _dark_text()
+    --theme-link: $color-link
+    --theme-link-opa: rgba($color-link, 0.2)
 
-set_darkmode()
+_dark_root()
   :root
     --site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
     --card: hsl($color-block-h, $color-block-s * 1.2, 24)
@@ -61,15 +65,17 @@ set_darkmode()
     --alpha75: rgba(black, 0.75)
     --alpha100: black
     --leftbar-bg: hsl($color-block-h, $color-block-s, 24)
-    set_text_light()
+    _light_text()
     @media screen and (max-width: $device-mobile-max)
       --site-bg: black
 
-if hexo-config('style.darkmode') == 'auto'
-  // 系统的dark模式
+// 默认自动模式
+if theme(light)
+  _light_root()
+else if theme(dark)
+  _dark_root()
+else
+  @media (prefers-color-scheme: light)
+    _light_root()
   @media (prefers-color-scheme: dark)
-    set_darkmode()
-
-
-if hexo-config('style.darkmode') == 'always'
-  set_darkmode()
+    _dark_root()
\ No newline at end of file
diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl
index 959e001..faf5da2 100644
--- a/source/css/_layout/md.styl
+++ b/source/css/_layout/md.styl
@@ -23,6 +23,8 @@
   >p
     text-indent: 'calc(%s * 2)' % var(--fsp)
     text-align: justify
+  ol,ul
+    margin-left: 0.5em
   h1,h2,h3,h4,h5,h6
     text-align: center
     a.headerlink
@@ -108,14 +110,18 @@
   margin: auto
   display: block
 
-.md-text li:not([class]) a:not([class]), .md-text p:not([class]) a:not([class])
+.md-text li:not([class]) a:not([class])
+.md-text p:not([class]) a:not([class])
+.md-text table a:not([class])
   position: relative
   text-decoration: none
   trans1 all
   padding: 0 2px
   border-radius: 0
+  color: inherit
   background: linear-gradient(0deg,var(--theme-link),var(--theme-link)) no-repeat left 100%/100% 1px
   &:hover
+    text-decoration: none
     color: var(--theme-link)
     border-radius: 4px
     background: linear-gradient(0deg,var(--theme-link-opa),var(--theme-link-opa)) no-repeat left 100%/100% 100%
diff --git a/source/css/_layout/pages/archives.styl b/source/css/_layout/pages/archives.styl
index e1532cc..57799a8 100644
--- a/source/css/_layout/pages/archives.styl
+++ b/source/css/_layout/pages/archives.styl
@@ -101,5 +101,6 @@
       color: var(--text)
       background: var(--block-hover)
 
-.post-list.author #archive
-  padding: 1rem 0
\ No newline at end of file
+@media screen and (min-width: $device-mobile)
+  .post-list.author #archive
+    padding: 1rem 0
\ No newline at end of file
diff --git a/source/css/_layout/partial/article-banner.styl b/source/css/_layout/partial/article-banner.styl
index bc4e06a..077fcc4 100644
--- a/source/css/_layout/partial/article-banner.styl
+++ b/source/css/_layout/partial/article-banner.styl
@@ -6,7 +6,7 @@
 
 .article.banner
   .bg+.content
-    min-height: 240px
+    min-height: 224px
     --text-banner: white
     --button-hover-bg: rgba(white, 0.25)
 
@@ -32,7 +32,7 @@
 .article.banner
   .bg+.content
     trans1 all
-    --blur-bg: rgba(black, 0.1)
+    --blur-bg: rgba(black, 0)
     --blur-px: 0px
     --blur-sat: 100%
     background: var(--blur-bg)
@@ -48,12 +48,10 @@
 
 .article.banner
   --button-hover-bg: rgba(black, 0.05)
-set_darkmode()
-  .article.banner
+  ondark()
     --button-hover-bg: rgba(white, 0.15)
-
-if hexo-config('style.darkmode') == 'auto'
-  @media (prefers-color-scheme: dark)
-    set_darkmode()
-if hexo-config('style.darkmode') == 'always'
-  set_darkmode()
\ No newline at end of file
+  if theme(dark)
+    ondark()
+  else if theme(auto)
+    @media (prefers-color-scheme: dark)
+      ondark()
diff --git a/source/css/_layout/partial/article-footer.styl b/source/css/_layout/partial/article-footer.styl
index 90cf0bf..f4695d4 100644
--- a/source/css/_layout/partial/article-footer.styl
+++ b/source/css/_layout/partial/article-footer.styl
@@ -30,11 +30,6 @@
       word-break: break-all
       p
         --fsp: $fsp2
-      a
-        text-decoration: none
-        color: unset
-        &:hover
-          text-decoration: underline
   section+section
     margin-top: 1rem
     padding-top: 1rem
diff --git a/source/css/_layout/sidebar/footer.styl b/source/css/_layout/sidebar/footer.styl
index 0dcd848..4013460 100644
--- a/source/css/_layout/sidebar/footer.styl
+++ b/source/css/_layout/sidebar/footer.styl
@@ -19,3 +19,5 @@
       z-index: 1
       filter: unset
       background: var(--alpha100)
+    img
+      border-radius: 2px
diff --git a/source/css/_layout/tag-plugins/common.styl b/source/css/_layout/tag-plugins/common.styl
index 2b25baf..a9bba67 100644
--- a/source/css/_layout/tag-plugins/common.styl
+++ b/source/css/_layout/tag-plugins/common.styl
@@ -66,7 +66,7 @@ set_dynamic_color($theme)
   --theme-link: #ffe659
   set_text_white()
 
-set_darkmode_tags()
+_dark_tags()
   set_dynamic_color($theme)
     --theme: $theme
     --theme-border: hsl(hue($theme), 50, 24)
@@ -104,9 +104,10 @@ set_darkmode_tags()
   .colorful[color='warning'],.colorful[color='light']
     set_text_black()
 
-if hexo-config('style.darkmode') == 'auto'
-  @media (prefers-color-scheme: dark)
-    set_darkmode_tags()
 
-if hexo-config('style.darkmode') == 'always'
-  set_darkmode_tags()
\ No newline at end of file
+if theme(dark)
+  _dark_tags()
+else if theme(auto)
+  @media (prefers-color-scheme: dark)
+    _dark_tags()
+
diff --git a/source/css/_layout/tag-plugins/image.styl b/source/css/_layout/tag-plugins/image.styl
index 15ed021..702cc6c 100644
--- a/source/css/_layout/tag-plugins/image.styl
+++ b/source/css/_layout/tag-plugins/image.styl
@@ -24,7 +24,7 @@
       color: var(--text-p1)
       &:hover
         background: var(--card) !important
-        color: $color-hover
+        color: $color-theme
   .image-meta
     display: flex
     justify-content: center
diff --git a/source/css/_layout/tag-plugins/quot.styl b/source/css/_layout/tag-plugins/quot.styl
index 85f10f8..0bf250b 100644
--- a/source/css/_layout/tag-plugins/quot.styl
+++ b/source/css/_layout/tag-plugins/quot.styl
@@ -30,7 +30,7 @@
   h3,h4,h5,h6
     font-size: $fsh3
   p
-    --fsp: $fsh4
+    font-size: calc(var(--fsp) + 2px)
     color: var(--text)
 
 // type=text
diff --git a/source/css/_layout/tag-plugins/timeline.styl b/source/css/_layout/tag-plugins/timeline.styl
index 3463a35..7e4404d 100644
--- a/source/css/_layout/tag-plugins/timeline.styl
+++ b/source/css/_layout/tag-plugins/timeline.styl
@@ -139,7 +139,10 @@
       text-decoration: none
       border-bottom: 2px solid $color-theme
       trans1 all
+      background: none
       &:hover
+        background: none
+        border-radius: 0
         border-bottom: 2px solid $color-hover
   >p:first-child:not([class]) a:not([class])
     padding: 0
@@ -148,7 +151,10 @@
     text-decoration: none
     border-bottom: 2px solid $color-theme
     trans1 all
+    background: none
     &:hover
+      background: none
+      border-radius: 0
       border-bottom: 2px solid $color-hover
     
   
@@ -191,7 +197,7 @@
     padding: 0 0.5rem
     display: flex 
     align-items: center
-    border-color: var(--block-border)
+    border-color: $color-link
     &:first-child 
       margin-left: 0
     &:last-child 
diff --git a/source/css/_layout/widgets/timeline.styl b/source/css/_layout/widgets/timeline.styl
index 8142a9c..05e9b99 100644
--- a/source/css/_layout/widgets/timeline.styl
+++ b/source/css/_layout/widgets/timeline.styl
@@ -40,6 +40,8 @@
       
   .tag-plugin.timeline[api] .body .footer
     background: none
+    a.item
+      border-color: var(--text)
 
 
 .l_left .widget-wrapper.timeline .body
diff --git a/source/css/_layout/widgets/widgets.styl b/source/css/_layout/widgets/widgets.styl
index 2c5ea5c..a2d3ac3 100644
--- a/source/css/_layout/widgets/widgets.styl
+++ b/source/css/_layout/widgets/widgets.styl
@@ -73,7 +73,12 @@
     .widget-header
       padding-left: var(--gap-padding)
       padding-right: var(--gap-padding)
+  // 小屏幕
   @media screen and (max-width: $device-laptop)
     .widget-wrapper
       margin-top: var(--gap-margin)
       border-radius: $border-card
+  // 大屏幕
+  @media screen and (min-width: $device-laptop)
+    .widget-wrapper.markdown .widget-body
+      background: var(--block)
diff --git a/source/css/_plugins/comments/twikoo.styl b/source/css/_plugins/comments/twikoo.styl
index 84cdea1..685fd9b 100644
--- a/source/css/_plugins/comments/twikoo.styl
+++ b/source/css/_plugins/comments/twikoo.styl
@@ -106,15 +106,15 @@
   .tk-comments-no
     color: var(--text-p1);
 
-set_darkmode_comments()
+_dark_comments()
   .cmt-body.twikoo
     --twikoo-lighttext: $color-link;
     --twikoo-secondtext: var(--text-p2);
     --twikoo-theme: $color-theme;
 
-if hexo-config('style.darkmode') == 'auto'
-  @media (prefers-color-scheme: dark)
-    set_darkmode_comments()
 
-if hexo-config('style.darkmode') == 'always'
-  set_darkmode_comments()
\ No newline at end of file
+if theme(dark)
+  _dark_comments()
+else if theme(auto)
+  @media (prefers-color-scheme: dark)
+    _dark_comments()
diff --git a/source/css/_plugins/comments/waline.styl b/source/css/_plugins/comments/waline.styl
index 3aa6860..1458b55 100644
--- a/source/css/_plugins/comments/waline.styl
+++ b/source/css/_plugins/comments/waline.styl
@@ -37,8 +37,8 @@
   --waline-avatar-radius: 50%;
   --waline-box-shadow: none;
   
-
-  @media (prefers-color-scheme: dark)
+.cmt-body.waline
+  ondark()
     --waline-white: #000;
     --waline-light-grey: #666;
     --waline-dark-grey: #999;
@@ -55,11 +55,14 @@
     /* 其他颜色 */
     --waline-info-bgcolor: #272727;
     --waline-info-color: #666;
+    .wl-count
+      padding: .375em;
+      font-weight: bold;
+      font-size: 1.25em;
+      color: #fff;
 
-.wl-count
-  @media (prefers-color-scheme: dark)
-    padding: .375em;
-    font-weight: bold;
-    font-size: 1.25em;
-    color: #fff;
-
+  if theme(dark)
+    ondark()
+  else if theme(auto)
+    @media (prefers-color-scheme: dark)
+      ondark()
diff --git a/source/css/_plugins/mermaid.styl b/source/css/_plugins/mermaid.styl
index 305c451..cf2389f 100644
--- a/source/css/_plugins/mermaid.styl
+++ b/source/css/_plugins/mermaid.styl
@@ -24,7 +24,7 @@ pre.mermaid
   stroke: var(--block-border) !important
   fill: var(--block) !important
   
-set_mermaid_darkmode()
+_dark_mermaid()
   .mermaid 
     fill: #ccc !important
   
@@ -117,9 +117,8 @@ set_mermaid_darkmode()
     fill: #ccc
   
 
-if hexo-config('style.darkmode') == 'auto'
+if theme(dark)
+  _dark_mermaid()
+else if theme(auto)
   @media (prefers-color-scheme: dark)
-    set_mermaid_darkmode()
-
-if hexo-config('style.darkmode') == 'always'
-  set_mermaid_darkmode()
+    _dark_mermaid()