hexo-theme-stellar 1.37.0 → 1.38.0

package/layout/index.ejs

@@ -5,6 +5,29 @@ if (page.menu_id == undefined) {
 if (page.title && page.wiki) {
   page.robots = 'noindex,follow';
 }
+// 首页评论区：仅首页第一页，默认不显示，可通过 site_tree.home.comments 开启/覆盖
+var homeCmt = theme.site_tree?.home?.comments
+if (homeCmt && homeCmt !== false && is_home_first_page()) {
+  page.comments = true;
+  if (typeof homeCmt === 'object') {
+    if (homeCmt.service) {
+      page.comments_service = homeCmt.service;
+    }
+    if (homeCmt.comment_title != null) {
+      page.comment_title = homeCmt.comment_title;
+    }
+    if (homeCmt.comment_id != null) {
+      page.comment_id = homeCmt.comment_id;
+    }
+    var homeCommentServices = ['beaudar', 'utterances', 'giscus', 'twikoo', 'waline', 'artalk'];
+    for (var i = 0; i < homeCommentServices.length; i++) {
+      var key = homeCommentServices[i];
+      if (homeCmt[key]) {
+        page[key] = homeCmt[key];
+      }
+    }
+  }
+}
 
 function layout_post_card(layout, post, content) {
   var el = '';
@@ -38,4 +61,7 @@ function layout_post_list(partial) {
 <%- layout_post_list(function(post){
   return partial('_partial/main/post_list/post_card', {post: post})
 }) %>
-<%- partial('_partial/main/post_list/paginator') %>
+<%- partial('_partial/main/post_list/paginator') %>
+<% if (homeCmt && homeCmt !== false && is_home_first_page()) { %>
+  <%- partial('_partial/comments/layout') %>
+<% } %>

package/layout/notebooks.ejs

@@ -1,8 +1,10 @@
 <%# 笔记本列表页主体部分 %>
 <% for (const notebook of Object.values(theme.notebooks.tree)) { %>
   <div class="post-list wiki">
-    <a class="post-card wiki<%= scrollreveal(' ') %>" href="<%= pretty_url(notebook.base_dir) %>">
+    <div class="post-card-wrap<%= scrollreveal(' ') %>">
+    <a class="post-card wiki" href="<%= pretty_url(notebook.base_dir) %>">
       <%- include('_partial/main/notebook/notebook_card', { notebook: notebook }) %>
     </a>
+    </div>
   </div>
 <% } %>

package/layout/notes.ejs

@@ -1,12 +1,14 @@
 <%# 笔记列表页主体部分 %>
 <div class="post-list post">
   <% page.posts.each(post => { %>
+    <div class="post-card-wrap<%= scrollreveal(' ') %>">
     <a
-      class="post-card<%= scrollreveal(' ') %> post"
+      class="post-card post"
       href="<%= pretty_url(post.link || post.path) %><%= page.activeTag ? `?tag=${page.activeTag}` : '' %>"
     >
       <%- include('_partial/main/notebook/note_card', { note: post }) %>
     </a>
+    </div>
   <% }) %>
 </div>
 <%- include('_partial/main/notebook/paginator') %>

package/package.json

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

package/scripts/tags/index.js

@@ -42,6 +42,7 @@ hexo.extend.tag.register('poetry', require('./lib/poetry')(hexo), true)
 hexo.extend.tag.register('quot', require('./lib/quot')(hexo))
 hexo.extend.tag.register('blockquote', require('./lib/blockquote')(hexo), true)
 hexo.extend.tag.register('hashtag', require('./lib/hashtag')(hexo))
+hexo.extend.tag.register('mbti', require('./lib/mbti')(hexo))
 hexo.extend.tag.register('okr', require('./lib/okr')(hexo), {ends: true})
 hexo.extend.tag.register('audio', require('./lib/audio')(hexo))
 hexo.extend.tag.register('video', require('./lib/video')(hexo))

package/scripts/tags/lib/mbti.js

@@ -0,0 +1,169 @@
+/**
+ * mbti.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ *
+ * {% mbti INTJ-T 93-72-78-83-51 [url:https://...] [image:src] %}
+ *
+ * - type: 人格类型代码（如 INTJ-T / INTJ，大小写均可），决定标题与配色
+ * - scores: 五个百分比，用 - 分隔，顺序固定为 energy-mind-nature-tactics-identity
+ * - url: 档案链接（可选，url:https://...），支持完整 URL 或纯档案 ID
+ * - image: 标题上方横幅图片地址（可选）
+ */
+
+'use strict';
+
+var TYPE_ROLES = {
+  INTJ: 'analyst',
+  INTP: 'analyst',
+  ENTJ: 'analyst',
+  ENTP: 'analyst',
+  INFJ: 'diplomat',
+  INFP: 'diplomat',
+  ENFJ: 'diplomat',
+  ENFP: 'diplomat',
+  ISTJ: 'sentinel',
+  ISFJ: 'sentinel',
+  ESTJ: 'sentinel',
+  ESFJ: 'sentinel',
+  ISTP: 'explorer',
+  ISFP: 'explorer',
+  ESTP: 'explorer',
+  ESFP: 'explorer'
+};
+
+var ROLE_COLORS = {
+  analyst: 'purple',
+  diplomat: 'green',
+  sentinel: 'blue',
+  explorer: 'yellow'
+};
+
+var TRAIT_KEYS = ['energy', 'mind', 'nature', 'tactics', 'identity'];
+
+var TRAIT_COLORS = {
+  energy: '#2196f3',
+  mind: '#FFBD2B',
+  nature: '#3DC550',
+  tactics: '#9c27b0',
+  identity: '#F44336'
+};
+
+// 根据类型代码推导每个维度的偏向侧（trait 侧）：E/I、N/S、T/F、J/P、A/T
+function getTraitSides(typeCode) {
+  var code = typeCode.replace('-', '');
+  var sides = {};
+  sides.energy = code.charAt(0) === 'E' ? 'left' : 'right';
+  sides.mind = code.charAt(1) === 'N' ? 'left' : 'right';
+  sides.nature = code.charAt(2) === 'T' ? 'left' : 'right';
+  sides.tactics = code.charAt(3) === 'J' ? 'left' : 'right';
+  if (code.charAt(4) === 'A') {
+    sides.identity = 'left';
+  } else if (code.charAt(4) === 'T') {
+    sides.identity = 'right';
+  } else {
+    sides.identity = 'left';
+    console.warn('[mbti] identity variant missing, default to Assertive (-A): ' + typeCode);
+  }
+  return sides;
+}
+
+function clamp(value) {
+  value = parseInt(value, 10);
+  if (isNaN(value)) {
+    value = 0;
+  }
+  return Math.max(0, Math.min(100, value));
+}
+
+function alphaHex(hex, alpha) {
+  var r = parseInt(hex.slice(1, 3), 16);
+  var g = parseInt(hex.slice(3, 5), 16);
+  var b = parseInt(hex.slice(5, 7), 16);
+  return 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
+}
+
+module.exports = ctx => function(args) {
+  args = ctx.args.map(args, ['image', 'url'], ['type', 'scores']);
+
+  var typeCode = String(args.type || '').trim().toUpperCase();
+  if (!typeCode) {
+    console.error('[mbti] missing personality type');
+    return '';
+  }
+  var typeMatch = typeCode.match(/^([A-Z]{4})/);
+  var typeKey = typeMatch ? typeMatch[1] : null;
+  var role = typeKey ? TYPE_ROLES[typeKey] : null;
+  if (!role) {
+    console.warn('[mbti] unknown personality type: ' + typeCode);
+  }
+  var themeColor = role ? ROLE_COLORS[role] : '';
+
+  var __ = (this && typeof this.__ === 'function') ? this.__ : ctx.theme.i18n.__(ctx.config.language);
+  var typeName = typeKey ? __('tag_plugins.mbti.types.' + typeKey) : '';
+  if (!typeName || typeName.indexOf('tag_plugins.mbti.types.') === 0) {
+    typeName = typeCode;
+  }
+
+  var scoreParts = String(args.scores || '').split('-');
+  var pcts = [];
+  for (var i = 0; i < TRAIT_KEYS.length; i++) {
+    pcts.push(clamp(scoreParts[i]));
+  }
+
+  var url = args.url ? String(args.url).trim() : '';
+  if (url && !/^https?:\/\//i.test(url)) {
+    url = 'https://www.16personalities.com/ch/' + encodeURIComponent('档案') + '/' + url;
+  }
+  if (url) {
+    url = url.replace(/"/g, '&quot;');
+  }
+
+  var image = args.image ? String(args.image).trim() : '';
+  if (image) {
+    image = image.replace(/"/g, '&quot;');
+  }
+
+  var traitSides = getTraitSides(typeCode);
+
+  var el = '<div class="tag-plugin colorful note mbti"';
+  if (themeColor) {
+    el += ' color="' + themeColor + '"';
+  }
+  el += '>';
+  if (image) {
+    el += '<img class="mbti-image" src="' + image + '" alt="" />';
+  }
+  var title = __('tag_plugins.mbti.title', typeCode, typeName);
+  el += '<div class="mbti-title">';
+  if (url) {
+    el += '<a class="mbti-title-link" href="' + url + '" target="_blank" rel="external nofollow noopener noreferrer">' + title + '</a>';
+  } else {
+    el += '<span class="mbti-title-text">' + title + '</span>';
+  }
+  el += '</div>';
+  el += '<div class="mbti-body">';
+  el += '<div class="mbti-traits">';
+  for (var j = 0; j < TRAIT_KEYS.length; j++) {
+    var key = TRAIT_KEYS[j];
+    var left = __('tag_plugins.mbti.traits.' + key + '.left');
+    var right = __('tag_plugins.mbti.traits.' + key + '.right');
+    var pct = pcts[j];
+    // 官网规则：trait 在左端时 reverse=true，圆点位置 = reverse ? 100-pct : pct，高亮侧由圆点位置决定
+    var reverse = traitSides[key] === 'left';
+    var position = reverse ? 100 - pct : pct;
+    var activeSide = position <= 50 ? 'left' : 'right';
+    // 填充从主导侧（trait 侧）开始：trait 在右时 fill 右对齐
+    var reversed = traitSides[key] === 'right' ? ' reversed' : '';
+    el += '<div class="mbti-trait' + reversed + '" style="--theme:' + TRAIT_COLORS[key] + '; --theme-a30:' + alphaHex(TRAIT_COLORS[key], 0.3) + '">';
+    el += '<div class="mbti-labels">';
+    el += '<span class="mbti-label left' + (activeSide === 'left' ? ' active' : '') + '">' + left + (activeSide === 'left' ? ' <span class="pct">' + pct + '%</span>' : '') + '</span>';
+    el += '<span class="mbti-label right' + (activeSide === 'right' ? ' active' : '') + '">' + (activeSide === 'right' ? '<span class="pct">' + pct + '%</span> ' : '') + right + '</span>';
+    el += '</div>';
+    // fill 从主导侧端点延伸到圆点位置（宽度与圆点互补），保证填充末端与圆点对齐
+    el += '<div class="mbti-progress"><div class="fill" style="width:' + (100 - pct) + '%"></div><span class="mbti-dot" style="left:' + position + '%"></span></div>';
+    el += '</div>';
+  }
+  el += '</div>';
+  el += '</div>';
+  el += '</div>';
+  return el;
+};

package/source/css/_common/canonical.styl

@@ -2,6 +2,7 @@
   position: fixed
   display: flex
   text-align: center
+  border-radius: 8px
   bottom: 4rem
   left: 50%
   transform: translateX(-50%)
@@ -12,17 +13,15 @@
   box-shadow: 0 2px 8px rgba(black, .1), 0 4px 16px rgba(black, .1), 0 8px 32px rgba(black, .1)
   .headline
     font-size: $fsh2
-  a, button
-    border-radius: 6px
-    background: var(--bg-a100)
+    margin-bottom: .5rem
+  a
     display: block
     color: inherit
-    padding: 1rem
-    font-size: 1rem
-  button
-    padding: 0
-    width: 3rem
-    margin-left: 1px
+    padding: .75rem
+    font-size: $fs-14
+
+.canonical-tip.official
+  background-color: var(--bg-a100)
 
 .canonical-tip.unofficial
   background-color: hsl(5, 100%, 60%)
@@ -34,4 +33,4 @@
     50%
       background-color: hsl(5, 100%, 30%)
     100%
-      background-color: hsl(5, 100%, 60%)
+      background-color: hsl(5, 100%, 60%)

package/source/css/_common/highlight.styl

@@ -14,7 +14,6 @@ p>code:not([class]),li>code:not([class])
   --theme: var(--text-p3)
   margin: var(--gap-p) 0
   border-radius: $border-card
-  corner-shape: superellipse(1.2)
   overflow: hidden
   background: var(--block)
   font-family: $ff-codeblock
@@ -80,7 +79,6 @@ p>code:not([class]),li>code:not([class])
   .gist-file 
     border: 1px solid var(--block-border)
     border-radius: $border-card
-    corner-shape: superellipse(1.2)
     overflow: hidden
   .gist-data
     --bgColor-default: var(--block)

package/source/css/_common/html.styl

@@ -1,5 +1,6 @@
 *
   outline: none
+  corner-shape: $corner-shape
 html
   height: 100%
   width: 100%
@@ -9,7 +10,7 @@ html
   font-size: $fs-root
   -webkit-text-size-adjust: 100%
   -ms-text-size-adjust: 100%
-  scroll-padding-top: 8px
+  scroll-padding-top: 0
 body
   background: var(--background)
   margin: 0

package/source/css/_common/svg.styl

@@ -6,4 +6,12 @@ svg.icon
   overflow: hidden
 
 svg.active-icon
-  color: var(--theme)
+  color: var(--theme)
+
+// 隐藏的 SVG 渐变定义容器（配合 --item-grad 与 fill:var(--item-grad) 使用）
+svg.grad-def
+  position: absolute
+  width: 0 !important
+  height: 0 !important
+  overflow: hidden
+  pointer-events: none

package/source/css/_components/list.styl

@@ -20,12 +20,19 @@
     margin-top: 0.5rem
 
 // card
-.post-list .post-card
+.post-list .post-card-wrap
   display: block
   margin: 1rem 0
   border-radius: $border-card-l
-  background: var(--card)
   hoverable-card()
+  &:hover
+    // 保留 hover 阴影变化，去掉位移：ScrollReveal 内联 transform 与合成层交互导致位移卡顿
+    transform: none !important
+
+.post-list .post-card
+  display: block
+  border-radius: $border-card-l
+  background: var(--card)
   overflow: hidden
   z-index: 0
   position: relative
@@ -40,9 +47,16 @@
     // --blur-px: 0
     // --blur-height: 0
     --blur-sat: 200%
+    // 图片卡片 hover 封面放大：卡片本身不动，放大后的图片由圆角静态裁剪裁出圆角
+    .post-cover img, .cover img, .cover:before
+      transform: scale(1.05)
   img
     filter: brightness(var(--img-br)) saturate(var(--img-sat))
-    trans1 all
+    // 封面放大用 0.5s 缓动，其余属性（亮度/饱和度）保持主题默认 0.2s
+    transition: all .2s ease-out, transform .5s ease-out
+    -moz-transition: all .2s ease-out, transform .5s ease-out
+    -webkit-transition: all .2s ease-out, transform .5s ease-out
+    -o-transition: all .2s ease-out, transform .5s ease-out
   .excerpt
     margin: 1rem 0
     @media screen and (max-width: $device-mobile)
@@ -116,20 +130,26 @@
       content: ''
       z-index 1
       position: absolute
-      left: 0
-      right: 0
-      height: var(--blur-height)
-      backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
-      -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
-      trans1 all
-    &[position=top]:before
       top: 0
-      mask: linear-gradient(black, rgba(black, 0.75), transparent)
-      -webkit-mask: linear-gradient(black, rgba(black, 0.75), transparent)
+      left: 0
+      width: 100%
+      height: 100%
+      // Chromium: corner-shape + overflow:hidden 的合成层裁剪与 backdrop-filter 不兼容，
+      // 渐变模糊改用同图模糊层（filter + mask）实现，观感与 backdrop-filter 等价
+      background-image: var(--cover-url)
+      background-size: cover
+      background-position: center
+      filter: brightness(var(--img-br)) saturate(var(--img-sat)) blur(var(--blur-px)) saturate(var(--blur-sat))
+      // 与封面 img 同步：缩放 0.5s 缓动，亮度/饱和度仍按 0.2s
+      transition: all .2s ease-out, transform .5s ease-out
+      -moz-transition: all .2s ease-out, transform .5s ease-out
+      -webkit-transition: all .2s ease-out, transform .5s ease-out
+      -o-transition: all .2s ease-out, transform .5s ease-out
+      mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height) * 0.5), transparent var(--blur-height))
+      -webkit-mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height) * 0.5), transparent var(--blur-height))
     &[position=bottom]:before
