hexo-theme-stellar 1.32.1 → 1.32.3

package/source/css/_components/widgets/ghuser.styl

@@ -35,8 +35,8 @@
     border-radius: 64px
     margin: 1rem 0 0
     padding: 0.5rem 1rem
-    background: $color-theme
-    color: var(--card)
+    background: var(--theme)
+    color: white
     font-size: 1rem
     align-self: stretch
     text-align: center
@@ -50,7 +50,7 @@
       height: 1.5em
       width: auto
     &:hover
-      background: $color-hover
+      background: var(--accent)
 
   .buttons
     margin: 1rem 0

package/source/css/_components/widgets/list.styl

@@ -7,7 +7,7 @@
     color: var(--text-p1)
     trans1 background
     &.active,&:hover
-      background: var(--alpha100)
+      background: var(--bg-a100)
   a+a
     margin-top: 2px
   a  

package/source/css/_components/widgets/markdown.styl

@@ -2,13 +2,19 @@
   .widget-body
     border-radius: $border-card-s
     padding: .25rem 1rem
-    background: var(--alpha50)
+    background: var(--bg-a50)
     >*:first-child
       margin-top: .75rem
 
 .widget-wrapper.markdown .linklist
   margin: 1em 0
   .link
-    background: var(--alpha50)
+    background: var(--bg-a50)
   .link:hover
-    background: var(--alpha100)
+    background: var(--bg-a100)
+
+.l_right .widget-wrapper.markdown .linklist
+  .link
+    background: var(--block)
+  .link:hover
+    background: var(--theme-a20)

package/source/css/_components/widgets/related.styl

@@ -5,7 +5,7 @@
     margin-top: 8px
   .item
     line-height: 1.2
-    background: var(--alpha20)
+    background: var(--bg-a20)
     padding: 10px 16px
     border-radius: $border-card-s
     display: block
@@ -33,6 +33,6 @@
   .item
     trans1 background
   .item.active
-    background: var(--alpha50)
+    background: var(--bg-a50)
   .item:hover
-    background: var(--alpha50)
+    background: var(--bg-a50)

package/source/css/_components/widgets/tagcloud.styl

@@ -1,10 +1,10 @@
 .widget-wrapper.tagcloud .widget-body
   border-radius: $border-card-s
   padding: 12px 16px
-  background: var(--alpha50)
+  background: var(--bg-a50)
   a  
     word-break: break-word
     color: var(--text-p2)
     line-height: 1.5
     &:hover
-      color: $color-hover
+      color: var(--accent)

package/source/css/_components/widgets/timeline.styl

@@ -33,7 +33,7 @@
         padding: 0
         margin: 0
       .highlight, pre:not([class]):has(>code)
-        background: var(--alpha50)
+        background: var(--bg-a50)
       
       
   .tag-plugin.timeline[api] .body .footer
@@ -46,4 +46,4 @@
       content: none
 .l_left .widget-wrapper.timeline .body
   box-shadow: none
-  background: var(--alpha50)
+  background: var(--bg-a50)

package/source/css/_components/widgets/toc.styl

@@ -1,5 +1,4 @@
 .widget-wrapper.toc
-  background: var(--site-bg)
   z-index 3
   .widget-body
     position relative
@@ -12,6 +11,11 @@
       width: 4px
       background: var(--block)
       border-radius: 4px
+  
+  if !$site-background-image
+    @media screen and (min-width: $device-laptop)
+      background: var(--background)
+
 
 // 目录基本样式
 .widget-wrapper.toc .toc
@@ -40,7 +44,7 @@
       bottom: 6px
       left: -8px
       width: 4px
-      background: $color-theme
+      background: var(--theme)
       border-radius: 4px
     &:hover
       background: var(--block-border)
@@ -179,6 +183,6 @@
       color: var(--text-p2)
   .widget-wrapper.toc .widget-footer
     a
-      background: var(--alpha100)
+      background: var(--block)
     a+a
       margin-top: 4px

