暗黑模式 毛玻璃效果

_config.yml

@@ -35,9 +35,6 @@ csp:
     style-src 'self' https: 'unsafe-inline' *;
   "
   # 可以使用自动程序替换默认的 'unsafe-inline' 和 * 生成更严格的内容安全策略.
-  # hexo_fliter_sha256 用于 hexo g 时替换 'unsafe-inline' 生成 script-src 'sha256-' , 只适用于外层不含有压缩工具得场景.
-  # 如果外层含有压缩工具会改变 hash 导致无效,hexo_fliter_sha256 需设为false, 使用 gulp 方案.
-  hexo_fliter_sha256: false
   # 另可以参考官网的 gulp 方案.
   # gulpfile.js https://github.com/volantis-x/community/blob/main/gulpfile.js
 ############################### CDN ###############################
@@ -1154,11 +1151,11 @@ custom_css:
   navbar:
     height: 64px
     width: auto # auto, max
-    effect: [shadow, blur] # [shadow, floatable, blur]
+    effect: [shadow, floatable, blur] # [shadow, floatable, blur]
   sidebar:
-    effect: [shadow] # [shadow, floatable, blur]
+    effect: [shadow, floatable, blur] # [shadow, floatable, blur]
   body:
-    effect: [shadow] # [shadow, floatable, blur]
+    effect: [shadow, floatable, blur] # [shadow, floatable, blur]
     highlight:
       language: true # show language of codeblock
       grayscale: false # Enable grayscale effect

source/css/_defines/color.styl

@@ -65,8 +65,29 @@ $color-list-hl = convert(hexo-config('color_scheme.light.list_hl'))
 $color-meta = convert(hexo-config('color_scheme.light.meta'))
 
 // 深色配色方案在 darkmode.styl 中按需加载
-
-
+$color-dark-site-body = convert(hexo-config('color_scheme.dark.site_bd'))                    // Dark Grey 1
+$color-dark-read-bkg = convert(hexo-config('color_scheme.dark.site_bg'))
+$color-dark-read-post = convert(hexo-config('color_scheme.dark.card'))
+$color-dark-site-bg = convert(hexo-config('color_scheme.dark.site_bg'))                      // Dark Grey 2
+$color-dark-site-inner = convert(hexo-config('color_scheme.dark.site_inner'))
+$color-dark-site-footer = convert(hexo-config('color_scheme.dark.site_footer'))
+$color-dark-card = convert(hexo-config('color_scheme.dark.card'))                            // Dark Grey 3
+$color-dark-text = convert(hexo-config('color_scheme.dark.text'))
+
+$color-dark-block = convert(hexo-config('color_scheme.dark.block'))                           // Dark Grey 4
+$color-dark-codeblock = convert(hexo-config('color_scheme.dark.codeblock'))
+$color-dark-inlinecode = convert(hexo-config('color_scheme.dark.inlinecode'))
+$color-dark-h1 = convert(hexo-config('color_scheme.dark.h1'))
+$color-dark-h2 = convert(hexo-config('color_scheme.dark.h2'))
+$color-dark-h3 = convert(hexo-config('color_scheme.dark.h3'))
+$color-dark-h4 = convert(hexo-config('color_scheme.dark.h4'))
+$color-dark-h5 = convert(hexo-config('color_scheme.dark.h5'))
+$color-dark-h6 = convert(hexo-config('color_scheme.dark.h6'))
+$color-dark-p = convert(hexo-config('color_scheme.dark.p'))
+$color-dark-list = convert(hexo-config('color_scheme.dark.list'))
+$color-dark-list-hl = convert(hexo-config('color_scheme.dark.list_hl'))
+$color-dark-meta = convert(hexo-config('color_scheme.dark.meta'))
+$color-dark-link = convert(hexo-config('color_scheme.dark.meta'))
 
 bgcolor($c, $mix = 10)
   return mix($c, $color-card, $mix)

source/css/_first/dark_first.styl

@@ -1,37 +1,37 @@
 // 首屏加载的暗黑模式
 fitst_dark()
