style(code-block): code highlight theme adds obsidian option (#111)

_config.yml

@@ -159,6 +159,7 @@ post:
 code_block:
   enable: false     # Option values: true | false
   style: default    # Option values: default | mac
+  highlight_theme: default  # Option values: default | obsidian
 
 # ---------------------------------------------------------------------------------------
 # Table of Contents in the Sidebar

source/css/common/code-block/code-block.styl

@@ -10,30 +10,32 @@
     box-sizing border-box
     width 100%
     padding 0.3rem 0.4rem
-    background var(--background-color-3)
+    background var(--toolbar-background)
     border-top-left-radius 0.3rem
     border-top-right-radius 0.3rem
+    color var(--toolbar-foreground)
+
 
     &.folded {
       border-bottom-right-radius 0.3rem
       border-bottom-left-radius 0.3rem
     }
 
+
     .code-lang {
       justify-content flex-start
       margin-left 0.2rem
-      color var(--text-color-3)
       font-weight 600
       font-size 0.9rem
       font-family "Source Code Pro", consolas, Menlo
     }
 
+
     .tool {
       disable-user-select()
       cursor pointer
 
       i {
-        color var(--text-color-2)
         font-size 0.8rem
       }
     }
@@ -64,6 +66,7 @@
       }
     }
 
+
     .code-tools-box {
       justify-content flex-end
       padding 0.4rem 0.6rem 0.7rem 0.4rem
@@ -80,6 +83,7 @@
         content ''
       }
 
+
       &.folded {
         border-bottom-right-radius 0
         border-bottom-left-radius 0
@@ -89,14 +93,17 @@
         }
       }
 
+
       .code-lang {
         order 1
         color #bbb
       }
 