package/source/css/_components/widgets/widgets.styl

@@ -1,7 +1,7 @@
 .widgets 
   .loading-wrap
     margin: 0.5rem 0
-    background: var(--alpha50)
+    background: var(--bg-a50)
 
 .widgets
   overflow: scroll
@@ -43,11 +43,11 @@
           transform: scale(1.2)
           fill: var(--text-p2)
         &:hover
-          color: $color-hover
-          background: var(--alpha100)
+          color: var(--accent)
+          background: var(--bg-a100)
           opacity 1
           svg
-            fill: $color-hover
+            fill: var(--accent)
 
     .widget-body
       color: var(--text-p1)

package/source/css/_custom.styl

@@ -1,44 +1,10 @@
 @require('_defines/const')
 
-// 通用主题色
-$color-theme = convert(hexo-config('style.color.theme'))
-$color-theme-opa = hsla(hue($color-theme), saturation($color-theme), lightness($color-theme), 0.3)
-$color-accent = convert(hexo-config('style.color.accent'))
-$color-link = convert(hexo-config('style.color.link'))
-$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'))
-
-$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
-$ff-logo = $ff-body
-
-$iQuoteLeft = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789M20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2'/%3E%3C/svg%3E"
-$iQuoteRight = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292m-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292'/%3E%3C/svg%3E"
-
-$h3Left = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M13.488 4.43a.75.75 0 0 1 .081 1.058L7.988 12l5.581 6.512a.75.75 0 1 1-1.138.976l-6-7a.75.75 0 0 1 0-.976l6-7a.75.75 0 0 1 1.057-.081' clip-rule='evenodd'/%3E%3Cpath fill='currentColor' d='M17.75 5a.75.75 0 0 0-1.32-.488l-6 7a.75.75 0 0 0 0 .976l6 7A.75.75 0 0 0 17.75 19z'/%3E%3C/svg%3E"
-$h3Right = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M10.512 4.43a.75.75 0 0 0-.081 1.058L16.012 12l-5.581 6.512a.75.75 0 1 0 1.138.976l6-7a.75.75 0 0 0 0-.976l-6-7a.75.75 0 0 0-1.057-.081' clip-rule='evenodd'/%3E%3Cpath fill='currentColor' d='M6.25 5a.75.75 0 0 1 1.32-.488l6 7a.75.75 0 0 1 0 .976l-6 7A.75.75 0 0 1 6.25 19z'/%3E%3C/svg%3E"
-
-$loadingIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231cd0fd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='16' stroke-dashoffset='16' d='M12 3c4.97 0 9 4.03 9 9'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.6s' values='16;0'/%3E%3CanimateTransform attributeName='transform' dur='3s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3Cpath stroke-dasharray='64' stroke-dashoffset='64' stroke-opacity='0.3' d='M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='2.4s' values='64;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E"
-
-
-if hexo-config('style.font-family.body')
-  $ff-body = convert(hexo-config('style.font-family.body'))
-
-if hexo-config('style.font-family.code')
-  $ff-code = convert(hexo-config('style.font-family.code'))
-
-if hexo-config('style.font-family.codeblock')
-  $ff-codeblock = convert(hexo-config('style.font-family.codeblock'))
-
-if hexo-config('style.font-family.logo')
-  $ff-logo = convert(hexo-config('style.font-family.logo'))
 
+// font family
+$ff-body = convert(hexo-config('style.font-family.body'))
+$ff-code = convert(hexo-config('style.font-family.code'))
+$ff-codeblock = convert(hexo-config('style.font-family.codeblock'))
 
 // font size
 $fs-root = convert(hexo-config('style.font-size.root'))
@@ -62,6 +28,28 @@ $fsp1 = 'calc(%s - 1px)' % $fs-body
 $fsp2 = 'calc(%s - 2px)' % $fs-body
 $fsp3 = 'calc(%s - 3px)' % $fs-body
 
