Dark mode support for theme_color (#378)

_config.yml

@@ -342,8 +342,10 @@ text_align:
 # Reduce padding / margin indents on devices with narrow width.
 mobile_layout_economy: false
 
-# Android Chrome header panel color ($brand-bg / $headband-bg => $black-deep).
+# Browser header panel color.
-android_chrome_color: "#222"
+theme_color:
+  light: "#222"
+  dark: "#222"
 
 # Override browsers' default behavior.
 body_scrollbar:

layout/_partials/head/head.njk

@@ -1,6 +1,11 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">
-<meta name="theme-color" content="{{ theme.android_chrome_color }}">
+{%- if theme.darkmode %}
+<meta name="theme-color" content="{{ theme.theme_color.light }}" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="{{ theme.theme_color.dark }}" media="(prefers-color-scheme: dark)">
+{%- else %}
+<meta name="theme-color" content="{{ theme.theme_color.light }}">
+{%- endif %}
 <meta name="generator" content="Hexo {{ hexo_version }}">
 
 {{ next_pre() }}
@@ -15,7 +20,7 @@
   <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for(theme.favicon.small) }}">
 {%- endif %}
 {%- if theme.favicon.safari_pinned_tab %}
-  <link rel="mask-icon" href="{{ url_for(theme.favicon.safari_pinned_tab) }}" color="{{ theme.android_chrome_color }}">
+  <link rel="mask-icon" href="{{ url_for(theme.favicon.safari_pinned_tab) }}" color="{{ theme.theme_color.light }}">
 {%- endif %}
 {%- if theme.favicon.android_manifest %}
   <link rel="manifest" href="{{ url_for(theme.favicon.android_manifest) }}">

source/css/_colors.styl

@@ -11,6 +11,7 @@
   --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;
+  --theme-color: $theme-color;
 
   --btn-default-bg: $btn-default-bg;
   --btn-default-color: $btn-default-color;
@@ -40,6 +41,7 @@ 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;
+      --theme-color: $theme-color-dark;
 
       --btn-default-bg: $btn-default-bg-dark;
       --btn-default-color: $btn-default-color-dark;

source/css/_common/components/reading-progress.styl

@@ -1,8 +1,8 @@
 if (hexo-config('reading_progress.enable')) {
   .reading-progress-bar {
     --progress: 0;
-    background: unquote(hexo-config('reading_progress.color'));
+    background: convert(hexo-config('reading_progress.color'));
-    height: unquote(hexo-config('reading_progress.height'));
+    height: convert(hexo-config('reading_progress.height'));
     position: fixed;
     z-index: $zindex-5;
 

source/css/_common/outline/footer/index.styl

@@ -66,7 +66,7 @@
 }
 
 .with-love {
-  color: unquote(hexo-config('footer.icon.color'));
+  color: convert(hexo-config('footer.icon.color'));
   display: inline-block;
   margin: 0 5px;
 

source/css/_common/outline/header/bookmark.styl

@@ -11,7 +11,7 @@ if (hexo-config('bookmark.enable')) {
     }
 
     &::before {
-      color: unquote(hexo-config('bookmark.color'));
+      color: convert(hexo-config('bookmark.color'));
       font-size: 32px;
       line-height: 1;
       font-family-icons('\f02e');

source/css/_common/outline/header/github-banner.styl

@@ -14,15 +14,13 @@ if (hexo-config('github_banner.enable')) {
   }
 
   .github-corner {
-    $bg-color = unquote(hexo-config('android_chrome_color'));
-
     :hover .octo-arm {
       animation: octocat-wave 560ms ease-in-out;
     }
 
     svg {
       color: white;
-      fill: $bg-color;
+      fill: var(--theme-color);
       position: absolute;
       right: 0;
       top: 0;
@@ -36,7 +34,7 @@ if (hexo-config('github_banner.enable')) {
 
       svg {
         if (($scheme == 'Pisces') or ($scheme == 'Gemini')) {
-          color: $bg-color;
+          color: var(--theme-color);
           fill: white;
         }
       }

source/css/_common/scaffolding/tags/pdf.styl

@@ -1,7 +1,7 @@
 if (hexo-config('pdf.enable')) {
   .pdfobject-container {
     iframe, embed {
-      height: unquote(hexo-config('pdf.height'));
+      height: convert(hexo-config('pdf.height'));
       width: 100%;
     }
   }

source/css/_schemes/Pisces/_header.styl

@@ -1,5 +1,5 @@
 .site-brand-container {
-  background: $black-deep;
+  background: var(--theme-color);
 
   .site-nav-on & {
     +tablet-mobile() {

source/css/_variables/base.styl

@@ -66,6 +66,9 @@ $card-bg-color-dark           = $black-light;
 $menu-item-bg-color           = $whitesmoke;
 $menu-item-bg-color-dark      = $black-light;
 
+$theme-color                  = convert(hexo-config('theme_color.light'));
+$theme-color-dark             = convert(hexo-config('theme_color.dark'));
+
 // Typography
 // Font, line-height, and elements colors.
 // --------------------------------------------------
@@ -198,7 +201,7 @@ $content-mobile-padding         = 8px;
 // Headband
 // --------------------------------------------------
 $headband-height                = 3px;
-$headband-bg                    = $black-deep;
+$headband-bg                    = var(--theme-color);
 
 
 // Section Header