Allow different highlight style for dark mode

next-theme · May 8, 2020 · 03e50d0 · 03e50d0 · stevenjoezhang · Nov 29, 2020
1 parent 9fdaba2
commit 03e50d0
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,19 +50,19 @@ 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;
     line-height: 1.2;
     padding: .5em;
 
     a {
-      color: $highlight-foreground;
+      color: var(--highlight-foreground);
 
       &:hover {
-        border-bottom-color: $highlight-foreground;
+        border-bottom-color: var(--highlight-foreground);
       }
     }
   }
@@ -71,16 +71,16 @@ 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;
     }
   }
 
   .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
@@ -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
 // --------------------------------------------------