+// site main
+$site-background-image = hexo-config('style.site.background-image')
+$leftbar-background-image = hexo-config('style.leftbar.background-image')
+$leftbar-background-color = hexo-config('style.leftbar.background-color')
+
+
+// colors
+$c-theme = hsl(192deg, 98%, 55%)
+$c-accent = hsl(14deg, 100%, 57%)
+$c-base-hue = 210deg // 背景/文本颜色的主基调（一般看不出来不需要修改）
+
+// icons
+
+$iQuoteLeft = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789M20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2'/%3E%3C/svg%3E"
+$iQuoteRight = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292m-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292'/%3E%3C/svg%3E"
+
+$iH3Left = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M13.488 4.43a.75.75 0 0 1 .081 1.058L7.988 12l5.581 6.512a.75.75 0 1 1-1.138.976l-6-7a.75.75 0 0 1 0-.976l6-7a.75.75 0 0 1 1.057-.081' clip-rule='evenodd'/%3E%3Cpath fill='currentColor' d='M17.75 5a.75.75 0 0 0-1.32-.488l-6 7a.75.75 0 0 0 0 .976l6 7A.75.75 0 0 0 17.75 19z'/%3E%3C/svg%3E"
+$iH3Right = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M10.512 4.43a.75.75 0 0 0-.081 1.058L16.012 12l-5.581 6.512a.75.75 0 1 0 1.138.976l6-7a.75.75 0 0 0 0-.976l-6-7a.75.75 0 0 0-1.057-.081' clip-rule='evenodd'/%3E%3Cpath fill='currentColor' d='M6.25 5a.75.75 0 0 1 1.32-.488l6 7a.75.75 0 0 1 0 .976l-6 7A.75.75 0 0 1 6.25 19z'/%3E%3C/svg%3E"
+
+$iLoadingIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231cd0fd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='16' stroke-dashoffset='16' d='M12 3c4.97 0 9 4.03 9 9'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.6s' values='16;0'/%3E%3CanimateTransform attributeName='transform' dur='3s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3Cpath stroke-dasharray='64' stroke-dashoffset='64' stroke-opacity='0.3' d='M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='2.4s' values='64;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E"
+
+
 $border-card-l = convert(hexo-config('style.border-radius.card-l'))
 $border-card = convert(hexo-config('style.border-radius.card'))
 $border-card-s = convert(hexo-config('style.border-radius.card-s'))

package/source/css/_defines/const.styl

@@ -44,15 +44,11 @@ $color-google-red = #E8453C
 $c-red = #F44336
 $c-orange = #FA6400
 $c-amber = #FFBD2B
-$c-yellow = #f2e03d
+$c-yellow = #ffe659
 $c-green = #3DC550
 $c-cyan = #1BCDFC
 $c-blue = #2196f3
 $c-purple = #9c27b0
 
-$hue-yellow = 50
-$cDeepOrange = hsl(14 100% 57%)
-
-
 $leftbar-bottom-margin = 96px
 $rightbar-bottom-margin = 96px

package/source/css/_defines/func.styl

@@ -123,7 +123,7 @@ hoverable-card()
       floatable-float()
   ondark()
     &:hover
-      box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
+      box-shadow: 0 0 4px -2px var(--theme), 0 0 24px -8px var(--theme)
   :root[data-theme="light"] &
     onlight()
   :root[data-theme="dark"] &
@@ -149,11 +149,11 @@ newblur()
   &:before
     backdrop-filter: blur(8px)
     -webkit-backdrop-filter: blur(8px)
-    background: var(--alpha20)
+    background: var(--bg-a20)
   &:after
     --blur-px: 24px
     --blur-sat: 500%
-    background: var(--alpha50)
+    background: var(--bg-a50)
     backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
     -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
     mask: linear-gradient(rgba(white, 1), 10%, rgba(white, 0.05), 90%, rgba(white, 1)), linear-gradient(90deg, rgba(white, 1), 10%, rgba(white, 0.05), 90%, rgba(white, 1))
