From 87627633903f9c09ac9d44aef9a9341a4baff2da Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Tue, 15 Oct 2024 12:11:40 -0700
Subject: [PATCH] feat: Prose dark mode

---
 src/app.css                                |  2 +-
 src/content/post/the-perfect-math-class.md |  2 +
 src/routes/+page.svelte                    |  3 +-
 src/routes/[slug=extra]/+page.svelte       |  2 +-
 src/routes/post/[slug]/+page.svelte        |  2 +-
 tailwind.config.ts                         | 51 ++++++++++++++++++----
 6 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/app.css b/src/app.css
index 329d28d..80580bc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -41,7 +41,7 @@
 
   .dark {
     --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
+    --foreground: 230 9.1% 97.8%;
 
     --muted: 12 6.5% 15.1%;
     --muted-foreground: 24 5.4% 63.9%;
diff --git a/src/content/post/the-perfect-math-class.md b/src/content/post/the-perfect-math-class.md
index e1d3717..113e322 100644
--- a/src/content/post/the-perfect-math-class.md
+++ b/src/content/post/the-perfect-math-class.md
@@ -4,3 +4,5 @@ date: '2024-09-15'
 tags: ["Cirno"]
 ---
 # Content
+
+Here are some contents for the perfect math class. [A link](https://example.com)
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 116f99f..db8f46d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -84,7 +84,7 @@
 				</div>
 			</div>
 		</div>
-		<article id="bio-core" class="prose lg:prose-xl dark:prose-invert">
+		<article id="bio-core" class="prose lg:prose-xl dark:prose-dark">
 			<Content />
 		</article>
 	</div>
@@ -175,7 +175,6 @@
 		margin-left: 50px;
 	}
 	#bio-core > :global(h1) {
-		color: theme('colors.eucalyptus.700');
 		font-weight: normal;
 		border-bottom: 1px solid;
 	}
diff --git a/src/routes/[slug=extra]/+page.svelte b/src/routes/[slug=extra]/+page.svelte
index d175188..6dd6036 100644
--- a/src/routes/[slug=extra]/+page.svelte
+++ b/src/routes/[slug=extra]/+page.svelte
@@ -12,7 +12,7 @@
 </svelte:head>
 
 <hr />
-<article class="prose lg:prose-xl dark:prose-invert p-4">
+<article class="prose lg:prose-xl dark:prose-dark p-4">
 	<Content />
 </article>
 <hr />
diff --git a/src/routes/post/[slug]/+page.svelte b/src/routes/post/[slug]/+page.svelte
index 9878002..22fcab7 100644
--- a/src/routes/post/[slug]/+page.svelte
+++ b/src/routes/post/[slug]/+page.svelte
@@ -13,7 +13,7 @@
 <PostHeader post={post} inactive={true}/>
 
 <hr />
-<article class="prose lg:prose-xl dark:prose-invert p-4">
+<article class="prose lg:prose-xl dark:prose-dark p-4">
 	<Content />
 </article>
 <hr />
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0b7da4c..b162b49 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -109,7 +109,18 @@ const config: Config = {
 				mono: "'Fira Code','Cascadia Code',Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New','Sarasa Mono SC','Noto Sans CJK SC','monospace', monospace"
 			},
 			typography: ((theme) => {
-				const markdownCommon = {
+				const common = {
+					ul: {
+						listStyleType: "square",
+						listStylePosition: "outside",
+					},
+					ol: {
+						listStyleType: "decimal",
+						listStylePosition: "outside",
+					},
+					maxWidth: "100%",
+				};
+				const themeTokiwa = {
 					h1: {
 						color: theme('colors.eucalyptus.700'),
 					},
@@ -128,27 +139,49 @@ const config: Config = {
 							color: theme('colors.java.500'),
 						},
 					},
-					ul: {
-						listStyleType: "square",
-						listStylePosition: "outside",
+				};
+				const themeStar = {
+					color: theme('colors.gray.200'),
+					h1: {
+						color: theme('colors.eucalyptus.300'),
 					},
-					ol: {
-						listStyleType: "decimal",
-						listStylePosition: "outside",
+					h2: {
+						color: theme('colors.eucalyptus.300'),
+					},
+					h3: {
+						color: theme('colors.eucalyptus.200'),
+					},
+					h4: {
+						color: theme('colors.eucalyptus.200'),
+					},
+					a: {
+						color: theme('colors.eucalyptus.500'),
+						"&:focus": {
+							color: theme('colors.java.500'),
+						},
 					},
-					maxWidth: "100%",
 				};
 
 				return {
 					DEFAULT: {
 						css: {
-							...markdownCommon,
+							...themeTokiwa,
+							...common,
+						},
+					},
+					dark: {
+						css: {
+							...themeStar,
+							...common,
 						},
 					},
 				};
 			}),
 		}
 	},
+	variants: {
+		extend: { typography: ["dark"] }
+	},
 	plugins: [
 		typography,
 	],