+
       .fold {
         order 2
         padding 0 0.1rem 0 0.6rem
+
         i {
           color #ccc
         }

source/css/common/code-block/code-theme.styl

@@ -1,40 +1,89 @@
 @import "../variables.styl"
 
+// A single line block of code
 $code-foreground = lighten($text-color-3, 2%)
 $code-background = darken($background-color-1, 5%)
-$highlight-foreground = lighten($text-color-3, 2%)
-$highlight-background = darken($background-color-1, 2%)
-$highlight-gutter-color = lighten($text-color-3, 5%)
-$highlight-gutter-bg-color = darken($background-color-1, 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
-
 $dark-code-foreground = lighten($dark-text-color-3, 2%)
 $dark-code-background = darken($dark-background-color-1, 10%)
-$dark-highlight-foreground = lighten($dark-text-color-3, 2%)
+
-$dark-highlight-background = darken($dark-background-color-1, 8%)
+
-$dark-highlight-gutter-color = lighten($dark-text-color-3, 5%)
+if (hexo-config('code_block.highlight_theme') == 'obsidian') {
-$dark-highlight-gutter-bg-color = darken($dark-background-color-1, 10%)
+
-$dark-highlight-comment = #969896
+  $toolbar-foreground = #b5b5b5
-$dark-highlight-red = #cc6666
+  $toolbar-background = #3a3f40
-$dark-highlight-orange = #de935f
+  $highlight-foreground = #e8e2bb
-$dark-highlight-yellow = #f0c674
+  $highlight-background = #273036
-$dark-highlight-green = #b5bd68
+  $highlight-gutter-color = #7a979a
-$dark-highlight-aqua = #8abeb7
+  $highlight-gutter-bg-color = #273130
-$dark-highlight-blue = #81a2be
+  $highlight-comment = #76888e
-$dark-highlight-purple = #b294bb
+  $highlight-red = #ee5758
-$dark-highlight-deletion = #008000
+  $highlight-orange = #ec7600
-$dark-highlight-addition = #800000
+  $highlight-yellow = #ffcd22
+  $highlight-green = #93c763
+  $highlight-aqua = #458383
+  $highlight-blue = #6e95bd
+  $highlight-purple = #b18bb7
+  $highlight-deletion = #ff9999
+  $highlight-addition = #ccff99
+
+  $dark-toolbar-foreground = darken($toolbar-foreground, 2%)
+  $dark-toolbar-background = darken($toolbar-background, 2%)
+  $dark-highlight-foreground = darken($highlight-foreground, 10%)
+  $dark-highlight-background = darken($highlight-background, 2%)
+  $dark-highlight-gutter-color = lighten($highlight-gutter-color, 1%)
+  $dark-highlight-gutter-bg-color = darken($highlight-gutter-bg-color, 2%)
+  $dark-highlight-comment = $highlight-comment
+  $dark-highlight-red = darken($highlight-red, 2%)
+  $dark-highlight-orange = darken($highlight-orange, 2%)
+  $dark-highlight-yellow = darken($highlight-yellow, 2%)
+  $dark-highlight-green = darken($highlight-green, 2%)
+  $dark-highlight-aqua = darken($highlight-aqua, 2%)
+  $dark-highlight-blue = darken($highlight-blue, 2%)
+  $dark-highlight-purple = darken($highlight-purple, 2%)
+  $dark-highlight-deletion = darken($highlight-deletion, 2%)
+  $dark-highlight-addition = darken($highlight-addition, 2%)
+
+} else {
+
+  $toolbar-foreground = $text-color-3
+  $toolbar-background = $background-color-3
+  $highlight-foreground = lighten($text-color-3, 2%)
+  $highlight-background = darken($background-color-1, 2%)
+  $highlight-gutter-color = lighten($text-color-3, 5%)
+  $highlight-gutter-bg-color = darken($background-color-1, 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
+
+  $dark-toolbar-foreground = $dark-text-color-3
+  $dark-toolbar-background = $dark-background-color-3
+  $dark-highlight-foreground = lighten($dark-text-color-3, 2%)
+  $dark-highlight-background = darken($dark-background-color-1, 8%)
+  $dark-highlight-gutter-color = lighten($dark-text-color-3, 5%)
+  $dark-highlight-gutter-bg-color = darken($dark-background-color-1, 10%)
+  $dark-highlight-comment = #969896
+  $dark-highlight-red = #cc6666
+  $dark-highlight-orange = #de935f
+  $dark-highlight-yellow = #f0c674
+  $dark-highlight-green = #b5bd68
+  $dark-highlight-aqua = #8abeb7
+  $dark-highlight-blue = #81a2be
+  $dark-highlight-purple = #b294bb
+  $dark-highlight-deletion = #008000
+  $dark-highlight-addition = #800000
+}
+
 
 code-theme(mode) {
+  --toolbar-foreground mode == 'light' ? $toolbar-foreground : $dark-toolbar-foreground
+  --toolbar-background mode == 'light' ? $toolbar-background : $dark-toolbar-background
   --code-foreground mode == 'light' ? $code-foreground : $dark-code-foreground
   --code-background mode == 'light' ? $code-background : $dark-code-background
   --highlight-background mode == 'light' ? $highlight-background : $dark-highlight-background

source/css/common/code-block/highlight.styl

@@ -8,7 +8,7 @@ $code-block {
   font-size 0.96rem
   line-height 1.5rem
   background var(--highlight-background)
-  -webkit-text-size-adjust none
+  not-text-size-adjust()
 }
 
 
@@ -40,7 +40,8 @@ pre {
 
 .highlight {
   @extend $code-block
-  border-radius 0.1rem
+  border-bottom-left-radius 0.1rem
+  border-bottom-right-radius 0.1rem
 
   pre {
     margin 0
@@ -95,24 +96,28 @@ pre {
 
   .line {
     height 1.5rem
-    color var(--text-color-3)
+    color var(--highlight-foreground)
 
     .attr {
-      color var(--text-color-3)
+      color var(--highlight-foreground)
     }
 
     .string {
-      color var(--text-color-3)
+      color var(--highlight-foreground)
     }
   }
 }
 
 
 .gutter {
-  -webkit-user-select none
+  disable-user-select()
-  -moz-user-select none
+  color var(--highlight-gutter-color)
-  -ms-user-select none
+  background var(--highlight-gutter-bg-color)
-  user-select none
+
+  .line {
+    color var(--highlight-gutter-color)
+  }
+
 }
 
 .gist table {
@@ -123,7 +128,6 @@ pre {
   }
 }
 
-// For diff highlight
 pre .deletion {
   background var(--highlight-deletion)
 }
@@ -157,6 +161,10 @@ pre {
     color var(--highlight-red)
   }
 
+  .property {
+    color var(--highlight-blue)
+  }
+
   .number
   .preprocessor
   .built_in

source/css/common/keep-theme.styl

@@ -58,3 +58,12 @@ disable-user-select() {
   -webkit-user-select none
   user-select none
 }
+
+
+not-text-size-adjust() {
+  -ms-text-size-adjust none
+  -moz-text-size-adjust none
+  -webkit-text-size-adjust none
+}
+
+