@@ -162,4 +162,4 @@ newblur()
     trans1 all
     @media (prefers-color-scheme: dark)
       opacity 0.4
-      background: var(--alpha20)
+      background: var(--bg-a20)

package/source/css/_defines/theme_base.styl

@@ -0,0 +1,105 @@
+// 通用 hsla 函数
+x-hsla(h = var(--hue), s = var(--sat), l = var(--light), a = var(--alpha))
+  return unquote('hsla(%s %s %s / %s)' % (h s l a))
+
+// 设置不同透明度的主题色
+x-theme-alpha(a = 1)
+  return unquote('hsla(%s %s %s / %s)' % (var(--hue) var(--sat) var(--light) a))
+
+// 设置基础主题色
+x-set-theme-with-color($color)
+  --hue: hue($color)
+  --sat: saturation($color)
+  --light: lightness($color)
+  --alpha: alpha($color)
+  --theme: x-theme-alpha(1)
+  --theme-a20: x-theme-alpha(0.2)
+  --theme-a30: x-theme-alpha(0.3)
+
+// 设置链接颜色
+x-set-link-with-color($color)
+  $hue = hue($color)
+  $sat = saturation($color)
+  $light = lightness($color)
+  --link: x-hsla($hue, $sat, $light, 1)
+  --link-a20: x-hsla($hue, $sat, $light, 0.2)
+
+// 设置背景色
+x-set-bg-colors($scheme)
+  $hue = $c-base-hue
+  $sat = 0%
+  $light = $scheme == 'dark' ? 0% : 100%
+  --bg-a20: x-hsla($hue, $sat, $light, 0.2)
+  --bg-a50: x-hsla($hue, $sat, $light, 0.5)
+  --bg-a60: x-hsla($hue, $sat, $light, 0.6)
+  --bg-a75: x-hsla($hue, $sat, $light, 0.75)
+  --bg-a100: x-hsla($hue, $sat, $light, 1)
+
+// 设置文本及相关色
+x-set-text-colors($scheme, $p0 = 1, $p1 = 0.8, $p2 = 0.7, $p3 = 0.5, $p4 = 0.4)
+  $hue = $c-base-hue
+  $sat = 0%
+  $light = $scheme == 'dark' ? 100% : 0%
+  
+  --text: x-hsla($hue, $sat, $light, $p0)
+  --text-reverse: x-hsla($hue, $sat, $scheme == 'dark' ? 0% : 100%, $p0)
+  --text-p1: x-hsla($hue, $sat, $light, $p1)
+  --text-p2: x-hsla($hue, $sat, $light, $p2)
+  --text-p3: x-hsla($hue, $sat, $light, $p3)
+  --text-p4: x-hsla($hue, $sat, $light, $p4)
+
+  --text-meta: x-hsla($hue, $sat, $light, 0.2)
+  --text-code: x-hsla($hue, $sat, $light, 0.9)
+
+  --text-a10: x-hsla($hue, $sat, $light, 0.1)
+  --text-a20: x-hsla($hue, $sat, $light, 0.2)
+
+  $sat = $scheme == 'dark' ? 24% : 50%
+  $light = $scheme == 'dark' ? 72% : 12%
+  $alpha = $scheme == 'dark' ? 0.08 : 0.04
+  --block: x-hsla($hue, $sat, $light, $alpha)
+  --block-border: x-hsla($hue, $sat, $light, $alpha * 1.5)
+
+
+// ---------------- apply theme ----------------
+// 设置浅色模式
+dynamic-theme-light()
+  $hue = $c-base-hue
+  --background: x-hsla($hue, 20%, 98%, 1)
+  --card: $site-background-image ? hsla(white, 0.5) : white
+
+  x-set-bg-colors('light')
+  x-set-text-colors('light')
+
+// 设置深色模式
+dynamic-theme-dark()
+  $hue = $c-base-hue
+  --background: x-hsla($hue, 8%, 12%, 1)
+  @media screen and (max-width: $device-mobile-max)
+    --background: black
+  --card: $site-background-image ? hsla(white, 0.25) : x-hsla($hue, 10%, 24%, 1)
+
+  x-set-bg-colors('dark')
+  x-set-text-colors('dark')
+  --text-code: x-hsla(20, 75, 60, 1)
+
+
+:root
+  // 主题色
+  x-set-theme-with-color($c-theme)
+  // 强调色
+  --accent: $c-accent
+  // 链接
+  x-set-link-with-color(hsl(207deg, 90%, 54%))
+
+  // dynamic colors
+  dynamic-theme-light()
+  @media (prefers-color-scheme: dark)
+    dynamic-theme-dark()
+
+
+:root[data-theme="light"]
+  dynamic-theme-light()
+:root[data-theme="dark"]
+  dynamic-theme-dark()
+

