css

_config.yml

@@ -171,6 +171,9 @@ plugins:
 
 style:
   darkmode: auto # set 'auto' to enable, set 'false' to disable
+  theme:
+    light: '#f8f8f8'
+    dark: '#20252B'
   animated_avatar:
     animate: auto # auto, always
     background: https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp

layout/_partial/head.ejs

@@ -58,7 +58,7 @@ function og_args() {
   <meta name="HandheldFriendly" content="True" >
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-
+  <meta name="theme-color" content="#f8f8f8">
   <title><%- generate_title() %></title>
 
   <% if (theme.open_graph && theme.open_graph.enable) { %>

source/css/_common/highlight.styl

@@ -49,12 +49,12 @@ article.md .highlight
     padding: 0 1em
     border-width: 0
     margin-left: 0
-    position: sticky
+    // position: sticky // 如果希望行标固定请打开此行；但是如果想在较窄屏幕上拥有较好的阅读体验，建议让行标跟随滚动。
     left: 0
     z-index: 1
     background: var(--block)
     pre .line
-      color: var(--text-p2)
+      color: var(--text-p4)
   .code
     pre
       display: block
@@ -136,7 +136,7 @@ article.md .highlight
 
 
 
-$hl-keyword = #9c27b0
+$hl-keyword = #8959a8
 $hl-blue = #1E80F0
 $hl-cyan = #17AFCA
 $hl-green = #3FA33F
@@ -168,13 +168,14 @@ pre
 
   // 注释
   .comment
-    color: var(--text-p3)
+    color: var(--text-p4)
+    font-style: italic
 
   .keyword, .meta-keyword, .javascript .function
     color: $hl-keyword
 
   .type, .built_in, .tag .name
-    color: $color-md-light-blue
+    color: $color-md-blue
 
   .variable, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo
     color: $hl-amber
@@ -214,14 +215,8 @@ pre
   .line
     .meta
       color: $hl-keyword
-    .meta-string,.string
-      color: $hl-orange
     .class
       color: $hl-text
-      .title
-        color: $hl-blue
-    .comment
-      color: $hl-green
 
 .highlight.json
   .line

source/css/_custom.styl

@@ -6,22 +6,23 @@ $color-link = #2196f3
 $color-button = #1BCDFC
 $color-hover = #ff5722
 $color-inner = #fff
-$color-inlinecode = #ff7043
 $color-cat = #FF7844
 $color-cat-hover = darken($color-cat, 20)
 
 // 浅色
-$light-site-bg = #f8f8f8
+$light-site-bg = convert(hexo-config('style.theme.light'))
 $light-block = #f2f2f2
 $light-title = #000
-$light-text = #222
+$light-text = #444
+$light-code = #111
 $light-card = white
 
 // 深色
-$dark-site-bg = #20252B
+$dark-site-bg = convert(hexo-config('style.theme.dark'))
 $dark-block = #2E353D
 $dark-title = #fff
-$dark-text = #eee
+$dark-text = #ddd
+$dark-code = #ff7043
 $dark-card = #40454B
 
 // 移动端深色背景（OLED调成纯黑可以省电）

source/css/_defines/theme.styl

@@ -7,7 +7,9 @@
   --text-p1: $light-text
   --text-p2: mix($light-text, $light-site-bg, 80)
   --text-p3: mix($light-text, $light-site-bg, 60)
+  --text-p4: mix($light-text, $light-site-bg, 35)
   --text-meta: mix($light-text, $light-site-bg, 20)
+  --text-code: $light-code
   --card: $light-card
   --theme-highlight: darken($color-theme, 5)
   --theme-bg: mix($color-theme, $light-card, 10)
@@ -24,7 +26,9 @@ if hexo-config('style.darkmode') == 'auto'
       --text-p1: $dark-text
       --text-p2: mix($dark-text, $dark-site-bg, 70)
       --text-p3: mix($dark-text, $dark-site-bg, 45)
+      --text-p4: mix($dark-text, $dark-site-bg, 35)
       --text-meta: mix($dark-text, $dark-site-bg, 30)
+      --text-code: $dark-code
       --card: $dark-card
       --theme-highlight: $color-theme
       --theme-bg: mix($color-theme, $dark-card, 10)

source/css/_layout/md.styl

@@ -68,14 +68,16 @@ article.md p
 
 // code
 article.md code
-  color: $color-inlinecode
+  -webkit-font-smoothing: auto
+  -moz-osx-font-smoothing: auto
+  color: var(--text-code)
   font-family: $ff-code
   word-break: break-all
-  font-size: inherit
+  font-size: 85%
   background: var(--block)
-  padding: 2px
+  padding: .2em .4em
   border-radius: 2px
-  border: 1px solid var(--block-border)
+  // border: 1px solid var(--block-border)
 
 // div
 article.md>div