style: CSS样式及配色优化

_config.yml

@@ -30,12 +30,6 @@ social:
   #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
   #Instagram: https://instagram.com/yourname || instagram
 
-# Code Highlight theme
-# Available value:
-#   normal | night | night eighties | night blue | night bright
-# https://github.com/chriskempson/tomorrow-theme
-highlight_theme: normal
-
 # Valine.
 # You can get your appid and appkey from https://leancloud.cn
 # more info please open https://github.com/xCss/Valine
@@ -62,7 +56,7 @@ busuanzi_count:
 # Local Search
 # Dependencies: https://github.com/theme-next/hexo-generator-searchdb
 local_search:
-  enable: false
+  enable: true
   # If auto, trigger search by changing input.
   # If manual, trigger search by pressing enter key or search button.
   trigger: auto

languages/en.yml

@@ -15,7 +15,7 @@ rss_feed: RSS Feed
 category: Category
 tag: Tag
 home: Home
-archive: Archives
+archives: Archives
 about: About
 site_uv: UV
 site_pv: PV

languages/zh-CN.yml

@@ -15,7 +15,7 @@ rss_feed: RSS Feed
 category: 分类
 tag: 标签
 home: 首页
-archive: 归档
+archives: 归档
 about: 关于
 site_uv: 访问人数
 site_pv: 总访问量

layout/article-content.ejs

@@ -7,7 +7,7 @@
         <%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
     </div>
 
-    <div class="article-content markdown">
+    <div class="article-content markdown-body">
         <%- page.content %>
     </div>
 

layout/home-content.ejs

@@ -8,7 +8,7 @@
                     <a class="article-title-hover-animation" href="<%- url_for(post.path) %>"><%= post.title %></a>
                 </h3>
 
