From 16b25112b2eec8340ecc8aef2b69ac1254ee7aa6 Mon Sep 17 00:00:00 2001
From: xaoxuu <me@xaoxuu.com>
Date: Fri, 2 Apr 2021 20:24:16 +0800
Subject: [PATCH] css

---
 _config.yml                                  |  5 +-
 layout/_partial/scripts/index.ejs            |  3 -
 layout/_partial/sidebar/index.ejs            |  2 +-
 layout/_partial/sidebar/widgets/toc.ejs      |  3 -
 layout/layout.ejs                            |  2 +-
 source/css/_common/blur.styl                 |  8 +-
 source/css/_common/title.styl                |  2 +-
 source/css/_custom.styl                      | 28 ++++---
 source/css/_defines/theme.styl               | 72 +++++++---------
 source/css/_layout/layout.styl               |  2 +-
 source/css/_layout/main.styl                 | 36 ++++----
 source/css/_layout/md.styl                   |  4 +-
 source/css/_layout/sidebar/footer.styl       |  3 +
 source/css/_layout/sidebar/sidebar.styl      |  2 +-
 source/css/_layout/sidebar/toc.styl          | 14 ++--
 source/css/_layout/tag-plugins/checkbox.styl | 14 ++--
 source/css/_layout/tag-plugins/common.styl   | 87 ++++++++++----------
 source/css/_plugins/comments/valine.styl     | 21 ++---
 source/js/main.js                            |  8 --
 source/js/plugins/darkmode.js                |  6 --
 20 files changed, 153 insertions(+), 169 deletions(-)
 delete mode 100644 source/js/plugins/darkmode.js

diff --git a/_config.yml b/_config.yml
index 84e8ace..c10d510 100755
--- a/_config.yml
+++ b/_config.yml
@@ -168,9 +168,8 @@ plugins:
     interval: 100 # ms
     scale: 1 # 0.1~1
 
-  darkmode:
-    enable: #true
-    js: /js/plugins/darkmode.js
+style:
+  darkmode: auto # set 'auto' to enable, set 'false' to disable
 
 default:
   avatar: https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/avatar/round/3442075.svg
diff --git a/layout/_partial/scripts/index.ejs b/layout/_partial/scripts/index.ejs
index 1fc76a5..4cd90bb 100644
--- a/layout/_partial/scripts/index.ejs
+++ b/layout/_partial/scripts/index.ejs
@@ -121,9 +121,6 @@
   if ('<%- theme.plugins.preload.enable %>' == 'true') {
     stellar.plugins.preload = Object.assign(<%- JSON.stringify(theme.plugins.preload) %>);
   }
-  if ('<%- theme.plugins.darkmode.enable %>' == 'true') {
-    stellar.plugins.darkmode = Object.assign(<%- JSON.stringify(theme.plugins.darkmode) %>);
-  }
 </script>
 
 <!-- required -->
