From d015363430f0f60bbd315af2c802ef83c0200cb6 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 18 May 2026 03:35:27 -0600
Subject: [PATCH] feat: add animal-crossing dark mode CSS

---
 style.css | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)

diff --git a/style.css b/style.css
index 04670f3..18c3479 100644
--- a/style.css
+++ b/style.css
@@ -1686,3 +1686,111 @@ html[data-design-theme="animal-crossing"] .beian a {
 html[data-design-theme="animal-crossing"] .beian a:hover {
   color: var(--accent);
 }
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] {
+  color-scheme: dark;
+
+  --accent: #9ed98a;
+  --accent-rgb: 158, 217, 138;
+  --accent-2: #86cb72;
+  --accent-3: #6dbc5e;
+  --accent-secondary-rgb: 245, 210, 90;
+
+  --page-gradient: #1e2d1e;
+  --page-texture:
+    radial-gradient(
+      circle at 20% 50%,
+      rgba(158, 217, 138, 0.06) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at 80% 80%,
+      rgba(245, 210, 90, 0.04) 0%,
+      transparent 50%
+    );
+  --title-gradient: linear-gradient(
+    135deg,
+    #9ed98a 0%,
+    #86cb72 40%,
+    #f5d25a 100%
+  );
+
+  --control-bg: rgba(25, 40, 25, 0.82);
+  --control-border: rgba(158, 217, 138, 0.25);
+  --control-inset: rgba(255, 255, 255, 0.04);
+  --control-fg: #e8f4d8;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] body {
+  color: #e8f4d8;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card {
+  background: rgba(30, 48, 30, 0.82);
+  border: 1px solid rgba(158, 217, 138, 0.18);
+  border-radius: 16px;
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.3),
+    0 1px 2px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card::before {
+  display: none;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card.pin {
+  background: rgba(38, 58, 38, 0.88);
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card h2 {
+  color: #e8f4d8;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card p {
+  color: #b0c8a0;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover,
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus {
+  border-color: rgba(158, 217, 138, 0.45);
+  box-shadow:
+    0 8px 24px rgba(158, 217, 138, 0.2),
+    0 4px 8px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover h2,
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus h2 {
+  color: var(--accent);
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover p,
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus p {
+  color: #c8deb8;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .design-theme-list {
+  background: rgba(22, 36, 22, 0.9);
+  box-shadow:
+    0 12px 30px rgba(0, 0, 0, 0.55),
+    0 6px 12px rgba(0, 0, 0, 0.35),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a {
+  color: #b0c8a0;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a:hover {
+  color: var(--accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-design-theme="animal-crossing"] .card,
+  html[data-design-theme="animal-crossing"] .design-theme-button,
+  html[data-design-theme="animal-crossing"] .theme-toggle {
+    transition-duration: 0.01ms !important;
+    transform: none !important;
+  }
+}