-                <div class="home-article-content markdown">
+                <div class="home-article-content markdown-body">
                     <% if (post.excerpt) { %>
                         <%- post.excerpt %>
                     <% } else { %>

layout/page.ejs

@@ -4,7 +4,7 @@
     </div>
 
     <div class="page-middle">
-        <main class="main-content">
+        <main class="main-content normal-code-theme">
             <% if (is_home()) { %>
                 <%- partial('home-content') %>
 

source/css/highlight/diff.styl

@@ -1,8 +0,0 @@
-$highlight_theme = hexo-config("highlight_theme")
-
-if $highlight_theme == "normal"
-  $highlight-deletion     = #fdd
-  $highlight-addition     = #dfd
-else
-  $highlight-deletion     = #008000
-  $highlight-addition     = #800000

source/css/highlight/theme.styl

@@ -1,99 +0,0 @@
-$highlight_theme = hexo-config("highlight_theme")
-
-if $highlight_theme == "normal"
-  $highlight-background   = #f7f7f7
-  $highlight-current-line = #efefef
-  $highlight-selection    = #d6d6d6
-  $highlight-foreground   = #4d4d4c
-  $highlight-comment      = #8e908c
-  $highlight-red          = #c82829
-  $highlight-orange       = #f5871f
-  $highlight-yellow       = #eab700
-  $highlight-green        = #718c00
-  $highlight-aqua         = #3e999f
-  $highlight-blue         = #4271ae
-  $highlight-purple       = #8959a8
-  $highlight-gutter       = {
-    color: #869194,
-    bg-color: #eff2f3
-  }
-
-if $highlight_theme == "night"
-  $highlight-background   = #1d1f21
-  $highlight-current-line = #282a2e
-  $highlight-selection    = #373b41
-  $highlight-foreground   = #c5c8c6
-  $highlight-comment      = #969896
-  $highlight-red          = #cc6666
-  $highlight-orange       = #de935f
-  $highlight-yellow       = #f0c674
-  $highlight-green        = #b5bd68
-  $highlight-aqua         = #8abeb7
-  $highlight-blue         = #81a2be
-  $highlight-purple       = #b294bb
-  $highlight-gutter       = {
-    color: lighten($highlight-background, 50%),
-    bg-color: darken($highlight-background, 100%)
-  }
-
-if $highlight_theme == "night eighties"
-  $highlight-background   = #2d2d2d
-  $highlight-current-line = #393939
-  $highlight-selection    = #515151
-  $highlight-foreground   = #cccccc
-  $highlight-comment      = #999999
-  $highlight-red          = #f2777a
-  $highlight-orange       = #f99157
-  $highlight-yellow       = #ffcc66
-  $highlight-green        = #99cc99
-  $highlight-aqua         = #66cccc
-  $highlight-blue         = #6699cc
-  $highlight-purple       = #cc99cc
-  $highlight-gutter       = {
-    color: $highlight-comment,
-    bg-color: darken($highlight-background, 40%)
-  }
-
-if $highlight_theme == "night blue"
-  $highlight-background   = #002451
-  $highlight-current-line = #00346e
-  $highlight-selection    = #003f8e
-  $highlight-foreground   = #ffffff
-  $highlight-comment      = #7285b7
-  $highlight-red          = #ff9da4
-  $highlight-orange       = #ffc58f
-  $highlight-yellow       = #ffeead
-  $highlight-green        = #d1f1a9
-  $highlight-aqua         = #99ffff
-  $highlight-blue         = #bbdaff
-  $highlight-purple       = #ebbbff
-  $highlight-gutter       = {
-    color: $highlight-comment,
-    bg-color: darken($highlight-background, 60%)
-  }
-
-if $highlight_theme == "night bright"
-  $highlight-background   = #000000
-  $highlight-current-line = #2a2a2a
-  $highlight-selection    = #424242
-  $highlight-foreground   = #eaeaea
-  $highlight-comment      = #969896
-  $highlight-red          = #d54e53
-  $highlight-orange       = #e78c45
-  $highlight-yellow       = #e7c547
-  $highlight-green        = #b9ca4a
-  $highlight-aqua         = #70c0b1
-  $highlight-blue         = #7aa6da
-  $highlight-purple       = #c397d8
-  $highlight-gutter       = {
-    color: lighten($highlight-background, 40%),
-    bg-color: lighten($highlight-background, 16%)
-  }
-
-
-$code-font-size = 0.9em;
-$line-height-code-block = 1.5em;
-$code-foreground = #ff7600;
-$code-background = #f8f8f8;
-$code-border-radius = 2px;
-$code-font-family = consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace;

source/css/layout/_partial/header.styl

@@ -143,7 +143,6 @@
       flex-direction: column;
       justify-content: flex-start;
       align-items: center;
-      list-style-type: none;
 
       .drawer-menu-item {
 
@@ -225,7 +224,7 @@
 
 .header-wrapper-shrink {
   background: var(--background-color);
-  box-shadow: 0 1px 2px $border-color;
+  box-shadow: 0 1px 2px var(--border-color);
 
   .header-content {
 
@@ -268,4 +267,8 @@
     display: block !important;
   }
 
+  .header-content {
+    width: $main-content-width * 1.2 !important;
+  }
+
 }

source/css/layout/common/basic.styl

@@ -10,11 +10,13 @@ html, body {
   font-family: $default-font-family;
   font-weight: $default-font-weight;
   line-height: $default-font-line-height;
-  -webkit-font-smoothing antialiased;
+  //-webkit-font-smoothing antialiased;
   transition: all 0.5s ease;
 }
 
-ul, li, ol {
+ul,
+li,
+ol {
   padding: 0;
   margin: 0;
   list-style: none;
@@ -29,17 +31,13 @@ button {
   background: transparent;
 }
 
-p {
-  line-height: 2em;
-}
-
 a {
   text-decoration: none;
   color: var(--normal-text-color);
 }
 
 a:hover, a:active {
-  color: $primary-color;
+  color: var(--primary-color);
 }
 
 
@@ -49,15 +47,15 @@ a:hover, a:active {
   position: relative;
   text-align: center;
   cursor: pointer;
-  color: $button-color;
+  color: var(--third-text-color);
-  border: 1px solid $border-color;
+  border: 1px solid var(--third-text-color);
   white-space: nowrap;
   border-radius: 10em;
   padding: 0.5em 1em;
 
   &:hover {
-    color: $primary-color;
+    color: var(--primary-color);
-    border: 1px solid $primary-color;
+    border: 1px solid var(--primary-color);
   }
 }
 
@@ -92,19 +90,7 @@ a:hover, a:active {
 }
 
 
-// Clearfix. http://nicolasgallagher.com/micro-clearfix-hack/
-clearfix() {
-  &:before,
-  &:after {
-    content: " ";
-    display: table;
-  }
-  &:after {
-    clear: both;
-  }
-}
-
 ::selection {
-  background: $primary-color;
+  background: var(--selection-color);
   color: #fff;
 }

source/css/layout/common/highlight/code-theme.styl

@@ -0,0 +1,70 @@
+@require '../variables.styl'
+
+$code-foreground = lighten($normal-text-color, 2%)
+$code-background = darken($background-color, 5%)
+$highlight-foreground = lighten($normal-text-color, 2%)
+$highlight-background = darken($background-color, 2%)
+$highlight-gutter-color = lighten($normal-text-color, 5%)
+$highlight-gutter-bg-color = darken($background-color, 5%)
+$highlight-comment = #8e908c
+$highlight-red = #c82829
+$highlight-orange = #f5871f
+$highlight-yellow = #eab700
+$highlight-green = #718c00
+$highlight-aqua = #3e999f
+$highlight-blue = #4271ae
+$highlight-purple = #8959a8
+$highlight-deletion = #fdd
+$highlight-addition = #dfd
+
+$night-code-foreground = lighten($dark-normal-text-color, 2%)
+$night-code-background = darken($dark-background-color, 10%)
+$night-highlight-foreground = lighten($dark-normal-text-color, 2%)
+$night-highlight-background = darken($dark-background-color, 8%)
+$night-highlight-gutter-color = lighten($dark-normal-text-color, 5%)
+$night-highlight-gutter-bg-color = darken($dark-background-color, 10%)
+$night-highlight-comment = #969896
+$night-highlight-red = #cc6666
+$night-highlight-orange = #de935f
+$night-highlight-yellow = #f0c674
+$night-highlight-green = #b5bd68
+$night-highlight-aqua = #8abeb7
+$night-highlight-blue = #81a2be
+$night-highlight-purple = #b294bb
+$night-highlight-deletion = #008000
+$night-highlight-addition = #800000
+
+.normal-code-theme {
+  --code-foreground: $code-foreground;
+  --code-background: $code-background;
+  --highlight-background: $highlight-background;
+  --highlight-foreground: $highlight-foreground;
+  --highlight-comment: $highlight-comment;
+  --highlight-red: $highlight-red;
+  --highlight-orange: $highlight-orange;
+  --highlight-yellow: $highlight-yellow;
+  --highlight-green: $highlight-green;
+  --highlight-aqua: $highlight-aqua;
+  --highlight-blue: $highlight-blue;
+  --highlight-purple: $highlight-purple;
+  --highlight-gutter-color: $highlight-gutter-color;
+  --highlight-gutter-bg-color: $highlight-gutter-bg-color;
+}
+
+
+.night-code-theme {
+  --code-foreground: $night-code-foreground;
+  --code-background: $night-code-background;
+  --highlight-background: $night-highlight-background;
+  --highlight-foreground: $night-highlight-foreground;
+  --highlight-comment: $night-highlight-comment;
+  --highlight-red: $night-highlight-red;
+  --highlight-orange: $night-highlight-orange;
+  --highlight-yellow: $night-highlight-yellow;
+  --highlight-green: $night-highlight-green;
+  --highlight-aqua: $night-highlight-aqua;
+  --highlight-blue: $night-highlight-blue;
+  --highlight-purple: $night-highlight-purple;
+  --highlight-gutter-color: $night-highlight-gutter-color;
+  --highlight-gutter-bg-color: $night-highlight-gutter-bg-color;
+}

source/css/layout/common/highlight/highlight.styl

@@ -1,24 +1,41 @@
-@require "theme"
+@require "code-theme.styl"
-@require "diff"
 
 $code-block {
   overflow: auto;
   margin: 20px 0;
   padding: 0;
-  font-size $code-font-size;
+  font-size 1em;
-  color: $highlight-foreground;
+  color: var(--highlight-foreground);
-  background: $highlight-background;
+  background: var(--highlight-background);
-  line-height: $line-height-code-block;
+  line-height: 1.6em;
+  transition: all 0.5s ease;
+
+  &::-webkit-scrollbar {
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: rgba(0, 0, 0, 0.2)
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
 }
 
-pre, code { font-family: $code-font-family; }
+
+pre, code {
+  font-family: "Source Code Pro", consolas, Menlo;
+}
 
 code {
-  padding: 4px;
+  padding: 5px;
   word-wrap: break-word;
-  color: $code-foreground;
+  color: var(--code-foreground);
-  background: $code-background;
+  background: var(--code-background);
-  border-radius: $code-border-radius;
+  border-radius: 2px;
   font-size: $code-font-size;
 }
 
@@ -28,7 +45,7 @@ pre {
 
   code {
     padding: 0;
-    color: $highlight-foreground;
+    color: var(--highlight-foreground);
     background: none;
     text-shadow: none;
   }
@@ -36,7 +53,7 @@ pre {
 
 .highlight {
   @extend $code-block;
-  border-radius: 1px
+  border-radius: 1px;
 
   pre {
     border: none;
@@ -57,36 +74,39 @@ pre {
   }
 
   figcaption {
-    clearfix();
     font-size: 1em;
-    color: $highlight-foreground;
+    color: var(--highlight-foreground);
     line-height: 1em;
     margin-bottom: 1em;
 
     a {
       float: right;
-      color: $highlight-foreground;
+      color: var(--highlight-foreground);
 
-      &:hover { border-bottom-color: $highlight-foreground; }
+      &:hover {
+        border-bottom-color: var(--highlight-foreground);
+      }
     }
   }
 
   .gutter pre {
-    padding-left: 10px
+    padding-left: 10px;
-    padding-right: 10px
+    padding-right: 10px;
-    color: $highlight-gutter.color
+    color: var(--highlight-gutter-color);
-    text-align: center
+    text-align: center;
-    background-color: $highlight-gutter.bg-color
+    background-color: var(--highlight-gutter-bg-color);
   }
 
   .code pre {
     width: 100%
     padding-left: 10px
     padding-right: 10px
-    background-color: $highlight-background
+    background-color: var(--highlight-background)
   }
 
-  .line { height: 20px; }
+  .line {
+    height: 20px;
+  }
 }
 
 
@@ -100,17 +120,29 @@ pre {
 .gist table {
   width: auto;
 
-  td { border: none; }
+  td {
+    border: none;
+  }
 }
 
 // For diff highlight
-pre .deletion { background: $highlight-deletion; }
+pre .deletion {
-pre .addition { background: $highlight-addition; }
+  background: var(--highlight-deletion);
-pre .meta     { color: $highlight-purple; }
+}
+
+pre .addition {
+  background: var(--highlight-addition);
+}
+
+pre .meta {
+  color: var(--highlight-purple);
+}
 
 pre {
 
-  .comment { color: $highlight-comment; }
+  .comment {
+    color: var(--highlight-comment);
+  }
 
   .variable
   .attribute
@@ -124,7 +156,7 @@ pre {
   .css .id
   .css .class
   .css .pseudo {
-    color: $highlight-red;
+    color: var(--highlight-red);
   }
 
   .number
@@ -134,7 +166,7 @@ pre {
   .params
   .constant
   .command {
-    color: $highlight-orange;
+    color: var(--highlight-orange);
   }
 
   .ruby .class .title
@@ -148,12 +180,12 @@ pre {
   .special
   .number
   .formula {
-    color: $highlight-green;
+    color: highlight-green;
   }
 
   .title
   .css .hexcolor {
-    color: $highlight-aqua;
+    color: var(--highlight-aqua);
   }
 
   .function
@@ -164,12 +196,12 @@ pre {
   .perl .sub
   .javascript .title
   .coffeescript .title {
-    color: $highlight-blue;
+    color: var(--highlight-blue);
   }
 
   .keyword
   .javascript .function {
-    color: $highlight-purple;
+    color: var(--highlight-purple);
   }
 
 }

source/css/layout/common/markdown.styl

@@ -1,17 +1,20 @@
 @require 'variables.styl'
 
-.markdown {
+.markdown-body {
 
   blockquote {
     border-left: 5px solid var(--normal-text-color);
     margin: 0;
     padding: 0 0 0 10px;
-    background: $border-color;
+    color : var(--third-text-color);
   }
 
+  p {
+    line-height: 2em;
+  }
 
   a {
-    color: $primary-color;
+    color: var(--primary-color);
   }
 
 
@@ -23,39 +26,39 @@
   h1 {
     color: var(--second-text-color);
     font-size: 2.2em;
-    font-weight: 700;
+    font-weight: 600;
   }
 
 
   h2 {
     color: var(--second-text-color);
     font-size: 2em;
-    font-weight: 650;
+    font-weight: 600;
   }
 
   h3 {
     color: var(--second-text-color);
     font-size: 1.8em;
-    font-weight: 600;
+    font-weight: 550;
   }
 
 
   h4 {
     color: var(--second-text-color);
     font-size: 1.6em;
-    font-weight: 550;
+    font-weight: 500;
   }
 
   h5 {
     color: var(--second-text-color);
     font-size: 1.4em;
-    font-weight: 500;
+    font-weight: 450;
   }
 
   h6 {
     color: var(--second-text-color);
     font-size: 1.2em;
-    font-weight: 500;
+    font-weight: 400;
   }
 
 
@@ -63,23 +66,23 @@
     padding: 2px;
     margin: 2px 0;
     width: 100%;
-    border: 1px solid $border-color;
+    border: 1px solid var(--border-color);
   }
 
   table:not(figure.highlight) {
 
-    border: solid $border-color;
+    border: solid var(--border-color);
     border-width: 1px 0 0 1px;
 
     thead {
 
-      background: $border-color;
+      background: var(--border-color);
 
       tr {
         th {
           margin: 0;
           padding: 4px;
-          border: solid $border-color;
+          border: solid var(--border-color);
           border-width: 0 1px 1px 0;
         }
       }
@@ -92,7 +95,7 @@
 
         td {
           padding: 4px;
-          border: solid $border-color;
+          border: solid var(--border-color);
           border-width: 0 1px 1px 0;
         }
       }

source/css/layout/common/variables.styl

@@ -7,7 +7,7 @@
 // ===============================
 $header-height = 100px; // 头部默认高度
 $header-shrink-height = 60px; // 头部收缩高度
-$main-content-width = 70%;      // 中间内容区域宽度
+$main-content-width = 66%; // 中间内容区域宽度
 $media-max-width = 760px; // 媒体查询最大宽度
 
 // ===============================
@@ -24,22 +24,25 @@ $z-index-6 = 1006;
 // ===============================
 // color
 // ===============================
-$primary-color = #ce3e29; // 主题颜色
+// normal mode color
-$background-color = #fff; // 背景颜色
+$primary-color = #30a103; // 主题颜色
-$first-text-color = #2c3e50; // 第一文本颜色
+$background-color = #fcfcfc; // 背景颜色
-$second-text-color = #525e6b; // 第二文本颜色
+$normal-text-color = #515061; // 通用文本颜色（默认字体颜色）
-$third-text-color = #9ca3ad; // 第三文本颜色
+$first-text-color = darken($normal-text-color, 20%); // 第一文本颜色
-$normal-text-color = #616161; // 通用文本颜色（默认字体颜色）
+$second-text-color = darken($normal-text-color, 10%); // 第二文本颜色
-$border-color = #eee; // 边框颜色
+$third-text-color = lighten($normal-text-color, 20%); // 第三文本颜色
+$border-color = darken($background-color, 15%); // 边框颜色
+$selection-color = lighten($primary-color, 8%);
 
 // dark mode color
-$dark-background-color = #333; // 背景颜色
+$dark-primary-color = $primary-color;
-$dark-primary-color = #ce3e29; // 主题颜色
+$dark-background-color = #444;
-$dark-first-text-color = #eee; // 第一文本颜色
+$dark-normal-text-color = #bbb;
-$dark-second-text-color = #ccc; // 第二文本颜色
+$dark-first-text-color = lighten($dark-normal-text-color, 30%);
-$dark-third-text-color = #aaa; // 第三文本颜色
+$dark-second-text-color = lighten($dark-normal-text-color, 20%);
-$dark-normal-text-color = #bbb; // 通用文本颜色（默认字体颜色）
+$dark-third-text-color = darken($dark-normal-text-color, 20%);
-$dark-border-color = #888; // 边框颜色
+$dark-border-color = lighten($dark-background-color, 15%);
+$dark-selection-color = $selection-color;
 
 
 // ===============================
@@ -48,7 +51,8 @@ $dark-border-color = #888; // 边框颜色
 //$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei';
 //$default-font-family = 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light';
 //$default-font-family = 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif;
-$default-font-family = "Exo 2", "Trebuchet MS", "Helvetica", "Arial";
+//$default-font-family = "Exo 2", "Trebuchet MS", "Helvetica", "Arial";
+$default-font-family = Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 $default-font-size = 14px;
 $default-font-line-height = 20px;
 $default-font-weight = 400;
@@ -62,6 +66,7 @@ $default-font-weight = 400;
   --third-text-color: $third-text-color;
   --normal-text-color: $normal-text-color;
   --border-color: $border-color;
+  --selection-color: $selection-color;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -72,7 +77,8 @@ $default-font-weight = 400;
     --second-text-color: $dark-second-text-color;
     --third-text-color: $dark-third-text-color;
     --normal-text-color: $dark-normal-text-color;
-    --dark-border-color: $dark-border-color;
+    --border-color: $dark-border-color;
+    --selection-color: $dark-selection-color;
   }
 }
 
@@ -84,7 +90,8 @@ $default-font-weight = 400;
   --second-text-color: $dark-second-text-color;
   --third-text-color: $dark-third-text-color;
   --normal-text-color: $dark-normal-text-color;
-  --dark-border-color: $dark-border-color;
+  --border-color: $dark-border-color;
+  --selection-color: $dark-selection-color;
 }
 
 .light-mode {
@@ -95,4 +102,5 @@ $default-font-weight = 400;
   --third-text-color: $third-text-color;
   --normal-text-color: $normal-text-color;
   --border-color: $border-color;
+  --selection-color: $selection-color;
 }

source/css/layout/page.styl

@@ -50,6 +50,12 @@
   }
 
   .sidebar-tools {
-    top: $header-shrink-height + 30px !important;
+    top: $header-shrink-height + 50px !important;
+  }
+}
+
+@media screen and (max-width: $media-max-width) {
+  .main-content {
+    width: $main-content-width * 1.2 !important;
   }
 }

source/css/style.styl

@@ -1,8 +1,6 @@
 @import "libs/font-awesome.min.css"
 @import "layout/common/animated.styl"
 @import "layout/common/basic.styl"
-@import "layout/common/markdown.styl"
-@import "highlight"
 @import "layout/page.styl"
 @import "layout/_partial/local-search.styl"
 @import "layout/_partial/valine.styl"
@@ -15,3 +13,5 @@
 @import "layout/article-content.styl"
 @import "layout/category-content.styl"
 @import "layout/tag-content.styl"
+@import "layout/common/markdown.styl"
+@import "layout/common/highlight/highlight.styl"

source/js/toggle-mode.js

@@ -3,6 +3,8 @@
  */
 const modeToggleBtn = document.querySelector('.mode-toggle');
 const iconDom = modeToggleBtn.querySelector('i');
+// const articleContent = document.querySelector('.article-content');
+const articleContent = document.querySelector('.main-content');
 const modeConfig = JSON.parse(localStorage.getItem('ils_x'));
 if (modeConfig) {
 
@@ -10,20 +12,24 @@ if (modeConfig) {
 
         if (modeConfig.isDark) {
             document.body.classList.remove('light-mode');
+            articleContent.classList.remove('night-code-theme');
             iconDom.className = 'fa fa-lightbulb-o';
         } else {
             iconDom.className = 'fa fa-moon-o';
             document.body.classList.add('light-mode');
+            articleContent.classList.add('night-code-theme');
         }
 
     } else {
 
         if (modeConfig.isDark) {
             document.body.classList.remove('dark-mode');
+            articleContent.classList.remove('night-code-theme');
             iconDom.className = 'fa fa-moon-o';
         } else {
             document.body.classList.add('dark-mode');
             iconDom.className = 'fa fa-lightbulb-o';
+            articleContent.classList.add('night-code-theme');
         }
 
     }
@@ -33,7 +39,14 @@ if (modeConfig) {
 const setItemUtil = (modeClass, prefersColorScheme) => {
     document.body.classList.toggle(modeClass);
     const isDark = document.body.className.indexOf(modeClass) === -1;
-    iconDom.className = isDark ? 'fa fa-moon-o' : 'fa fa-lightbulb-o';
+
+    if (isDark) {
+        iconDom.className = 'fa fa-moon-o';
+        articleContent.classList.remove('night-code-theme');
+    } else {
+        iconDom.className = 'fa fa-lightbulb-o';
+        articleContent.classList.add('night-code-theme');
+    }
     localStorage.setItem('ils_x', JSON.stringify(
         {
             prefersColorScheme: prefersColorScheme,