-      bottom: 0
-      mask: linear-gradient(transparent, rgba(black, 0.75), black)
-      -webkit-mask: linear-gradient(transparent, rgba(black, 0.75), black)
+      mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height) * 0.5), transparent var(--blur-height))
+      -webkit-mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height) * 0.5), transparent var(--blur-height))
     .cover-info
       padding: 1.5rem 1rem
       position: absolute
@@ -211,4 +231,4 @@
 
 .post-list.archives
   @media screen and (max-width: $device-mobile)
-    margin: 1rem 0
+    margin: 1rem 0

package/source/css/_components/md.styl

@@ -82,7 +82,6 @@
 .md-text.content 
   p>img, .tag-plugin.image .image-bg
     border-radius: $border-image
-    corner-shape: superellipse(1.2)
 
 // 链接样式
 li:not([class]) a:not([class])

package/source/css/_components/pages/article-story.styl

@@ -91,10 +91,8 @@
 
   p>img, .tag-plugin.image .image-bg
     border-radius: $border-image-l
-    corner-shape: superellipse(1.2)
     >img
       border-radius: $border-image-l
-      corner-shape: superellipse(1.2)
 
 
 .l_body[type=story] .md-text.content>blockquote, .md-text.content .tag-plugin.blockquote
@@ -137,4 +135,4 @@
 .l_body[text-indent] .tag-plugin.tabs .tab-content .tab-pane>p:not([class])
   text-indent: 'calc(%s * 2)' % var(--fsp)
   a
