feat: Prose dark mode

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%;

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)

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;
 	}

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 />

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 />

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",
+				const themeStar = {
-						listStylePosition: "outside",
+					color: theme('colors.gray.200'),
+					h1: {
+						color: theme('colors.eucalyptus.300'),
+					},
+					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'),
 						},
-					ol: {
-						listStyleType: "decimal",
-						listStylePosition: "outside",
 					},
-					maxWidth: "100%",
 				};
 
 				return {
 					DEFAULT: {
 						css: {
-							...markdownCommon,
+							...themeTokiwa,
+							...common,
+						},
+					},
+					dark: {
+						css: {
+							...themeStar,
+							...common,
 						},
 					},
 				};
 			}),
 		}
 	},
+	variants: {
+		extend: { typography: ["dark"] }
+	},
 	plugins: [
 		typography,
 	],