3 files changed, 56 insertions, 38 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
new file mode 100644
index 00000000..de04feac
--- /dev/null
+++ b/assets/css/components/_card.scss
@@ -0,0 +1,55 @@
+/* 亮色模式（默认） */
+.card {
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    border-radius: 2px;
+    padding: 1rem 1.35rem;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    color: #333;
+    margin: 1rem 0;
+    position: relative;
+
+    .card-corner {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 50px;
+        height: 50px;
+        background: linear-gradient(-45deg, #f8f8f8 50%, #ddd 50%);
+        clip-path: polygon(100% 0, 0 0, 100% 100%);
+    }
+
+    .card-tags {
+        margin: 0;
+        font-size: 1rem;
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+    }
+
+    .card-title {
+        margin: 0;
+    }
+
+    .card-content {
+        font-size: 1.05rem;
+    }
+
+    /* 暗色模式 */
+    @media (prefers-color-scheme: dark) {
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        background-color: #222;
+        color: #ddd;
+
+        .card-corner {
+            background: linear-gradient(-45deg, #444 50%, #666 50%);
+        }
+
+        .card-tags {
+            a {
+                color: #bbb;
+            }
+        }
+    }
+}
diff --git a/assets/css/components/_shortcodes.scss b/assets/css/components/_shortcodes.scss
index e1e6f6bd..92ed9fbf 100644
--- a/assets/css/components/_shortcodes.scss
+++ b/assets/css/components/_shortcodes.scss
@@ -200,41 +200,3 @@ a.blog-link img {
 .sidenote-content {
     font-size: 1rem
 }
-
-/* card */
-
-.card {
-    border: 1px solid rgba(0,0,0,0.05);
-    border-radius: 2px;
-    padding: 1rem 1.35rem;
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
-    background-color: #fff;
-    margin: 1rem 0;
-
-    position: relative;
-    .card-corner {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 50px;
-        height: 50px;
-        background: linear-gradient(-45deg, #f8f8f8 50%, #ddd 50%);
-        clip-path: polygon(100% 0, 0 0, 100% 100%);
-    }
-}
-
-.card-tags {
-    margin: 0;
-    font-size: 1rem;
-    a {
-        text-decoration: none
-    }
-}
-
-.card-title {
-    margin: 0;
-}
-
-.card-content {
-    font-size: 1.05rem;
-}
diff --git a/assets/css/index.scss b/assets/css/index.scss
index 24105203..44b1229b 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -7,6 +7,7 @@
 @import 'components/content';
 @import 'components/comment';
 @import 'components/shortcodes';
+@import 'components/card';
 @import 'components/footer';
 @import 'components/animation';
 @import 'components/utility';