-    text-indent: 0
+    text-indent: 0

package/source/css/_components/partial/article-banner.styl

@@ -1,3 +1,6 @@
+.article-banner-wrap
+  display: block
+
 .article.banner
   --text-banner: var(--text)
   background: var(--block)
@@ -48,22 +51,25 @@
       content: ''
       position: absolute
       z-index 0
+      top: 0
       left: 0
-      right: 0
-      backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
-      -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+      width: 100%
+      height: 100%
+      // Chromium: corner-shape + overflow:hidden 的合成层裁剪与 backdrop-filter 不兼容，
+      // 渐变模糊改用同图模糊层（filter + mask）实现，观感与 backdrop-filter 等价
+      background-image: var(--bg-url)
+      background-size: cover
+      background-position: center
+      filter: blur(var(--blur-px)) saturate(var(--blur-sat))
       trans1 all
       opacity var(--blur-opacity)
+      pointer-events: none
     &:before
-      top: 0
-      height: var(--blur-height-top)
-      mask: linear-gradient(black, rgba(black, 0.75), transparent)
-      -webkit-mask: linear-gradient(black, rgba(black, 0.75), transparent)
+      mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height-top) * 0.5), transparent var(--blur-height-top))
+      -webkit-mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height-top) * 0.5), transparent var(--blur-height-top))
     &:after
