hexo-theme-stellar 1.17.2 → 1.18.0

package/_config.yml

@@ -1,6 +1,6 @@
 ######## Stellar info ########
 stellar:
-  version: '1.17.2'
+  version: '1.18.0'
   homepage: 'https://xaoxuu.com/wiki/stellar/'
   repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
   cdn_css: # Use cdn links instead of /css/main.css
@@ -27,20 +27,20 @@ sidebar:
   widgets:
     #### 自动生成的页面 ####
     # 主页
-    home: search, welcome, recent, timeline # for home
+    home: search, recent, timeline # for home
     # 博客索引页
     blog_index: search_blog, recent, timeline # for categories/tags/archives
     # 文档索引页
     wiki_index: search_docs, recent, timeline # for wiki
     # 其它（404）
-    others: search, welcome, recent, timeline # for 404 and ...
+    others: search, recent, timeline # for 404 and ...
     #### 手动创建的页面 ####
     # 文章内页
-    post: toc, ghrepo, search, ghissues # for pages using 'layout:post'
+    post: search_blog, toc, ghrepo, ghissues # for pages using 'layout:post'
     # 文档内页
     wiki: search, ghrepo, toc, ghissues, related # for pages using 'layout:wiki'
     # 其它 layout:page 的页面
-    page: welcome, toc, search # for custom pages using 'layout:page'
+    page: toc, search # for custom pages using 'layout:page'
 
 ######## Index ########
 post-index: # 近期发布 分类 标签 归档 and ...
@@ -243,6 +243,9 @@ tag_plugins:
   # {% mark %}
   mark:
     default_color: dark # light, dark, red, orange, yellow, green, cyan, blue, purple, warning, error
+  # {% tag %}
+  tag:
+    default_color: yellow # red, orange, yellow, green, cyan, blue, purple
 
 
 ######## JS Plugins ########
@@ -259,6 +262,7 @@ plugins:
     timeline: /js/plugins/timeline.js
     linkcard: /js/plugins/linkcard.js
     fcircle: /js/plugins/fcircle.js
+    weibo: /js/plugins/weibo.js
 
   marked: https://cdn.bootcdn.net/ajax/libs/marked/4.0.18/marked.min.js
   
@@ -338,27 +342,17 @@ style:
     code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
   text-align: left
   color:
-    common:
-      theme: '#1BCDFC' # 主题色
-      accent: '#ff5722' # 强调色
-      link: '#2196f3' # 超链接颜色
-      button: '#1BCDFC' # 按钮颜色
-      hover: '#ff5722' # 按钮高亮颜色
-    light:
-      background: '#F8F9FA' # 浅色背景颜色
-      block: '#F0F1F2' # 块背景颜色
-      card: white # 卡片背景颜色
-      title: '#000' # 标题文本颜色
-      text: '#333' # 正文文本颜色
-      code: '#f33a00' # 行内代码颜色
-    dark:
-      background: '#313438' # 深色背景颜色
-      background-mobile: black # 移动端深色背景（OLED调成纯黑可以省电）
-      block: '#2B2F33' # 块背景颜色
-      card: '#464D57' # 卡片背景颜色
-      title: '#fff' # 标题文本颜色
-      text: '#eee' # 正文文本颜色
-      code: '#ff7043' # 行内代码颜色
+    # 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
+    background: 'hsl(212 16% 98%)' # 浅色背景颜色
+    block: 'hsl(212 8% 95%)' # 块背景颜色
+    code: 'hsl(14 100% 48%)' # 行内代码颜色
+    text: 'hsl(0 0% 20%)' # 文本颜色
+    # 主题色配置（不会根据明暗动态调整，请设置为通用的颜色）
+    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
     background: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp

package/_data/widgets.yml

@@ -44,7 +44,6 @@ toc:
 # github user info
 ghuser:
   layout: ghuser
-  api: https://api.github.com
   username: github # your github login username
   avatar: true # show avatar or not
   menu: true # show menu or not
