refactor: modify the color scheme of the code blcok

source/css/_common/components/highlight/highlight.styl

@@ -33,15 +33,12 @@ for lang in languages {
 
 .highlight {
   margin: 0 0 1rem;
+  border-radius: .25rem;
   width: 100%;
   line-height: $line-height-codeblock;
   color: $highlight-color;
   background-color: $highlight-background;
 
-  if (codeStyle == 'simple' || (codeStyle == 'carbon')) {
-    border-radius: .25rem;
-  }
-
   pre,
   code {
     font-family: $font-family-code;
@@ -93,6 +90,10 @@ for lang in languages {
   figcaption.custom {
     min-height: 1.5rem;
 
+    if (codeStyle == 'default') {
+      border-radius: .25rem;
+    }
+
     if (codeStyle == 'carbon') {
       display: flex;
     }
@@ -174,10 +175,15 @@ for lang in languages {
   }
 
   td.gutter {
+    border-right: 1px solid $gap-line-color;
     padding: .4rem .6rem;
     width: 2rem;
     background-color: $highlight-side-bg-color;
 
+    if (codeStyle == 'default') {
+      border-radius: .25rem;
+    }
+
     if (wordWrap || (codeStyle == 'simple' || (codeStyle == 'carbon'))) {
       display: none;
     }

source/css/_common/components/highlight/theme.styl

@@ -3,15 +3,16 @@ highlight_theme = hexo-config('codeblock.highlight') || 'light';
 
 if (highlight_theme == 'light') {
   $highlight-color             = #333333;
-  $highlight-background        = #f3f4f5;
+  $highlight-background        = #f5f6f7;
   $highlight-side-color        = lighten($highlight-color, 60%);
-  $highlight-side-bg-color     = darken($highlight-background, 2%);
+  $highlight-side-bg-color     = $highlight-background;
   $highlight-header-color      = $highlight-color;
   $highlight-header-bg-color   = $highlight-side-bg-color;
-  $highlight-code-lang-color   = alpha($highlight-header-color, .6);
+  $highlight-code-lang-color   = lighten($highlight-header-color, 60%);
   $highlight-code-note-color   = $highlight-header-color;
-  $copy-button-color           = alpha($highlight-header-color, .7);
-  $marked-line-bg-color        = #5b5b5b;
+  $copy-button-color           = lighten($highlight-header-color, 60%);
+  $gap-line-color              = darken($highlight-background, 10%);
+  $marked-line-bg-color        = darken($highlight-background, 6%);
   $highlight-comment           = #969896;
   $highlight-red               = #c82829;
   $highlight-orange            = #ee8019;
@@ -22,30 +23,32 @@ if (highlight_theme == 'light') {
   $highlight-purple            = #be4dbc;
 
   if (hexo-config('night_mode.enable')) {
-    $highlight-color             = var(--color-gray-800);
+    $highlight-color             = var(--color-gray-850);
     $highlight-background        = var(--color-gray-200);
-    $highlight-side-color        = var(--color-gray-600);
-    $highlight-side-bg-color     = var(--color-gray-250);
-    $highlight-header-color      = var(--color-gray-600);
-    $highlight-header-bg-color   = $highlight-side-bg-color;
-    $highlight-code-lang-color   = var(--color-gray-600);
-    $highlight-code-note-color   = $highlight-header-color;
-    $copy-button-color           = var(--color-gray-600);
-    $marked-line-bg-color        = var(--color-gray-300);
+    $highlight-side-color        = var(--color-gray-550);
+    $highlight-side-bg-color     = var(--color-gray-200);
+    $highlight-header-color      = var(--color-gray-850);
+    $highlight-header-bg-color   = var(--color-gray-200);
+    $highlight-code-lang-color   = var(--color-gray-550);
+    $highlight-code-note-color   = var(--color-gray-850);
+    $copy-button-color           = var(--color-gray-550);
+    $gap-line-color              = var(--color-gray-300);
+    $marked-line-bg-color        = var(--color-gray-260);
   }
 }
 
 if (highlight_theme == 'dark') {
   $highlight-color             = #abb2bf;
   $highlight-background        = #282c34;
-  $highlight-side-color        = darken($highlight-color, 50%);
-  $highlight-side-bg-color     = darken($highlight-background, 10%);
+  $highlight-side-color        = darken($highlight-color, 40%);
+  $highlight-side-bg-color     = $highlight-background;
   $highlight-header-color      = $highlight-color;
   $highlight-header-bg-color   = $highlight-side-bg-color;
-  $highlight-code-lang-color   = alpha($highlight-header-color, .6);
+  $highlight-code-lang-color   = darken($highlight-header-color, 40%);
   $highlight-code-note-color   = $highlight-header-color;
-  $copy-button-color           = alpha($highlight-header-color, .7);
-  $marked-line-bg-color        = #464646;
+  $copy-button-color           = darken($highlight-header-color, 40%);
+  $gap-line-color              = lighten($highlight-background, 10%);
+  $marked-line-bg-color        = lighten($highlight-background, 6%);
   $highlight-comment           = #5c6370;
   $highlight-red               = #f45a5a;
   $highlight-orange            = #de812c;
@@ -57,16 +60,17 @@ if (highlight_theme == 'dark') {
 }
 
 if (highlight_theme == 'ocean') {
-  $highlight-color             = #f8f8f2;
+  $highlight-color             = #f8f8f8;
   $highlight-background        = #304148;
-  $highlight-side-color        = alpha($highlight-color, 20%);
-  $highlight-side-bg-color     = darken($highlight-background, 5%);
+  $highlight-side-color        = darken($highlight-color, 40%);
+  $highlight-side-bg-color     = $highlight-background;
   $highlight-header-color      = $highlight-color;
   $highlight-header-bg-color   = $highlight-side-bg-color;
-  $highlight-code-lang-color   = alpha($highlight-header-color, .5);
+  $highlight-code-lang-color   = darken($highlight-header-color, 40%);
   $highlight-code-note-color   = $highlight-header-color;
-  $copy-button-color           = alpha($highlight-header-color, .6);
-  $marked-line-bg-color        = #575757;
+  $copy-button-color           = darken($highlight-header-color, 40%);
+  $gap-line-color              = lighten($highlight-background, 10%);
+  $marked-line-bg-color        = lighten($highlight-background, 6%);
   $highlight-comment           = #65737e;
   $highlight-red               = #eb606b;
   $highlight-orange            = #f99157;

source/css/_common/scaffolding/base.styl

@@ -3,9 +3,11 @@
   --color-gray-150: #f9f9f9;
   --color-gray-200: #f5f6f7;
   --color-gray-250: #efefef;
+  --color-gray-260: #e5e7ea;
   --color-gray-300: #dadada;
   --color-gray-400: #ccd0d5;
   --color-gray-500: #bec3c9;
+  --color-gray-550: #adadad;
   --color-gray-600: #8d949e;
   --color-gray-650: #757474;
   --color-gray-700: #606770;
@@ -23,9 +25,11 @@ html.nightmode {
   --color-gray-150: #2c323c;
   --color-gray-200: #303846;
   --color-gray-250: #444950;
+  --color-gray-260: #555b64;
   --color-gray-300: #606770;
   --color-gray-400: #757474;
   --color-gray-500: #8d949e;
+  --color-gray-550: #959595;
   --color-gray-600: #bec3c9;
   --color-gray-650: #ccd0d5;
   --color-gray-700: #dadada;