-      bottom: 0
-      height: var(--blur-height-bottom)
-      mask: linear-gradient(transparent, rgba(black, 0.75), black)
-      -webkit-mask: linear-gradient(transparent, rgba(black, 0.75), black)
+      mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height-bottom) * 0.5), transparent var(--blur-height-bottom))
+      -webkit-mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height-bottom) * 0.5), transparent var(--blur-height-bottom))
     .top,.bottom
       z-index 1
   

package/source/css/_components/partial/article-footer.styl

@@ -3,7 +3,6 @@
   padding: 1rem
   background: var(--block)
   border-radius: $border-card-l
-  corner-shape: superellipse(1.2)
   border: 1px solid var(--block-border)
   font-size: $fs-15
   line-height: 1.6

package/source/css/_components/partial/navbar.styl

@@ -54,7 +54,7 @@
   a+a
     margin-left: 4px
 
-@media screen and (max-width: $device-mobile-iphone-max)
+@media screen and (max-width: $device-mobile-max)
   .navbar.top
-    top: 36px
-    
+    top: 8px
+    

package/source/css/_components/sidebar/logo.styl

@@ -24,6 +24,7 @@
     height: 48px
     flex-shrink: 0
     border-radius: 48px
+    corner-shape: round // 保持正圆（连续曲率会使正圆变成类方形曲线）
     overflow: hidden
     margin-right: 1rem
     div.bg
