feat: update darkmode support

lib/_base.scss

@@ -32,7 +32,7 @@
     //border-radius: 4px;
     background-color: hsla(0, 0%, 0%, 0.054);
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       background-color: hsla(0, 0%, 100%, 0.054);
     }
   }
@@ -58,7 +58,7 @@
     border: 0;
     background-color: hsl(0, 0%, 80%);
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       background-color: hsl(0, 0%, 25%);
     }
   }
@@ -89,7 +89,7 @@
     border-radius: 4px;
     background-color: hsla(0, 0%, 0%, 0.054);
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       background-color: hsla(0, 0%, 100%, 0.054);
     }
 

lib/_inline.scss

@@ -75,7 +75,7 @@
     background-color: hsla(58, 100%, 50%, 0.88);
     color: inherit;
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       background-color: hsla(58, 100%, 15%, 0.88);
     }
   }
@@ -132,7 +132,7 @@
     a:target {
       background-color: hsl(210, 100%, 93%);
 
-      @media (prefers-color-scheme: dark) {
+      @include darkmode-style {
         background-color: hsl(210, 40%, 38%);
       }
     }
@@ -155,7 +155,7 @@
     border-block-end-style: double;
     border-block-end-color: hsla(0, 0%, 0%, 0.54);
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       border-block-end-color: hsla(0, 0%, 100%, 0.54);
     }
   }

lib/_table.scss

@@ -16,7 +16,7 @@
     border-color: hsl(0, 0%, 80%);
     word-break: break-word;
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       border-color: hsl(0, 0%, 25%);
     }
   }
@@ -31,7 +31,7 @@
     border-style: solid;
     border-color: hsl(0, 0%, 80%);
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       border-color: hsl(0, 0%, 25%);
     }
   }

lib/_variables.scss

@@ -3,6 +3,9 @@
 
 // 定义赫蹏根 class 名
 $root-selector: '.heti' !default;
+$darkmode: true !default; // true | false | 'manual'
+$manualmode-auto-selector: '[data-darkmode="auto"] &' !default;
+$manualmode-dark-selector: '[data-darkmode="dark"] &' !default;
 
 // 字体 Fonts
 // 字体栈 Font Stacks
@@ -114,6 +117,25 @@ $_css-reset-scheme: "reset";
   text-indent: 0;
 }
 
+@mixin darkmode-style($darkmode: $darkmode, $dark-selector: $manualmode-dark-selector, $auto-selector: $manualmode-auto-selector) {
+  // 'manual' darkmode should provide darkmode selector and auto-darkmode selector
+  @if $darkmode == 'manual' {
+    #{$dark-selector} {
+      @content;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      #{$auto-selector} {
+        @content;
+      }
+    }
+  } @else if $darkmode {
+    @media (prefers-color-scheme: dark) {
+      @content;
+    }
+  }
+}
+
 // 函数 Functions
 // Function: batch prefix/suffix list-item
 // batch-fix-list((2, 3), '#{$root-selector}--columns-') => (.heti--columns-2, .heti--columns-3)

lib/helpers/_block.scss

@@ -76,7 +76,7 @@
     font-family: $font-family-hei;
     line-height: $line-height-size-normal;
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       border-block-start-color: hsl(0, 0%, 25%);
     }
 
@@ -89,7 +89,7 @@
       &:target {
         background-color: hsl(210, 100%, 93%);
 
-        @media (prefers-color-scheme: dark) {
+        @include darkmode-style {
           background-color: hsl(210, 40%, 38%);
         }
       }