-  // Base Dark Color https://www.maijisheji.com/2094.html https://ant.design/docs/spec/colors-cn
-  --color-site-body: convert(hexo-config('color_scheme.dark.site_bd'))                    // Dark Grey 1
-  --color-read-bkg: convert(hexo-config('color_scheme.dark.site_bg'))
-  --color-read-post: convert(hexo-config('color_scheme.dark.card'))
-  --color-site-bg: convert(hexo-config('color_scheme.dark.site_bg'))                      // Dark Grey 2
-  --color-site-inner: convert(hexo-config('color_scheme.dark.site_inner'))
-  --color-site-footer: convert(hexo-config('color_scheme.dark.site_footer'))
-  --color-card: convert(hexo-config('color_scheme.dark.card'))                            // Dark Grey 3
-  --color-text: convert(hexo-config('color_scheme.dark.text'))
+  // Base Dark Color
+  --color-site-body: $color-dark-site-body
+  --color-read-bkg: $color-dark-read-bkg
+  --color-read-post: $color-dark-read-post
+  --color-site-bg: $color-dark-site-bg
+  --color-site-inner: $color-dark-site-inner
+  --color-site-footer: $color-dark-site-footer
+  --color-card: $color-dark-card
+  --color-text: $color-dark-text
 
-  --color-block: convert(hexo-config('color_scheme.dark.block'))                           // Dark Grey 4
-  --color-codeblock: convert(hexo-config('color_scheme.dark.codeblock'))
-  --color-inlinecode: convert(hexo-config('color_scheme.dark.inlinecode'))
-  --color-h1: convert(hexo-config('color_scheme.dark.h1'))
-  --color-h2: convert(hexo-config('color_scheme.dark.h2'))
-  --color-h3: convert(hexo-config('color_scheme.dark.h3'))
-  --color-h4: convert(hexo-config('color_scheme.dark.h4'))
-  --color-h5: convert(hexo-config('color_scheme.dark.h5'))
-  --color-h6: convert(hexo-config('color_scheme.dark.h6'))
-  --color-p: convert(hexo-config('color_scheme.dark.p'))
-  --color-list: convert(hexo-config('color_scheme.dark.list'))
-  --color-list-hl: convert(hexo-config('color_scheme.dark.list_hl'))
-  --color-meta: convert(hexo-config('color_scheme.dark.meta'))
-  --color-link: convert(hexo-config('color_scheme.dark.meta'))
+  --color-block: $color-dark-block
+  --color-codeblock: $color-dark-codeblock
+  --color-inlinecode: $color-dark-inlinecode
+  --color-h1: $color-dark-h1
+  --color-h2: $color-dark-h2
+  --color-h3: $color-dark-h3
+  --color-h4: $color-dark-h4
+  --color-h5: $color-dark-h5
+  --color-h6: $color-dark-h6
+  --color-p: $color-dark-p
+  --color-list: $color-dark-list
+  --color-list-hl: $color-dark-list-hl
+  --color-meta: $color-dark-meta
+  --color-link: $color-dark-link
 
   img
     filter: brightness(convert(hexo-config('color_scheme.dark.brightness'))) !important
   //header
-  #wrapper .title
-    color: var(--color-meta) !important
   .blur
-    background: var(--color-site-bg) !important
+    background: rgba($color-dark-site-bg, .9) !important
+  .white-box.blur
+    background: rgba($color-dark-card, .9) !important
   .nav-main
     .u-search-input
       background: var(--color-card) !important
@@ -57,8 +57,10 @@ fitst_dark()
     background: var(--color-card) !important
   #u-search .modal-body .modal-results .result:hover
     background: var(--color-block) !important
-  .u-search-input:focus,.u-search-input:hover
+  .u-search-input:hover
     background: var(--color-block) !important
+  .u-search-input:focus
+    background: var(--color-site-body) !important
   //phone search
   .l_header .m_search
     @media screen and (max-width: $device-mobile)

source/css/_style/_plugins/_dark/dark_plugins.styl

@@ -16,9 +16,11 @@ img,
 //side
 .widget.blogger .content .social-wrapper a.social:hover
   background: var(--color-card)
+.widget >.content ul.entry a .badge, .widget >.content ul.popular-posts a .badge
+  color: unset !important
 .content
   color: var(--color-p)
-.content a
+.widget >.content a
   color: var(--color-p) !important
   &:hover
     color: var(--color-list-hl) !important
@@ -96,6 +98,8 @@ if hexo-config('plugins.aplayer.enable')
     border-top: 1px solid var(--color-card)
   .aplayer.aplayer-withlist .aplayer-info
     border-bottom: 1px solid var(--color-block)
+  .aplayer .aplayer-notice
+    background-color: var(--color-site-bg) !important
 
 if hexo-config('comments.service')=='twikoo'
   .OwO