@@ -35,6 +36,7 @@
       width: "calc(100% - 2 * %s)" % @margin
       height: "calc(100% - 2 * %s)" % @margin
       border-radius: @width
+      corner-shape: round
     if hexo-config('style.animated_avatar.animate')
       div.bg
         trans1: opacity
@@ -83,3 +85,27 @@
       .hover
         transform: translateY(0)
         opacity: 1 !important
+
+.wiki-home-wrap
+  margin: 1rem var(--gap-margin) .5rem
+
+.wiki-home
+  display: flex
+  width: fit-content
+  align-items: center
+  padding: 6px 16px 6px 12px
+  border-radius: 32px
+  background: var(--bg-a50)
+  color: var(--text-p2)
+  font-size: $fs-13
+  trans2 color background
+  svg
+    height: 1em
+    width: auto
+    margin-right: 0.25rem
+  &:hover
+    color: var(--text-p1)
+    sidebar-light()
+
+.l_left .wiki-home-wrap + .header
+  margin-top: 0.5rem

package/source/css/_components/sidebar/menu.styl

@@ -1,9 +1,9 @@
 .nav-area .menu
   width: 100%
-  display: grid
-  margin: 8px 0
-  grid-template-columns: repeat(hexo-config('menubar.columns'), 1fr)
-  grid-gap: 8px
+  display: flex
+  flex-direction: column
+  gap: 4px
+  margin: 0
   &::-webkit-scrollbar
     display: none
   &::-webkit-scrollbar-track-piece
