From f82920a0893b161f879a987dd1f3f741cf0a3f9a Mon Sep 17 00:00:00 2001
From: Chengxu Bian <piensengxv@gmail.com>
Date: Mon, 19 Oct 2020 17:48:58 +0800
Subject: [PATCH] fix: make card support darkmode change

---
 _site/scss/components/_card.scss | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/_site/scss/components/_card.scss b/_site/scss/components/_card.scss
index 0f8b4d6..49893af 100644
--- a/_site/scss/components/_card.scss
+++ b/_site/scss/components/_card.scss
@@ -53,16 +53,23 @@
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  .card {
-    background-color: hsl(0, 0%, 16%);
-
-    > figcaption {
-      border-block-start: 1px solid hsl(0, 0%, 20%);
-    }
+@mixin darkmode {
+  background-color: hsl(0, 0%, 16%);
+  > figcaption {
+    border-block-start: 1px solid hsl(0, 0%, 20%);
   }
-
   .card__vertical-container {
     border-color: hsl(0, 0%, 20%);
   }
 }
+
+.card {
+  [data-darkmode="dark"] & {
+    @include darkmode();
+  }
+  @media (prefers-color-scheme: dark) {
+    [data-darkmode="auto"] & {
+      @include darkmode();
+    }
+  }
+}