From 3489fcdf0baa38475ce6519ef60d4bb6efd75058 Mon Sep 17 00:00:00 2001
From: Maledong <maledong_github@outlook.com>
Date: Sat, 9 Oct 2021 12:58:58 +0800
Subject: [PATCH] improve Dark Mode

Ref: #4139.

1. Change the header's background color to make it more light so as to
   be enhanced according to @Trott's idea.
2. Fix the blog's "code" part and its font color to make it more
   visible.
---
 layouts/css/_variables.scss         |  3 ++-
 layouts/css/layout/_dark-theme.scss | 24 +++++++++++++++++++++---
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/layouts/css/_variables.scss b/layouts/css/_variables.scss
index c85112d481a27..0a4f923c8cf42 100644
--- a/layouts/css/_variables.scss
+++ b/layouts/css/_variables.scss
@@ -17,11 +17,12 @@ $home-secondary-links-color: #51744e;
 
 // for dark-theme
 $dark-black: #090c15;
-$dark-black2: #141a2b;
+$dark-black2: #233056;
 $dark-gray: #242424;
 $dark-green: #2c372a;
 $dark-green2: #84ba64;
 $dark-green3: #64de64;
+$dark-code-background: #2c3437;
 
 @mixin padded-link($padding) {
   padding-right: $padding;
diff --git a/layouts/css/layout/_dark-theme.scss b/layouts/css/layout/_dark-theme.scss
index be6b3f49d8411..10c67d417cb49 100644
--- a/layouts/css/layout/_dark-theme.scss
+++ b/layouts/css/layout/_dark-theme.scss
@@ -32,6 +32,9 @@
         border-top-color: $dark-black2 !important;
       }
     }
+    .lang-picker {
+      background-color: $dark-black2;
+    }
   }
 
   article {
@@ -52,13 +55,13 @@
     }
 
     code {
-      background-color: #2c3437;
+      background-color: $dark-code-background;
       color: $dark-green3;
     }
 
     pre,
     pre code {
-      background-color: $dark-black2;
+      background-color: $dark-code-background;
     }
 
     table {
@@ -72,7 +75,7 @@
     }
 
     .highlight-box {
-      background-color: $dark-black2;
+      background-color: $dark-code-background;
     }
   }
 
@@ -84,6 +87,10 @@
     }
   }
 
+  .home-version-banner {
+    background-color: #1f2f2b;
+  }
+
   .download-hero {
     a {
       background-color: $dark-green;
@@ -101,4 +108,15 @@
   .download-matrix td {
     border-color: $light-gray;
   }
+
+  .blog-index {
+    .summary {
+      margin-left: 1em;
+      font-size: 75%;
+      color: $light-gray;
+    }
+    code {
+      background-color: $dark-code-background;
+    }
+  }
 }