package/source/css/_defines/theme_colorful.styl

@@ -0,0 +1,117 @@
+// 多彩扩展（文字、链接、边框等都变成彩色）
+x-set-theme-colorful($scheme = 'light', $color, $text = true)
+  $hue = hue($color)
+  x-set-theme-with-color($color)
+  x-set-link-with-color($color)
+  if $scheme == 'dark'
+    --theme-border: x-hsla($hue, 40%, 24%)
+    --theme-block: x-hsla($hue, 24%, 24%)
+    --theme-mark: x-hsla($hue, 24%, 24%)
+    --theme-codeblock: x-hsla($hue, 12%, 24%)
+    if text
+      --text: x-hsla($hue, 50%, 75%, 1)
+      --text-p1: x-hsla($hue, 80%, 80%, 1)
+      --text-p2: x-hsla($hue, 80%, 80%, 0.8)
+      --text-p3: x-hsla($hue, 80%, 80%, 0.6)
+      --text-p4: x-hsla($hue, 80%, 80%, 0.4)
+      --link: x-hsla($hue, 80%, 60%, 1)
+      --link-a20: x-hsla($hue, 80%, 60%, 0.2)
+  else
+    --theme-border: x-hsla($hue, 50%, 80%)
+    --theme-block: x-hsla($hue, 90%, 92%)
+    --theme-mark: x-hsla($hue, 95%, 80%)
+    --theme-codeblock: x-hsla($hue, 50%, 95%)
+    if text
+      --text: x-hsla($hue, 55%, 16%, 1)
+      --text-p1: x-hsla($hue, 90%, 20%, 1)
+      --text-p2: x-hsla($hue, 90%, 20%, 0.8)
+      --text-p3: x-hsla($hue, 90%, 20%, 0.6)
+      --text-p4: x-hsla($hue, 90%, 20%, 0.4)
+      --link: x-hsla($hue, 95%, 32%, 1)
+      --link-a20: x-hsla($hue, 95%, 32%, 0.2)
+
+.tag-plugin
+  --theme-border: var(--block-border)
+  --theme-block: var(--block)
+  --theme-mark: var(--block)
+  --theme-codeblock: var(--block)
+
+.colorful[color='red']
+  x-set-theme-colorful('light', $c-red)
+.colorful[color='orange']
+  x-set-theme-colorful('light', $c-orange)
+.colorful[color='amber']
+  x-set-theme-colorful('light', $c-amber)
+.colorful[color='yellow']
+  x-set-theme-colorful('light', $c-yellow)
+.colorful[color='green']
+  x-set-theme-colorful('light', $c-green)
+.colorful[color='cyan']
+  x-set-theme-colorful('light', $c-cyan)
+.colorful[color='blue']
+  x-set-theme-colorful('light', $c-blue)
+.colorful[color='purple']
+  x-set-theme-colorful('light', $c-purple)
+.colorful[color='theme']
+  x-set-theme-colorful('light', $c-theme)
+.colorful[color='accent']
+  x-set-theme-colorful('light', $c-accent)
+
+.colorful[color='light']
+  --theme: white
+  --theme-block: var(--theme)
+  --theme-mark: var(--theme)
+  --theme-codeblock: var(--theme)
+  dynamic-theme-light()
+
+.colorful[color='dark']
+  dynamic-theme-dark()
+  --theme: #111
+  --theme-border: none
+  --theme-block: var(--theme)
+  --theme-mark: var(--theme)
+  --theme-codeblock: var(--theme)
+
+.colorful[color='warning']
+  x-set-theme-colorful('light', $c-yellow, false)
+  dynamic-theme-light()
+  x-set-link-with-color($c-red)
+  --theme-border: none
+  --theme-block: var(--theme)
+  --text-code: var(--text-p1)
+
+.colorful[color='error']
+  x-set-theme-colorful('dark', $c-red, false)
+  dynamic-theme-dark()
+  x-set-link-with-color($c-yellow)
+  --theme-border: none
+  --theme-block: var(--theme)
+  --text-code: var(--text-p1)
+
+_dark_tags()
+  .tag-plugin.tag
+    x-set-theme-colorful('dark', $c-theme)
+  .colorful[color='red']
+    x-set-theme-colorful('dark', $c-red)
+  .colorful[color='orange']
+    x-set-theme-colorful('dark', $c-orange)
+  .colorful[color='amber']
+    x-set-theme-colorful('dark', $c-amber)
+  .colorful[color='yellow']
+    x-set-theme-colorful('dark', $c-yellow)
+  .colorful[color='green']
+    x-set-theme-colorful('dark', $c-green)
+  .colorful[color='cyan']
+    x-set-theme-colorful('dark', $c-cyan)
+  .colorful[color='blue']
+    x-set-theme-colorful('dark', $c-blue)
+  .colorful[color='purple']
+    x-set-theme-colorful('dark', $c-purple)
+
+
+:root[data-theme="dark"]
+  _dark_tags()
+:root:not([data-theme])
+  @media (prefers-color-scheme: dark)
+    _dark_tags()
+

