From 03e50d01ac59d136d8d9ccda187d898c0e424332 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Fri, 8 May 2020 14:49:02 +0800
Subject: [PATCH] Allow different highlight style for dark mode

---
 _config.yml                                   |  4 ++-
 scripts/events/lib/highlight.js               |  8 +++--
 source/css/_colors.styl                       | 12 +++++++
 .../scaffolding/highlight/copy-code.styl      |  2 +-
 .../scaffolding/highlight/highlight.styl      | 34 +++++++++----------
 source/css/_variables/base.styl               | 10 ++++++
 6 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/_config.yml b/_config.yml
index c71fc935d..c3467bffe 100644
--- a/_config.yml
+++ b/_config.yml
@@ -347,7 +347,9 @@ custom_logo: #/uploads/custom-logo.jpg
 codeblock:
   # Code Highlight theme
   # See: https://github.com/highlightjs/highlight.js/tree/master/src/styles
-  highlight_theme: default
+  theme:
+    light: default
+    dark: dark
   # Add copy button on codeblock
   copy_button:
     enable: false
diff --git a/scripts/events/lib/highlight.js b/scripts/events/lib/highlight.js
index 17234df06..f6f900b16 100644
--- a/scripts/events/lib/highlight.js
+++ b/scripts/events/lib/highlight.js
@@ -23,6 +23,10 @@ function parse(file) {
 
 module.exports = hexo => {
   hexo.config.highlight.hljs = false;
-  let file = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.highlight_theme}.css`;
-  hexo.theme.config.highlight = parse(file);
+  let light = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.theme.light}.css`;
+  let dark = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.theme.dark}.css`;
+  hexo.theme.config.highlight = {
+    light: parse(light),
+    dark : parse(dark)
+  };
 };
diff --git a/source/css/_colors.styl b/source/css/_colors.styl
index e0561b384..0b561c473 100644
--- a/source/css/_colors.styl
+++ b/source/css/_colors.styl
@@ -11,12 +11,18 @@
   --table-row-odd-bg-color: $table-row-odd-bg-color;
   --table-row-hover-bg-color: $table-row-hover-bg-color;
   --menu-item-bg-color: $menu-item-bg-color;
+
   --btn-default-bg: $btn-default-bg;
   --btn-default-color: $btn-default-color;
   --btn-default-border-color: $btn-default-border-color;
   --btn-default-hover-bg: $btn-default-hover-bg;
   --btn-default-hover-color: $btn-default-hover-color;
   --btn-default-hover-border-color: $btn-default-hover-border-color;
+
+  --highlight-background: $highlight-background;
+  --highlight-foreground: $highlight-foreground;
+  --highlight-gutter-background: $highlight-gutter-background;
+  --highlight-gutter-foreground: $highlight-gutter-foreground;
 }
 
 if (hexo-config('darkmode')) {
@@ -34,12 +40,18 @@ if (hexo-config('darkmode')) {
       --table-row-odd-bg-color: $table-row-odd-bg-color-dark;
       --table-row-hover-bg-color: $table-row-hover-bg-color-dark;
       --menu-item-bg-color: $menu-item-bg-color-dark;
+
       --btn-default-bg: $btn-default-bg-dark;
       --btn-default-color: $btn-default-color-dark;
       --btn-default-border-color: $btn-default-border-color-dark;
       --btn-default-hover-bg: $btn-default-hover-bg-dark;
       --btn-default-hover-color: $btn-default-hover-color-dark;
       --btn-default-hover-border-color: $btn-default-hover-border-color-dark;
+
+      --highlight-background: $highlight-background-dark;
+      --highlight-foreground: $highlight-foreground-dark;
+      --highlight-gutter-background: $highlight-gutter-background-dark;
+      --highlight-gutter-foreground: $highlight-gutter-foreground-dark;
     }
 
     img {
diff --git a/source/css/_common/scaffolding/highlight/copy-code.styl b/source/css/_common/scaffolding/highlight/copy-code.styl
index 728cddf33..60ee7f1e6 100644
--- a/source/css/_common/scaffolding/highlight/copy-code.styl
+++ b/source/css/_common/scaffolding/highlight/copy-code.styl
@@ -18,7 +18,7 @@
     right: 0;
     top: 0;
   } else if (hexo-config('codeblock.copy_button.style') == 'mac') {
-    color: $highlight-foreground;
+    color: var(--highlight-foreground);
     font-size: 14px;
     right: 0;
     top: 2px;
diff --git a/source/css/_common/scaffolding/highlight/highlight.styl b/source/css/_common/scaffolding/highlight/highlight.styl
index eaa3f15fe..12ed0ef89 100644
--- a/source/css/_common/scaffolding/highlight/highlight.styl
+++ b/source/css/_common/scaffolding/highlight/highlight.styl
@@ -1,17 +1,17 @@
-@import hexo-config('highlight.file');
-$highlight-background = convert(hexo-config('highlight.background'));
-$highlight-foreground = convert(hexo-config('highlight.foreground'));
-$highlight-gutter     = {
-  color: mix($highlight-background, $highlight-foreground, 10%),
-  bg-color: mix($highlight-background, $highlight-foreground, 90%)
-};
+@import hexo-config('highlight.light.file');
+
+if (hexo-config('darkmode')) {
+  @media (prefers-color-scheme: dark) {
+    @import hexo-config('highlight.dark.file');
+  }
+}
 
 @import 'copy-code' if (hexo-config('codeblock.copy_button.enable'));
 
 // Placeholder: $code-block
 $code-block {
-  background: $highlight-background;
-  color: $highlight-foreground;
+  background: var(--highlight-background);
+  color: var(--highlight-foreground);
   line-height: $line-height-code-block;
   margin: 0 auto 20px;
 }
@@ -50,8 +50,8 @@ code {
   }
 
   figcaption {
-    background: $highlight-gutter.bg-color;
-    color: $highlight-foreground;
+    background: var(--highlight-gutter-background);
+    color: var(--highlight-foreground);
     display: flex;
     font-size: $table-font-size;
     justify-content: space-between;
@@ -59,10 +59,10 @@ code {
     padding: .5em;
 
     a {
-      color: $highlight-foreground;
+      color: var(--highlight-foreground);
 
       &:hover {
-        border-bottom-color: $highlight-foreground;
+        border-bottom-color: var(--highlight-foreground);
       }
     }
   }
@@ -71,8 +71,8 @@ code {
     disable-user-select();
 
     pre {
-      background: $highlight-gutter.bg-color;
-      color: $highlight-gutter.color;
+      background: var(--highlight-gutter-background);
+      color: var(--highlight-gutter-foreground);
       padding-left: 10px;
       padding-right: 10px;
       text-align: right;
@@ -80,7 +80,7 @@ code {
   }
 
   .code pre {
-    background: $highlight-background;
+    background: var(--highlight-background);
     padding-left: 10px;
     width: 100%;
   }
@@ -101,7 +101,7 @@ pre {
 
   code {
     background: none;
-    color: $highlight-foreground;
+    color: var(--highlight-foreground);
     font-size: $table-font-size;
     padding: 0;
     text-shadow: none;
diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl
index 09044aa8f..815f73ed5 100644
--- a/source/css/_variables/base.styl
+++ b/source/css/_variables/base.styl
@@ -135,6 +135,16 @@ $code-font-family               = $font-family-monospace;
 $code-foreground                = $black-light;
 $code-background                = $gainsboro;
 
+$highlight-background = convert(hexo-config('highlight.light.background'));
+$highlight-foreground = convert(hexo-config('highlight.light.foreground'));
+$highlight-gutter-background = mix($highlight-background, $highlight-foreground, 90%);
+$highlight-gutter-foreground = mix($highlight-background, $highlight-foreground, 10%);
+
+$highlight-background-dark = convert(hexo-config('highlight.dark.background'));
+$highlight-foreground-dark = convert(hexo-config('highlight.dark.foreground'));
+$highlight-gutter-background-dark = mix($highlight-background-dark, $highlight-foreground-dark, 90%);
+$highlight-gutter-foreground-dark = mix($highlight-background-dark, $highlight-foreground-dark, 10%);
+
 
 // Buttons
 // --------------------------------------------------