diff --git a/_config.yml b/_config.yml index 2eb29f7..137a0ce 100644 --- a/_config.yml +++ b/_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 diff --git a/languages/en.yml b/languages/en.yml index 3616d63..bf8dbb1 100644 --- a/languages/en.yml +++ b/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 \ No newline at end of file diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index 420d6de..5bfad9f 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -15,7 +15,7 @@ rss_feed: RSS Feed category: 分类 tag: 标签 home: 首页 -archive: 归档 +archives: 归档 about: 关于 site_uv: 访问人数 site_pv: 总访问量 \ No newline at end of file diff --git a/layout/article-content.ejs b/layout/article-content.ejs index 63b4620..7c6fd36 100644 --- a/layout/article-content.ejs +++ b/layout/article-content.ejs @@ -7,7 +7,7 @@ <%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %> -
+
<%- page.content %>
diff --git a/layout/home-content.ejs b/layout/home-content.ejs index a252541..341d1f5 100644 --- a/layout/home-content.ejs +++ b/layout/home-content.ejs @@ -8,7 +8,7 @@ <%= post.title %> -
+
<% if (post.excerpt) { %> <%- post.excerpt %> <% } else { %> diff --git a/layout/page.ejs b/layout/page.ejs index 765dae6..684be4c 100644 --- a/layout/page.ejs +++ b/layout/page.ejs @@ -4,7 +4,7 @@
-
+
<% if (is_home()) { %> <%- partial('home-content') %> diff --git a/source/css/highlight/diff.styl b/source/css/highlight/diff.styl deleted file mode 100644 index f779499..0000000 --- a/source/css/highlight/diff.styl +++ /dev/null @@ -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 diff --git a/source/css/highlight/theme.styl b/source/css/highlight/theme.styl deleted file mode 100644 index 1c10676..0000000 --- a/source/css/highlight/theme.styl +++ /dev/null @@ -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; \ No newline at end of file diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl index da58544..df1e389 100644 --- a/source/css/layout/_partial/header.styl +++ b/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; + } + } \ No newline at end of file diff --git a/source/css/layout/common/basic.styl b/source/css/layout/common/basic.styl index ee007d4..68ce62d 100644 --- a/source/css/layout/common/basic.styl +++ b/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; - border: 1px solid $border-color; + color: var(--third-text-color); + border: 1px solid var(--third-text-color); white-space: nowrap; border-radius: 10em; padding: 0.5em 1em; &:hover { - color: $primary-color; - border: 1px solid $primary-color; + color: var(--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; } \ No newline at end of file diff --git a/source/css/layout/common/highlight/code-theme.styl b/source/css/layout/common/highlight/code-theme.styl new file mode 100644 index 0000000..b434e77 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/source/css/highlight/highlight.styl b/source/css/layout/common/highlight/highlight.styl similarity index 51% rename from source/css/highlight/highlight.styl rename to source/css/layout/common/highlight/highlight.styl index d86c82b..d254ad0 100644 --- a/source/css/highlight/highlight.styl +++ b/source/css/layout/common/highlight/highlight.styl @@ -1,24 +1,41 @@ -@require "theme" -@require "diff" +@require "code-theme.styl" $code-block { overflow: auto; margin: 20px 0; padding: 0; - font-size $code-font-size; - color: $highlight-foreground; - background: $highlight-background; - line-height: $line-height-code-block; + font-size 1em; + color: var(--highlight-foreground); + background: var(--highlight-background); + 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; - background: $code-background; - border-radius: $code-border-radius; + color: var(--code-foreground); + background: var(--code-background); + 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-right: 10px - color: $highlight-gutter.color - text-align: center - background-color: $highlight-gutter.bg-color + padding-left: 10px; + padding-right: 10px; + color: var(--highlight-gutter-color); + text-align: center; + 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 .addition { background: $highlight-addition; } -pre .meta { color: $highlight-purple; } +pre .deletion { + background: var(--highlight-deletion); +} + +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); } } diff --git a/source/css/layout/common/markdown.styl b/source/css/layout/common/markdown.styl index f91e2da..fd2a8d9 100644 --- a/source/css/layout/common/markdown.styl +++ b/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; } } diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl index e723ca5..6d614bb 100644 --- a/source/css/layout/common/variables.styl +++ b/source/css/layout/common/variables.styl @@ -5,10 +5,10 @@ // =============================== // layout // =============================== -$header-height = 100px; // 头部默认高度 -$header-shrink-height = 60px; // 头部收缩高度 -$main-content-width = 70%; // 中间内容区域宽度 -$media-max-width = 760px; // 媒体查询最大宽度 +$header-height = 100px; // 头部默认高度 +$header-shrink-height = 60px; // 头部收缩高度 +$main-content-width = 66%; // 中间内容区域宽度 +$media-max-width = 760px; // 媒体查询最大宽度 // =============================== // z-index @@ -24,22 +24,25 @@ $z-index-6 = 1006; // =============================== // color // =============================== -$primary-color = #ce3e29; // 主题颜色 -$background-color = #fff; // 背景颜色 -$first-text-color = #2c3e50; // 第一文本颜色 -$second-text-color = #525e6b; // 第二文本颜色 -$third-text-color = #9ca3ad; // 第三文本颜色 -$normal-text-color = #616161; // 通用文本颜色（默认字体颜色） -$border-color = #eee; // 边框颜色 +// normal mode color +$primary-color = #30a103; // 主题颜色 +$background-color = #fcfcfc; // 背景颜色 +$normal-text-color = #515061; // 通用文本颜色（默认字体颜色） +$first-text-color = darken($normal-text-color, 20%); // 第一文本颜色 +$second-text-color = darken($normal-text-color, 10%); // 第二文本颜色 +$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 = #ce3e29; // 主题颜色 -$dark-first-text-color = #eee; // 第一文本颜色 -$dark-second-text-color = #ccc; // 第二文本颜色 -$dark-third-text-color = #aaa; // 第三文本颜色 -$dark-normal-text-color = #bbb; // 通用文本颜色（默认字体颜色） -$dark-border-color = #888; // 边框颜色 +$dark-primary-color = $primary-color; +$dark-background-color = #444; +$dark-normal-text-color = #bbb; +$dark-first-text-color = lighten($dark-normal-text-color, 30%); +$dark-second-text-color = lighten($dark-normal-text-color, 20%); +$dark-third-text-color = darken($dark-normal-text-color, 20%); +$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; } \ No newline at end of file diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl index 9822d81..34ff8be 100644 --- a/source/css/layout/page.styl +++ b/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; } } \ No newline at end of file diff --git a/source/css/style.styl b/source/css/style.styl index cfb0bf3..1beff41 100644 --- a/source/css/style.styl +++ b/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" @@ -14,4 +12,6 @@ @import "layout/archive-content.styl" @import "layout/article-content.styl" @import "layout/category-content.styl" -@import "layout/tag-content.styl" \ No newline at end of file +@import "layout/tag-content.styl" +@import "layout/common/markdown.styl" +@import "layout/common/highlight/highlight.styl" \ No newline at end of file diff --git a/source/js/toggle-mode.js b/source/js/toggle-mode.js index 7972794..b344dfe 100644 --- a/source/js/toggle-mode.js +++ b/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,