package/source/css/_plugins/comments/artalk.styl

@@ -7,11 +7,17 @@
     .atk-header,.atk-editor-user-wrap
       border-bottom: 1px dashed var(--block-border)
       padding: 0.5rem 1rem
+      margin: 0
     .atk-editor-user-wrap:empty
       visibility: hidden
       padding: 0
     >.atk-bottom 
       padding: 8px
+      .atk-state-btn
+        height: 2rem
+        border-radius: 100px
+        .atk-cancel
+          background: none
       .atk-plug-btn
         border-radius: 32px
         height: 2rem
@@ -22,7 +28,7 @@
         min-width: 5em
         trans1 all
         &:hover
-          --at-color-main: $color-hover
+          --at-color-main: var(--accent)
         &:empty
           display: none
   .atk-list-comments-wrap>.atk-comment-wrap
@@ -64,6 +70,9 @@
   .atk-error-layer
     background: none
 
+.with-fancybox .atk-content img:not([atk-emoticon])
+  cursor: zoom-in
+
 .cmt-body
   .artalk, .atk-layer-wrap, .artalk.atk-dark-mode, .atk-layer-wrap.atk-dark-mode
     --at-color-font: var(--text-p1)
@@ -71,20 +80,31 @@
     --at-color-sub: var(--text-p3)
     --at-color-grey: var(--text-p4)
     --at-color-meta: var(--text-p4)
-    --at-color-border: var(--block-border)
-    --at-color-light: var(--theme-link)
+    if $site-background-image
+      --at-color-border: transparent
+    else
+      --at-color-border: var(--block-border)
+    --at-color-light: var(--link)
     --at-color-bg: var(--card)
-    --at-color-bg-transl: var(--block-border)
+    --at-color-bg-transl: var(--card)
     --at-color-bg-grey: var(--block)