diff --git a/layout/_partial/sidebar/index.ejs b/layout/_partial/sidebar/index.ejs
index ac92187..6b27d86 100755
--- a/layout/_partial/sidebar/index.ejs
+++ b/layout/_partial/sidebar/index.ejs
@@ -2,7 +2,7 @@
 // 默认组件
 if (page.sidebar == undefined) {
   if (page.layout == 'post' && page.content) {
-    page.sidebar = ['toc', 'recent'];
+    page.sidebar = ['toc'];
   } else if (page.layout == 'wiki' && page.content) {
     page.sidebar = ['toc', 'wiki_more'];
   } else {
diff --git a/layout/_partial/sidebar/widgets/toc.ejs b/layout/_partial/sidebar/widgets/toc.ejs
index a275c15..ea6a9fb 100644
--- a/layout/_partial/sidebar/widgets/toc.ejs
+++ b/layout/_partial/sidebar/widgets/toc.ejs
@@ -30,9 +30,6 @@ function layout_toc() {
           <%- __('meta.toc') %>
         <% } %>
       </span>
-      <a class='cap-action' id='s-top' title='<%- __("meta.back_to_top") %>' href='#start'>
-        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10505"><path d="M884.526 163.323H208.881c-30.516 0-55.25 24.934-55.25 55.685s24.734 55.685 55.25 55.685h675.645c30.515 0 55.255-24.93 55.255-55.685s-24.74-55.685-55.255-55.685zM568.253 336.87a56.765 56.765 0 0 0-4.06-3.701c-0.63-0.517-1.29-0.968-1.935-1.454-0.799-0.605-1.577-1.224-2.406-1.787-0.779-0.528-1.583-0.978-2.386-1.46-0.748-0.45-1.485-0.926-2.253-1.341-0.81-0.44-1.649-0.814-2.483-1.208-0.8-0.384-1.588-0.784-2.407-1.132-0.814-0.338-1.643-0.61-2.463-0.906-0.875-0.323-1.745-0.66-2.641-0.932-0.825-0.25-1.66-0.435-2.489-0.645-0.916-0.236-1.817-0.492-2.75-0.681-0.962-0.19-1.935-0.307-2.902-0.445-0.814-0.118-1.618-0.272-2.442-0.354a55.163 55.163 0 0 0-5.438-0.276h-0.015c-0.267 0-0.528 0.036-0.794 0.036a54.856 54.856 0 0 0-39.86 16.271l-279.413 281.61c-21.576 21.75-21.576 57.006 0 78.756a54.876 54.876 0 0 0 39.07 16.312 54.835 54.835 0 0 0 39.066-16.312l186.67-188.145V898.09c0 30.75 24.74 55.685 55.256 55.685s55.255-24.934 55.255-55.685v-387.42L769.526 697.22a54.871 54.871 0 0 0 39.065 16.312 54.835 54.835 0 0 0 39.066-16.312c21.576-21.75 21.576-57.006 0-78.756L568.253 336.87z" p-id="10506"></path></svg>
-      </a>
     </div>
     <div class='widget-body fs14 <%- page.layout == "wiki" ? "wiki" : "post" %>'>
       <% if (page.layout == 'wiki' && page.wiki) { %>
diff --git a/layout/layout.ejs b/layout/layout.ejs
index 6db6815..244c1fa 100755
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang='<%- page.lang %>'>
 <%- partial('_partial/head') %>
-<body theme='<%- page.dark ? "dark" : "light" %>'>
+<body>
   <%- partial('_partial/main/article/wiki_cover') %>
   <div class='l_body' id='start'>
     <aside class='l_left'>
diff --git a/source/css/_common/blur.styl b/source/css/_common/blur.styl
index dda1701..31fb149 100644
--- a/source/css/_common/blur.styl
+++ b/source/css/_common/blur.styl
@@ -1,7 +1,9 @@
-body[theme='light']
+:root
   --blur-bg: alpha(white, .5)
-body[theme='dark']
-  --blur-bg: alpha(black, .5)
+if hexo-config('style.darkmode') == 'auto'
+  @media (prefers-color-scheme: dark)
+    :root
+      --blur-bg: alpha(black, .5)
 .blur
   background: var(--blur-bg)
   @supports ((-webkit-backdrop-filter:blur(12px)) or (backdrop-filter:blur(12px)))
diff --git a/source/css/_common/title.styl b/source/css/_common/title.styl
index 30e5a04..a54799b 100644
--- a/source/css/_common/title.styl
+++ b/source/css/_common/title.styl
@@ -34,7 +34,7 @@ h6
     margin: 2rem 1rem 0rem
   .post-title
     font-weight: 500
-    margin: 1rem 0
+    margin: 0.5rem 0
     line-height: 1.2
     font-size: $fs-h3
     border-bottom: none
diff --git a/source/css/_custom.styl b/source/css/_custom.styl
index 5eb31c8..413bada 100644
--- a/source/css/_custom.styl
+++ b/source/css/_custom.styl
@@ -10,20 +10,22 @@ $color-inlinecode = #ff7043
 $color-cat = #FF7844
 $color-cat-hover = darken($color-cat, 20)
 
-// 浅色页面
-$c-site-bg-light = #f8f8f8
-$c-block-light = #f2f2f2
-$c-title-light = #000
-$c-text-light = #222
-$c-card-light = white
+// 浅色
+$light-site-bg = #f8f8f8
+$light-block = #f2f2f2
+$light-title = #000
+$light-text = #222
+$light-card = white
 
-// 深色页面
-$c-site-bg-dark = black
-$c-block-dark = #111
-$c-title-dark = #fff
-$c-text-dark = #fff
-$c-card-dark = #333
+// 深色
+$dark-site-bg = #20252B
+$dark-block = #40454B
+$dark-title = #fff
+$dark-text = #eee
+$dark-card = #2E353D
 
+// 移动端深色背景（OLED调成纯黑可以省电）
+$dark-site-bg-mobile = black
 
 
 // @font-face
@@ -59,7 +61,7 @@ $border-block = 4px
 
 // 可以动态变化的属性
 :root
-  --width-left: 280px
+  --width-left: 256px
   --width-main: 680px
   --gap-l: 16px
   // desktop or larger
diff --git a/source/css/_defines/theme.styl b/source/css/_defines/theme.styl
index 0921d40..23a68df 100644
--- a/source/css/_defines/theme.styl
+++ b/source/css/_defines/theme.styl
@@ -1,44 +1,36 @@
 :root
-  --site-bg: $c-site-bg-light
-  --block: $c-block-light
-  --block-border: mix($c-block-light, $c-text-light, 95)
-  --block-hover: mix($c-block-light, $c-text-light, 98)
-  --text-p0: $c-title-light
-  --text-p1: $c-text-light
-  --text-p2: mix($c-text-light, $c-site-bg-light, 80)
-  --text-p3: mix($c-text-light, $c-site-bg-light, 60)
-  --text-meta: mix($c-text-light, $c-site-bg-light, 20)
-  --card: $c-card-light
+  --site-bg: $light-site-bg
+  --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-meta: mix($light-text, $light-site-bg, 20)
+  --card: $light-card
   --theme-highlight: darken($color-theme, 5)
-  --theme-bg: mix($color-theme, $c-card-light, 10)
+  --theme-bg: mix($color-theme, $light-card, 10)
 
-// 页面的dark主题
-body[theme='dark']
-  --site-bg: $c-site-bg-dark
-  --block: $c-block-dark
-  --block-border: mix($c-block-dark, $c-text-dark, 90)
-  --block-hover: mix($c-block-dark, $c-text-dark, 95)
-  --text-p0: $c-title-dark
-  --text-p1: $c-text-dark
-  --text-p2: mix($c-text-dark, $c-site-bg-dark, 70)
-  --text-p3: mix($c-text-dark, $c-site-bg-dark, 45)
-  --text-meta: mix($c-text-dark, $c-site-bg-dark, 30)
-  --card: $c-card-dark
-  --theme-highlight: $color-theme
-  --theme-bg: mix($color-theme, $c-card-dark, 10)
+if hexo-config('style.darkmode') == 'auto'
+  // 系统的dark模式
+  @media (prefers-color-scheme: dark)
+    :root
+      --site-bg: $dark-site-bg
+      --block: $dark-block
+      --block-border: lighten($dark-block, 10)
+      --block-hover: darken($dark-block, 1)
+      --text-p0: $dark-title
+      --text-p1: $dark-text
+      --text-p2: mix($dark-text, $dark-site-bg, 70)
+      --text-p3: mix($dark-text, $dark-site-bg, 45)
+      --text-meta: mix($dark-text, $dark-site-bg, 30)
+      --card: $dark-card
+      --theme-highlight: $color-theme
+      --theme-bg: mix($color-theme, $dark-card, 10)
+      @media screen and (max-width: $device-tablet)
+        --site-bg: $dark-site-bg-mobile
 
-// 系统的dark模式
-@media (prefers-color-scheme: dark)
-  :root
-    --site-bg: $c-site-bg-dark
-    --block: $c-block-dark
-    --block-border: mix($c-block-dark, $c-text-dark, 90)
-    --block-hover: mix($c-block-dark, $c-text-dark, 95)
-    --text-p0: $c-title-dark
-    --text-p1: $c-text-dark
-    --text-p2: mix($c-text-dark, $c-site-bg-dark, 70)
-    --text-p3: mix($c-text-dark, $c-site-bg-dark, 45)
-    --text-meta: mix($c-text-dark, $c-site-bg-dark, 30)
-    --card: $c-card-dark
-    --theme-highlight: $color-theme
-    --theme-bg: mix($color-theme, $c-card-dark, 10)
+  @media (prefers-color-scheme: dark)
+    html
+      filter: brightness(80%) !important
diff --git a/source/css/_layout/layout.styl b/source/css/_layout/layout.styl
index 42688b3..23f86a6 100644
--- a/source/css/_layout/layout.styl
+++ b/source/css/_layout/layout.styl
@@ -41,7 +41,7 @@
       max-width: 100%
   .l_body.mobile
     .l_left
-      transition: transform .5s ease-out
+      transition: transform .3s ease-out
   .l_body.mobile.sidebar
     .l_left
       transform: translateX(0px)
diff --git a/source/css/_layout/main.styl b/source/css/_layout/main.styl
index b4a5f8a..9e5438f 100644
--- a/source/css/_layout/main.styl
+++ b/source/css/_layout/main.styl
@@ -1,22 +1,28 @@
 .l_main
   position: relative
   padding-bottom: "calc(1 * %s)" % var(--gap-l)
+  @media screen and (min-width: 1200px)
+    margin-left: "calc(2 * %s)" % var(--gap-l)
+    margin-right: "calc(0.75 * %s)" % var(--width-left)
   @media screen and (min-width: $device-tablet)
     padding-top: "calc(2 * %s)" % var(--gap-l)
   header
-    margin: 2rem 1rem 1rem
-    padding: 0.25rem
-    background: var(--block)
-    border-radius: 6px
+    padding: 2rem 1rem 0
+    border-bottom: 2px solid var(--block)
+    margin-bottom: 1.5rem
     .logo-wrap
-      margin: 0.5rem 0.75rem
-      .avatar
-        width: 32px
-        height: 32px
-        border: none
-      .title
-        font-size: 1.5rem
-  nav.menu
-    margin: -3px
-    a.nav-item
-      margin: 2px
+      margin: 0.5rem 0
+    nav.menu
+      background: none
+      padding: 0
+      justify-content: space-between
+      a.nav-item
+        margin: 0
+        margin-bottom: -2px
+        padding: 0.5rem 1rem
+        border-radius: 0
+        border-bottom: 2px solid var(--block)
+      a.nav-item.active, a.nav-item:hover
+        background: none
+        color: $color-theme
+        border-bottom-color: $color-theme
diff --git a/source/css/_layout/md.styl b/source/css/_layout/md.styl
index 1013e9d..d2f0fc8 100644
--- a/source/css/_layout/md.styl
+++ b/source/css/_layout/md.styl
@@ -18,6 +18,8 @@ article.md.content
     margin-top: 0.5rem
     line-height: 1.2
     color: var(--text-p0)
+  h2:first-child
+    margin-top: 0
   h2,h3,h4,h5,h6
     color: var(--text-p0)
     padding-top: 1rem
@@ -37,8 +39,6 @@ article.md
     margin-top: 3rem
     border-bottom: 1px solid var(--block-border)
     font-weight: 400
-    &:first-child
-      margin-top: 0
   h3
     margin-top: 1.5rem
     font-weight: 400
diff --git a/source/css/_layout/sidebar/footer.styl b/source/css/_layout/sidebar/footer.styl
index 6ca6603..228837d 100644
--- a/source/css/_layout/sidebar/footer.styl
+++ b/source/css/_layout/sidebar/footer.styl
@@ -24,3 +24,6 @@
       transform: translateY(-1px)
       background: linear-gradient(145deg, #ddd, #fff)
       box-shadow: 2px 4px 8px #ddd, -2px -4px 8px #fff
+      if hexo-config('style.darkmode') == 'auto'
+        @media (prefers-color-scheme: dark)
+          box-shadow: none
diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl
index 3a22384..c4dfb04 100644
--- a/source/css/_layout/sidebar/sidebar.styl
+++ b/source/css/_layout/sidebar/sidebar.styl
@@ -62,13 +62,13 @@ nav.menu
     overflow: hidden
     padding: 0.375rem 0.75rem
     color: var(--text-p3)
+    text-align: center
     &.active, &:hover
       color: var(--text-p1)
       background: var(--card)
 
 .l_left .menu a.nav-item
   flex-grow: 1
-  text-align: center
 
 .l_left .widgets
   margin: 1rem 0
diff --git a/source/css/_layout/sidebar/toc.styl b/source/css/_layout/sidebar/toc.styl
index 3dd979f..a4ec70e 100644
--- a/source/css/_layout/sidebar/toc.styl
+++ b/source/css/_layout/sidebar/toc.styl
@@ -1,5 +1,6 @@
 // toc padding
 #toc .widget-body
+  border-left: 2px solid var(--block-hover)
   line-height: 1.2
   ul ul, ul ol
     padding-left: 0
@@ -56,7 +57,6 @@
     color: var(--theme-highlight) !important
 
 #toc .doc-tree
-  border-left: 2px solid var(--block-hover)
   a.doc-tree-link
     color: var(--text-p3)
     padding: 0.5rem
@@ -67,12 +67,10 @@
     font-weight: 500
     &.active
       color: var(--text-p2)
-      font-size: 1rem
+      font-size: $fs-14
     &:hover
       background: var(--block-hover)
-
-// #toc .widget-body.wiki
-//   .doc-tree.active
-//     border-color: var(--text-meta)
-//   .doc-tree.active:only-child
-//     border-color: var(--block-hover)
+  &.active
+    a.doc-tree-link
+      background: var(--block-hover)
+      margin: 2px 0
diff --git a/source/css/_layout/tag-plugins/checkbox.styl b/source/css/_layout/tag-plugins/checkbox.styl
index c48b2f5..b7ce974 100644
--- a/source/css/_layout/tag-plugins/checkbox.styl
+++ b/source/css/_layout/tag-plugins/checkbox.styl
@@ -159,22 +159,22 @@
   --theme: $c-blue
 
 .tag-plugin.checkbox[color='red']
-  --theme: mix($c-red, $c-card-light, 90)
+  --theme: mix($c-red, $light-card, 90)
 
 .tag-plugin.checkbox[color='orange']
-  --theme: mix($c-orange, $c-card-light, 90)
+  --theme: mix($c-orange, $light-card, 90)
 
 .tag-plugin.checkbox[color='yellow']
-  --theme: mix($c-yellow, $c-card-light, 90)
+  --theme: mix($c-yellow, $light-card, 90)
 
 .tag-plugin.checkbox[color='green']
-  --theme: mix($c-green, $c-card-light, 90)
+  --theme: mix($c-green, $light-card, 90)
 
 .tag-plugin.checkbox[color='cyan']
-  --theme: mix($c-cyan, $c-card-light, 90)
+  --theme: mix($c-cyan, $light-card, 90)
 
 .tag-plugin.checkbox[color='blue']
-  --theme: mix($c-blue, $c-card-light, 100)
+  --theme: mix($c-blue, $light-card, 100)
 
 .tag-plugin.checkbox[color='purple']
-  --theme: mix($c-purple, $c-card-light, 90)
+  --theme: mix($c-purple, $light-card, 90)
diff --git a/source/css/_layout/tag-plugins/common.styl b/source/css/_layout/tag-plugins/common.styl
index b15986d..18b6c23 100644
--- a/source/css/_layout/tag-plugins/common.styl
+++ b/source/css/_layout/tag-plugins/common.styl
@@ -3,32 +3,32 @@
   --theme-bg: var(--block)
 
 .tag-plugin[color='red']
-  --theme: mix($c-red, $c-card-light, 40)
-  --theme-bg: mix($c-red, $c-card-light, 10)
+  --theme: mix($c-red, $light-card, 40)
+  --theme-bg: mix($c-red, $light-card, 10)
 
 .tag-plugin[color='orange']
-  --theme: mix($c-orange, $c-card-light, 40)
-  --theme-bg: mix($c-orange, $c-card-light, 10)
+  --theme: mix($c-orange, $light-card, 40)
+  --theme-bg: mix($c-orange, $light-card, 10)
 
 .tag-plugin[color='yellow']
-  --theme: mix($c-yellow, $c-card-light, 40)
-  --theme-bg: mix($c-yellow, $c-card-light, 10)
+  --theme: mix($c-yellow, $light-card, 40)
+  --theme-bg: mix($c-yellow, $light-card, 10)
 
 .tag-plugin[color='green']
-  --theme: mix($c-green, $c-card-light, 40)
-  --theme-bg: mix($c-green, $c-card-light, 10)
+  --theme: mix($c-green, $light-card, 40)
+  --theme-bg: mix($c-green, $light-card, 10)
 
 .tag-plugin[color='cyan']
-  --theme: mix($c-cyan, $c-card-light, 40)
-  --theme-bg: mix($c-cyan, $c-card-light, 10)
+  --theme: mix($c-cyan, $light-card, 40)
+  --theme-bg: mix($c-cyan, $light-card, 10)
 
 .tag-plugin[color='blue']
-  --theme: mix($c-blue, $c-card-light, 40)
-  --theme-bg: mix($c-blue, $c-card-light, 10)
+  --theme: mix($c-blue, $light-card, 40)
+  --theme-bg: mix($c-blue, $light-card, 10)
 
 .tag-plugin[color='purple']
-  --theme: mix($c-purple, $c-card-light, 40)
-  --theme-bg: mix($c-purple, $c-card-light, 10)
+  --theme: mix($c-purple, $light-card, 40)
+  --theme-bg: mix($c-purple, $light-card, 10)
 
 
 .tag-plugin[color='white']
@@ -36,43 +36,44 @@
 
 
 .tag-plugin[color='dark']
-  --theme-bg: mix(black, $c-card-light, 75)
+  --theme-bg: mix(black, $light-card, 75)
   color: var(--card) !important
 
-body[theme='dark']
-  .tag-plugin[color='red']
-    --theme: mix($c-red, $c-card-dark, 40)
-    --theme-bg: mix($c-red, $c-card-dark, 10)
+if hexo-config('style.darkmode') == 'auto'
+  @media (prefers-color-scheme: dark)
+    .tag-plugin[color='red']
+      --theme: mix($c-red, $dark-card, 40)
+      --theme-bg: mix($c-red, $dark-card, 10)
 
-  .tag-plugin[color='orange']
-    --theme: mix($c-orange, $c-card-dark, 40)
-    --theme-bg: mix($c-orange, $c-card-dark, 10)
+    .tag-plugin[color='orange']
+      --theme: mix($c-orange, $dark-card, 40)
+      --theme-bg: mix($c-orange, $dark-card, 10)
 
-  .tag-plugin[color='yellow']
-    --theme: mix($c-yellow, $c-card-dark, 40)
-    --theme-bg: mix($c-yellow, $c-card-dark, 10)
+    .tag-plugin[color='yellow']
+      --theme: mix($c-yellow, $dark-card, 40)
+      --theme-bg: mix($c-yellow, $dark-card, 10)
 
-  .tag-plugin[color='green']
-    --theme: mix($c-green, $c-card-dark, 40)
-    --theme-bg: mix($c-green, $c-card-dark, 10)
+    .tag-plugin[color='green']
+      --theme: mix($c-green, $dark-card, 40)
+      --theme-bg: mix($c-green, $dark-card, 10)
 
-  .tag-plugin[color='cyan']
-    --theme: mix($c-cyan, $c-card-dark, 40)
-    --theme-bg: mix($c-cyan, $c-card-dark, 10)
+    .tag-plugin[color='cyan']
+      --theme: mix($c-cyan, $dark-card, 40)
+      --theme-bg: mix($c-cyan, $dark-card, 10)
 
-  .tag-plugin[color='blue']
-    --theme: mix($c-blue, $c-card-dark, 40)
-    --theme-bg: mix($c-blue, $c-card-dark, 10)
+    .tag-plugin[color='blue']
+      --theme: mix($c-blue, $dark-card, 40)
+      --theme-bg: mix($c-blue, $dark-card, 10)
 
-  .tag-plugin[color='purple']
-    --theme: mix($c-purple, $c-card-dark, 40)
-    --theme-bg: mix($c-purple, $c-card-dark, 10)
+    .tag-plugin[color='purple']
+      --theme: mix($c-purple, $dark-card, 40)
+      --theme-bg: mix($c-purple, $dark-card, 10)
 
 
-  .tag-plugin[color='white']
-    --theme-bg: white
-    color: var(--card)
+    .tag-plugin[color='white']
+      --theme-bg: white
+      color: var(--card)
 
-  .tag-plugin[color='dark']
-    --theme-bg: mix(black, $c-card-dark, 75)
-    color: var(--text-p0) !important
+    .tag-plugin[color='dark']
+      --theme-bg: mix(black, $dark-card, 75)
+      color: var(--text-p0) !important
diff --git a/source/css/_plugins/comments/valine.styl b/source/css/_plugins/comments/valine.styl
index aef7a54..40d1f46 100644
--- a/source/css/_plugins/comments/valine.styl
+++ b/source/css/_plugins/comments/valine.styl
@@ -46,9 +46,15 @@
           &:hover
             background: linear-gradient(145deg, #eee, #fff)
             box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), -1px -1px 2px rgba(255, 255, 255, 0.5), inset 8px 8px 16px rgba(0, 0, 0, 0.05), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
+            if hexo-config('style.darkmode') == 'auto'
+              @media (prefers-color-scheme: dark)
+                box-shadow: none
           &:active
             background: linear-gradient(145deg, #eee, #fff)
             box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1), -0px -0px 0px rgba(255, 255, 255, 0.8), inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 1), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
+            if hexo-config('style.darkmode') == 'auto'
+              @media (prefers-color-scheme: dark)
+                box-shadow: none
       .vedit
         .vctrl span
           padding: 0
@@ -205,13 +211,8 @@
     p
       color: var(--text-p1)
 
-
-body[theme='dark']
-  .cmt-body.valine
-    --more-before: 0 0
-    --more-after: #393c40
-
-@media (prefers-color-scheme: dark)
-  .cmt-body.valine
-    --more-before: 0 0
-    --more-after: #393c40
+if hexo-config('style.darkmode') == 'auto'
+  @media (prefers-color-scheme: dark)
+    .cmt-body.valine
+      --more-before: 0 0
+      --more-after: #393c40
diff --git a/source/js/main.js b/source/js/main.js
index f70eb55..a3b687d 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -127,9 +127,6 @@ const init = {
       $("#toc a.toc-link").click(function(e) {
         l_body.classList.remove("sidebar");
       });
-      $("#toc a#s-top").click(function(e) {
-        l_body.classList.remove("sidebar");
-      });
     })
   },
   relativeDate: (selector) => {
@@ -276,8 +273,3 @@ if (stellar.plugins.preload) {
     stellar.loadScript(stellar.plugins.preload.flying_pages, {defer:true})
   }
 }
-
-// darkmode
-if (stellar.plugins.darkmode) {
-  stellar.loadScript(stellar.plugins.darkmode.js, {defer:true})
-}
diff --git a/source/js/plugins/darkmode.js b/source/js/plugins/darkmode.js
deleted file mode 100644
index b3c38bf..0000000
--- a/source/js/plugins/darkmode.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// darkmode
-const darkmode = {
-  toggle: () => {
-    alert("toggle");
-  },
-}