@@ -63,20 +62,6 @@ tagcloud:
   end_color: # 结束的颜色。您可使用十六进位值（#b700ff），rgba（rgba(183, 0, 255, 1)），hsla（hsla(283, 100%, 50%, 1)）或 颜色关键字。此变量仅在 color 参数开启时才有用。
   show_count: false # 显示每个标签的文章总数
 
-welcome:
-  layout: markdown
-  title: Stellar 入门指南
-  content: | # support markdown
-    欢迎使用 [Stellar](https://github.com/xaoxuu/hexo-theme-stellar/) 主题，下面是您的入门指南，祝您使用愉快！
-    <br>
-    **第一步**
-    创建 `blog/_config.stellar.yml` 文件，在此文件中填写需要自定义的主题配置。
-    <br>
-    **第二步**
-    创建 `blog/source/_data/widgets.yml` 文件，此文件中填写需要自定义的侧边栏组件，例如 `welcome` 组件。
-    <br>
-    如果有任何疑问，请先查阅 [文档](https://xaoxuu.com/wiki/stellar/)，如果文档中没有提供，请提 [issue](https://github.com/xaoxuu/hexo-theme-stellar/issues/) 向开发中询问。
-
 timeline:
   layout: timeline
   title: 近期动态

package/layout/_partial/sidebar/header.ejs

@@ -10,10 +10,10 @@ function layoutTitle(main, url, sub) {
   if (sub) {
     let arr = sub.split('|');
     if (arr.length > 1) {
-      el += '<div class="sub normal cap">' + arr[0].trim() + '</div>';
-      el += '<div class="sub hover cap" style="opacity:0">' + arr[1].trim() + '</div>';
-    } else if (arr.length > 0) {
-      el += '<div class="sub cap">' + arr[0] + '</div>';
+      el += '<div class="sub normal cap">' + arr.shift().trim() + '</div>';
+      el += '<div class="sub hover cap" style="opacity:0">' + arr.join('|') + '</div>';
+    } else {
+      el += '<div class="sub cap">' + sub + '</div>';
     }
   }
   el += '</a>';

package/layout/_partial/sidebar/index.ejs

@@ -40,10 +40,10 @@ function layoutTitle(main, url, sub) {
   if (sub) {
     let arr = sub.split('|');
     if (arr.length > 1) {
-      el += '<div class="sub normal cap">' + arr[0].trim() + '</div>';
-      el += '<div class="sub hover cap" style="opacity:0">' + arr[1].trim() + '</div>';
-    } else if (arr.length > 0) {
-      el += '<div class="sub cap">' + arr[0] + '</div>';
+      el += '<div class="sub normal cap">' + arr.shift().trim() + '</div>';
+      el += '<div class="sub hover cap" style="opacity:0">' + arr.join('|') + '</div>';
+    } else {
+      el += '<div class="sub cap">' + sub + '</div>';
     }
   }
   el += '</a>';

package/layout/_partial/widgets/search.ejs

@@ -27,6 +27,7 @@ function layoutDiv() {
   } else {
     el += ' placeholder="' + (item.placeholder || __('search.search')) + '">'
   }
+  el += '<svg t="1670596976048" class="icon search-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2676" width="200" height="200"><path d="M938.2 832.6L723.8 618.1c-2.5-2.5-5.3-4.4-7.9-6.4 36.2-55.6 57.3-121.8 57.3-193.1C773.3 222.8 614.6 64 418.7 64S64 222.8 64 418.6c0 195.9 158.8 354.6 354.6 354.6 71.3 0 137.5-21.2 193.2-57.4 2 2.7 3.9 5.4 6.3 7.8L832.5 938c14.6 14.6 33.7 21.9 52.8 21.9 19.1 0 38.2-7.3 52.8-21.8 29.2-29.1 29.2-76.4 0.1-105.5M418.7 661.3C284.9 661.3 176 552.4 176 418.6 176 284.9 284.9 176 418.7 176c133.8 0 242.6 108.9 242.6 242.7 0 133.7-108.9 242.6-242.6 242.6" p-id="2677"></path></svg>'
   el += '</form>'
   el += '<div id="search-result"></div>'
   el += '<div class="search-no-result">' + __('search.no_results') + '</div>'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-stellar",
-  "version": "1.17.2",
+  "version": "1.18.0",
   "description": "Elegant and powerful theme for Hexo.",
   "main": "package.json",
   "scripts": {

package/scripts/generators/search.js

@@ -54,6 +54,8 @@ hexo.extend.generator.register('search_json_generator', function (locals) {
         content = content.replace(/[#]{2,} /g, '')
         // 部分HTML标签
         content = content.replace(/<iframe[\s|\S]+iframe>/g, '')
+        content = content.replace(/<hr>/g, '')
+        content = content.replace(/<br>/g, '')
         // 图片
         content = content.replace(/\!\[(.*?)\]\((.*?)\)/g, '')
         // 链接

package/scripts/tags/{border.js → ablock.js}

@@ -1,23 +1,21 @@
 /**
- * border.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * ablock.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% border [color:color] [child:codeblock/tabs] title %}
+ * {% ablock [color:color] [child:codeblock/tabs] title %}
  * body
- * {% endborder %}
+ * {% endablock %}
  */
 
 'use strict';
 
-hexo.extend.tag.register('border', function(args, content) {
+hexo.extend.tag.register('ablock', 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(' ');

package/scripts/tags/{split.js → grid.js}

@@ -1,21 +1,21 @@
 /**
- * split.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * grid.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% split [style:block/card] %}
+ * {% grid [style:block/card] %}
  * <!-- cell left -->
  * left body
  * <!-- cell right -->
  * right body
- * {% endsplit %}
+ * {% endgrid %}
  */
 
 'use strict';
 
-hexo.extend.tag.register('split', function(args, content) {
+hexo.extend.tag.register('grid', function(args, content) {
   args = hexo.args.map(args, ['bg']);
   var el = '';
-  el += '<div class="tag-plugin split"';
+  el += '<div class="tag-plugin grid"';
   el += ' ' + hexo.args.joinTags(args, ['bg']).join(' ');
   el += '>';
   

package/scripts/tags/note.js

@@ -13,20 +13,18 @@ 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(' ');
   el += '>';
   // title
   if (title && title.length > 0) {
-    el += '<div class="title"><strong>' + title + '</strong></div>';
+    el += '<div class="title">' + title + '</div>';
   }
   // content
   el += '<div class="body">';

package/scripts/tags/poetry.js

@@ -3,7 +3,7 @@
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
  * poetry:
- * {% poetry [align:center] [title] [author:作者] [date:日期] [footer:footer] %}
+ * {% poetry [title] [author:作者] [date:日期] [footer:footer] %}
  * body
  * {% endpoetry %}
  *
@@ -13,13 +13,11 @@
 
 hexo.extend.tag.register('poetry', function(args, content) {
   var el = '';
-  args = hexo.args.map(args, ['author', 'date', 'align', 'footer'], ['title']);
+  args = hexo.args.map(args, ['author', 'date', 'footer'], ['title']);
 
   el += '<div class="tag-plugin poetry"';
-  if (args.align) {
-    el += ' align="' + args.align + '"';
-  }
   el += '>';
+  el += '<div class="content">'
   if (args.title) {
     el += '<div class="title">';
     el += args.title;
@@ -43,6 +41,7 @@ hexo.extend.tag.register('poetry', function(args, content) {
     el += args.footer;
     el += '</div>';
   }
+  el += '</div>'
   el += '</div>';
   return el;
 }, {ends: true});

package/scripts/tags/quot.js

@@ -1,9 +1,9 @@
 /**
- * quot.js v1.1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * quot.js v1.2 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
  * quot:
- * {% quot [el:h1] [icon:default] text %}
+ * {% quot [el:h2] [icon:default] text %}
  *
  */
 
@@ -38,14 +38,18 @@ hexo.extend.tag.register('quot', function(args) {
     return el;
   }
   if (args.el.includes('h')) {
-    el += '<' + args.el + ' class="tag-plugin quot"' + type + ' id="' + args.text + '">';
+    el += '<div' + ' class="tag-plugin quot">'
+    el += '<' + args.el + ' class="content" id="' + args.text + '"' + type + '>';
     el += '<a href="#' + args.text + '" class="headerlink" title="' + args.text + '"></a>';
     el += content();
     el += '</' + args.el + '>';
+    el += '</div>'
   } else {
-    el += '<' + args.el + ' class="tag-plugin quot"' + type + '>';
+    el += '<div' + ' class="tag-plugin quot">'
+    el += '<' + args.el + ' class="content"' + type + '>';
     el += content();
     el += '</' + args.el + '>';
+    el += '</div>'
   }
   return el;
 });

package/scripts/tags/tag.js

@@ -0,0 +1,35 @@
+/**
+ * tag.js v1.0 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% tag text href [color:color] %}
+ *
+ */
+
+'use strict';
+
+const tag_colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple']
+var tag_index = 0;
+
+hexo.extend.tag.register('tag', function(args) {
+  args = hexo.args.map(args, ['color'], ['text', 'href']);
+  if (args.color == null) {
+    const default_color = hexo.theme.config.tag_plugins.tag?.default_color
+    if (default_color) {
+      args.color = default_color
+    } else {
+      args.color = tag_colors[tag_index]
+      tag_index += 1
+      if (tag_index >= tag_colors.length) {
+        tag_index = 0
+      }
+    }
+  }
+  var el = '';
+  el += '<a class="tag-plugin tag"';
+  el += ' ' + hexo.args.joinTags(args, ['color', 'href']).join(' ');
+  el += '>';
+  el += args.text;
+  el += '</a>';
+  return el;
+});

package/scripts/tags/toc.js

@@ -2,7 +2,7 @@
  * toc.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% toc wiki:xxx [open:true] [display:mobile] title %}
+ * {% toc wiki:xxx [title] [open:true] [display:mobile] %}
  */
 
 'use strict';
@@ -33,7 +33,7 @@ hexo.extend.tag.register('toc', function(args) {
   el += '>';
 
   el += '<details class="toc"';
-  if (args.open !== false) {
+  if (args.open != 'false') {
     el += ' open';
   }
   el += '>';

package/source/css/_common/highlight.styl

@@ -15,7 +15,6 @@ p>code:not([class]),li>code:not([class])
   border-radius: $border-block
   overflow: hidden
   background: var(--block)
-  border: 1px solid var(--block-border)
   line-height: 1.5
   font-family: $ff-code
   box-sizing: border-box
@@ -35,7 +34,6 @@ p>code:not([class]),li>code:not([class])
     background: var(--block-hover)
     border-top-left-radius: "calc(%s - 1px)" % $border-block
     border-top-right-radius: "calc(%s - 1px)" % $border-block
-    border-bottom: 1px solid var(--block-border)
     span
       margin-right: 4px
   >table
@@ -102,7 +100,6 @@ table:not([class])
   >.hljs
     padding: 1rem
     border-radius: $border-block
-    border: 1px solid var(--block-border)
     line-height: 1.5
     box-sizing: border-box
 

package/source/css/_custom.styl

@@ -1,31 +1,17 @@
 @require('_defines/const')
 
 // 通用主题色
-$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-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'))
-
+$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'))
+
+// 动态颜色
+$color-background = convert(hexo-config('style.color.background'))
+$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'
@@ -55,7 +41,7 @@ $fs-13 = .8125rem
 $fs-12 = .75rem
 
 $fs-h1   = 1.75rem   // 32px
-$fs-h2   = 1.5rem // 24px
+$fs-h2   = 1.5rem    // 24px
 $fs-h3   = 1.375rem  // 22px
 $fs-h4   = 1.125rem  // 18px
 $fs-h5   = $fs-15
@@ -64,7 +50,7 @@ $fs-p    = $fs-15
 $fs-code = $fs-13
 
 $border-card = 12px
-$border-block = 8px
+$border-block = 6px
 $border-image = 6px
 
 // 可以动态变化的属性

package/source/css/_defines/theme.styl

@@ -1,46 +1,59 @@
-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
+$color-background-h = hue($color-background)
+$color-background-s = saturation($color-background)
+$color-background-l = lightness($color-background)
+
+$color-block-h = hue($color-block)
+$color-block-s = saturation($color-block)
+$color-block-l = lightness($color-block)
+
+$color-code-h = hue($color-code)
+$color-code-s = saturation($color-code)
+$color-code-l = lightness($color-code)
+
+$color-text-h = hue($color-text)
+$color-text-s = saturation($color-text)
+$color-text-l = lightness($color-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($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)
+  --text-p3: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.25)
+  --text-p4: hsl($color-text-h, $color-text-s, $color-text-l / 0.5 * 1.5)
+  --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 * 1)
+
+set_text_light()
+  --text-p0: 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)
+  --text-p3: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.2)
+  --text-p4: hsl($color-text-h, $color-text-s, 100 - $color-text-l / 0.5 * 1.4)
+  --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, $color-code-l * 1.25)
+
 :root
-  --site-bg: $light-background
-  --card: $light-card
-  --block: $light-block
-  --block-border: darken($light-block, 5)
-  --block-hover: darken($light-block, 2)
+  --site-bg: hsl($color-background-h, $color-background-s, 98)
+  --card: hsl($color-block-h, $color-block-s, 100)
+  --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)
+  --block-lighten: hsl($color-block-h, $color-block-s, 100)
   set_text_dark()
-  --theme-highlight: darken($color-theme, 5)
-  --theme-bg: mix($color-theme, $light-card, 10)
+  --theme-bg2: $color-theme
   --theme-link: $color-link
 
 set_darkmode()
   :root
-    --site-bg: $dark-background
-    --card: $dark-card
-    --block: $dark-block
-    --block-border: lighten($dark-block, 6)
-    --block-hover: darken($dark-block, 4)
+    --site-bg: hsl($color-background-h, $color-background-s / 2, 16)
+    --card: hsl($color-block-h, $color-block-s * 1.5, 25)
+    --block: hsl($color-block-h, $color-block-s, 12)
+    --block-border: hsl($color-block-h, $color-block-s, 24)
+    --block-hover: hsl($color-block-h, $color-block-s, 9)
+    --block-lighten: hsl($color-block-h, $color-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)
-      --block: darken($dark-block, 4)
-      --block-border: lighten($dark-block, 2)
-      --block-hover: darken($dark-block,8)
+      --site-bg: black
 
 if hexo-config('style.darkmode') == 'auto'
   // 系统的dark模式

package/source/css/_layout/md.styl

@@ -22,8 +22,8 @@ h1.article-title
 .md-text.content
   position: relative
   margin-bottom: 2rem
-  display: flex
-  flex-direction: column
+  // display: flex
+  // flex-direction: column
   &.indent
     >p:not([class])
       text-indent: 'calc(%s * 2)' % $fs-p
@@ -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

package/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

package/source/css/_layout/partial/related.styl

@@ -91,7 +91,7 @@
         text-decoration: underline
         &:hover
           color: $color-hover
-        &:after
+        &:before
           display: none
   div.cmt-body
     min-height: 150px

package/source/css/_layout/sidebar/header.styl

@@ -5,9 +5,9 @@
 nav.menu
   margin: 1rem 0
   background: var(--block)
+  border: 1px solid var(--block-border)
   border-radius: 6px
   display: flex
-  padding: 1px
   flex-wrap: wrap
   &::-webkit-scrollbar
     display: none
@@ -28,7 +28,7 @@ nav.menu
     text-align: center
     &.active, &:hover
       color: var(--text-p1)
-      background: var(--card)
+      background: var(--block-lighten)
       box-shadow: $boxshadow-button
 
 .l_left .menu a.nav-item