-    --at-color-bg-grey-transl: orange
-    --at-color-bg-light: rgba(29, 161, 242, 1)
-    --at-color-main: $color-theme
+    --at-color-bg-grey-transl: var(--block-border)
+    --at-color-bg-light: var(--theme)
+    --at-color-main: var(--theme)
     --at-color-red: $c-red
     --at-color-green: $c-green
     --at-color-gradient: linear-gradient(180deg, transparent, var(--card), 50%, var(--card))
 
 .md-text .atk-comment>.atk-main>.atk-body
   overflow: visible
+.md-text .artalk pre code, .atk-layer-wrap pre code
+  background: none
+.md-text .atk-main-editor>.atk-textarea-wrap>.atk-textarea
+  background: none
+
+.md-text .atk-notify-wrap .atk-notify
+  border-radius: $border-bar
+  margin: 8px
 
 
 // override
@@ -113,4 +133,4 @@
     p
       color: var(--text-p3)
   .atk-content a
-    --at-color-main: var(--theme-link)
+    --at-color-main: var(--link)

package/source/css/_plugins/comments/twikoo.styl

@@ -1,5 +1,5 @@
 .cmt-body.twikoo
-  --twikoo-theme: $color-theme
+  --twikoo-theme: var(--theme)
   margin-top: 1.5rem
 
   .tk-content
@@ -38,15 +38,15 @@
   .el-button:not(.el-button--primary):not(.el-button--text):focus,
   .el-button:not(.el-button--primary):not(.el-button--text):hover
     color: var(--twikoo-theme) !important
-    border-color: var(--theme-link-opa) !important
+    border-color: var(--link-a20) !important
     background-color: var(--block) !important
   .el-button--primary.is-disabled:active,
   .el-button--primary.is-disabled:focus,
   .el-button--primary.is-disabled:hover
-    background-color: var(--theme-link-opa) !important
+    background-color: var(--link-a20) !important
 
   .el-button:focus,.el-button:hover
-    border-color: var(--theme-link-opa)
+    border-color: var(--link-a20)
   .el-button:active
     color: var(--twikoo-theme)
     border-color: var(--twikoo-theme)
@@ -58,8 +58,8 @@
     background-color: var(--twikoo-theme)
     border-color: var(--twikoo-theme) !important
   .el-button--primary:focus,.el-button--primary:hover
-    background: $color-hover
-    border-color: $color-hover !important
+    background: var(--accent)
+    border-color: var(--accent) !important
   .el-button--primary:active
     background: var(--twikoo-theme)
     border-color: var(--twikoo-theme)
@@ -70,11 +70,11 @@
   .el-button--primary.is-disabled:active,
   .el-button--primary.is-disabled:focus,
   .el-button--primary.is-disabled:hover
-    background-color: var(--theme-link-opa) !important
-    border-color: var(--theme-link-opa) !important
+    background-color: var(--link-a20) !important
+    border-color: var(--link-a20) !important
   .el-button--primary.is-plain
     color: var(--twikoo-theme) !important
-    border-color: var(--theme-link-opa)
+    border-color: var(--link-a20)
   .el-button--primary.is-plain:focus,
   .el-button--primary.is-plain:hover
     background: var(--twikoo-theme) !important
@@ -146,7 +146,7 @@
 
   .tk-tag-green
     border: none
-    background-color: var(--theme-link-opa)
+    background-color: var(--link-a20)
     color: var(--twikoo-theme)
     
   .tk-comments-title .tk-comments-count

package/source/css/_plugins/comments/waline.styl

@@ -9,8 +9,8 @@
   --waline-light-grey: #999;
   --waline-dark-grey: #666;
   /* 主题色 */
-  --waline-theme-color: $color-theme;
-  --waline-active-color: $color-hover;
+  --waline-theme-color: var(--theme);
+  --waline-active-color: var(--accent);
   /* 布局颜色 */
   --waline-color: #444;
   --waline-bgcolor: #fff;