@@ -14,41 +14,64 @@
   .nav-item
     box-sizing: border-box
     width: 100%
-    min-height: 40px
+    min-height: 36px
     border-radius: $border-bar
-    corner-shape: superellipse(1.2)
     font-size: $fs-15
-    font-weight: 500
-    color: var(--text-p3)
-    text-align: center
-    background: var(--bg-a50)
-    trans1 background
+    color: var(--text-p2)
+    text-align: left
     position: relative
     display: flex
-    flex-direction: column
+    flex-direction: row
+    font-weight: 500
     align-items: center
-    justify-content: center
+    justify-content: flex-start
+    gap: 16px
+    padding: 0 16px
+    color: var(--text-p2)
+    // 菜单项主题色由配置内联提供（--item-theme），淡色变体在此基于它计算
+    --item-theme-light: x-theme-light()
     img,svg
-      height: 28px
+      width: 1.5rem
+      height: 1.5rem
       object-fit: contain
-      filter: grayscale(50%) brightness(0.8) opacity(0.5)
-      trans1 all
+      opacity: 0.5
+      color: var(--text-p2)
     span
       text-overflow: ellipsis
       word-break: keep-all
-    &.active, &:hover
+    &:hover
+      color: var(--text-p1)
+      sidebar-light()
+      img,svg
+        opacity: 1
+      > svg [fill="currentColor"]
+        fill: var(--item-grad)
+      > svg [stroke="currentColor"]
+        stroke: var(--item-grad)
+    &.active
       color: var(--text-p1)
-      background: var(--bg-a100)
+      sidebar-light()
       img,svg
-        filter: unset
-    &.active:after
-      content: ''
-      position absolute
-      width: 16px
-      height: 2px
-      left: 50%
-      transform: translateX(-50%)
-      border-radius: 2px
-      bottom: 2px
-      background: currentColor
-
+        opacity: 1
+      .active-dot
+        flex-shrink: 0
+        margin-left: auto
+        width: 8px
+        height: 8px
+        border-radius: 50%
+        corner-shape: round
+        background: x-theme-gradient()
+      > svg [fill="currentColor"]
+        fill: var(--item-grad)
+      > svg [stroke="currentColor"]
+        stroke: var(--item-grad)
+    // 未设置主题色的菜单项，激活/悬停时图标显示通用主题色
+    &:not(.themed)
+      &:hover, &.active
+        > svg
+          color: var(--theme)
+    // 设置了主题色的菜单项：主题色只作用于图标，文字保持标准色
+    &.themed
+      &:hover, &.active
+        > svg
+          color: var(--item-theme)

package/source/css/_components/sidebar/nav-area.styl

@@ -1,2 +1,2 @@
 .nav-area
-  margin: 1rem var(--gap-margin) 0
+  margin: 1rem 0 2rem