Add supports of light-dark function (#899)

_config.yml

@@ -45,6 +45,12 @@ scheme: Muse
 # Dark Mode
 darkmode: false
 
+# Light-Dark Mode
+lightdark:
+  enable: false
+  # Add @supports (color: light-dark(red, red)) check
+  check_supports: true
+
 
 # ---------------------------------------------------------------
 # Site Information Settings

source/css/_colors.styl

@@ -77,3 +77,46 @@ if (hexo-config('darkmode')) {
     }
   }
 }
+
+if (hexo-config('lightdark.enable')) {
+  +light-dark-block() {
+    :root {
+      --body-bg-color: light-dark($body-bg-color, $body-bg-color-dark);
+      --content-bg-color: light-dark($content-bg-color, $content-bg-color-dark);
+      --card-bg-color: light-dark($card-bg-color, $card-bg-color-dark);
+      --text-color: light-dark($text-color, $text-color-dark);
+      --selection-bg: light-dark($selection-bg, $selection-bg-dark);
+      --selection-color: light-dark($selection-color, $selection-color-dark);
+      --blockquote-color: light-dark($blockquote-color, $blockquote-color-dark);
+      --link-color: light-dark($link-color, $link-color-dark);
+      --link-hover-color: light-dark($link-hover-color, $link-hover-color-dark);
+      --brand-color: light-dark($brand-color, $brand-color-dark);
+      --brand-hover-color: light-dark($brand-hover-color, $brand-hover-color-dark);
+      --table-row-odd-bg-color: light-dark($table-row-odd-bg-color, $table-row-odd-bg-color-dark);
+      --table-row-hover-bg-color: light-dark($table-row-hover-bg-color, $table-row-hover-bg-color-dark);
+      --menu-item-bg-color: light-dark($menu-item-bg-color, $menu-item-bg-color-dark);
+      --theme-color: light-dark($theme-color, $theme-color-dark);
+
+      --btn-default-bg: light-dark($btn-default-bg, $btn-default-bg-dark);
+      --btn-default-color: light-dark($btn-default-color, $btn-default-color-dark);
+      --btn-default-border-color: light-dark($btn-default-border-color, $btn-default-border-color-dark);
+      --btn-default-hover-bg: light-dark($btn-default-hover-bg, $btn-default-hover-bg-dark);
+      --btn-default-hover-color: light-dark($btn-default-hover-color, $btn-default-hover-color-dark);
+      --btn-default-hover-border-color: light-dark($btn-default-hover-border-color, $btn-default-hover-border-color-dark);
+
+      color-scheme: light dark;
+
+      img {
+        opacity: light-dark(1, .75);
+
+        &:hover {
+          opacity: light-dark(1, .9);
+        }
+      }
+
+      iframe {
+        color-scheme: light;
+      }
+    }
+  }
+}

source/css/_common/components/pages/tag-cloud.styl

@@ -26,3 +26,16 @@ if (hexo-config('darkmode')) {
     }
   }
 }
+
+if (hexo-config('lightdark.enable')) {
+  +light-dark-block() {
+    for $tag-cloud in (0 .. 10) {
+      $tag-cloud-color = mix($tag-cloud-end, $tag-cloud-start, $tag-cloud * 10);
+      $tag-cloud-color-dark = mix($tag-cloud-end-dark, $tag-cloud-start-dark, $tag-cloud * 10);
+      .tag-cloud-{$tag-cloud} {
+        border-bottom-color: light-dark($tag-cloud-color, $tag-cloud-color-dark);
+        color: light-dark($tag-cloud-color, $tag-cloud-color-dark);
+      }
+    }
+  }
+}

source/css/_common/components/third-party/disqusjs.styl

@@ -1,5 +1,13 @@
-if (hexo-config('disqusjs.enable') and hexo-config('darkmode')) {
+if (hexo-config('disqusjs.enable')) {
+  html #dsqjs {
+    color-scheme: light;
+  }
+  if (hexo-config('darkmode')) {
     @media (prefers-color-scheme:dark) {
+      html #dsqjs {
+        color-scheme: dark;
+      }
+
       html #dsqjs a {
         color: var(--link-color);
       }
@@ -37,3 +45,4 @@ if (hexo-config('disqusjs.enable') and hexo-config('darkmode')) {
       }
     }
   }
+}

source/css/_common/components/third-party/gitalk.styl

@@ -14,4 +14,12 @@ if (hexo-config('gitalk.enable')) {
       }
     }
   }
+
+  if (hexo-config('lightdark.enable')) {
+    +light-dark-block() {
+      .gt-container .gt-header-textarea {
+        background-color: light-dark(#f6f6f6, var(--card-bg-color-dark)) !important;
+      }
+    }
+  }
 }

source/css/_common/components/third-party/search.styl

@@ -62,6 +62,11 @@ if (hexo-config('local_search.enable') or hexo-config('algolia_search.enable'))
           background: $grey-dim;
         }
       }
+      if (hexo-config('lightdark.enable')) {
+        +light-dark-block() {
+          background: light-dark($gainsboro, $grey-dim);
+        }
+      }
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
       display: flex;

source/css/_common/scaffolding/highlight/index.styl

@@ -75,6 +75,14 @@ figure.highlight {
   overflow: auto;
   position: relative;
 
+  color-scheme: light;
+
+  if (hexo-config('darkmode')) {
+    @media (prefers-color-scheme: dark) {
+      color-scheme: dark;
+    }
+  }
+
   pre {
     border: 0;
     margin: 0;

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

@@ -69,6 +69,11 @@ if (hexo-config('note.style') != 'disabled') {
               background: mix($note-bg[$type], $body-bg-color-dark, 10%);
             }
           }
+          if (hexo-config('lightdark.enable')) {
+            +light-dark-block() {
+              background: light-dark($note-bg[$type], mix($note-bg[$type], $body-bg-color-dark, 10%));
+            }
+          }
         }
 
         if ($note-style == 'modern') {
@@ -103,6 +108,24 @@ if (hexo-config('note.style') != 'disabled') {
               }
             }
           }
+
+          if (hexo-config('lightdark.enable')) {
+            +light-dark-block() {
+              background: light-dark($note-modern-bg[$type], $note-modern-bg-dark[$type]);
+              border-color: light-dark($note-modern-border[$type], $note-modern-border-dark[$type]);
+              color: light-dark($note-modern-text[$type], $note-modern-text-dark[$type]);
+
+              a:not(.btn) {
+                border-bottom-color: light-dark($note-modern-text[$type], $note-modern-text-dark[$type]);
+                color: light-dark($note-modern-text[$type], $note-modern-text-dark[$type]);
+
+                &:hover {
+                  border-bottom-color: light-dark($note-modern-hover[$type], $note-modern-hover-dark[$type]);
+                  color: light-dark($note-modern-hover[$type], $note-modern-hover-dark[$type]);
+                }
+              }
+            }
+          }
         }
 
         if ($note-style != 'modern') {

source/css/_mixins.styl

@@ -52,6 +52,17 @@ desktop-largest() {
   }
 }
 
+light-dark-block() {
+  if (hexo-config('lightdark.check_supports')){
+    @supports (color: light-dark(red, red)) {
+      {block};
+    }
+  }
+  else {
+    {block};
+  }
+}
+
 sidebar() {
   if (($scheme == 'Muse') or ($scheme == 'Mist')) {
     {block}