Merge pull request 'feat: Dark mode' (#15) from styling/dark-mode into main

Reviewed-on: #15

.pre-commit-config.yaml

@@ -11,7 +11,7 @@ repos:
   hooks:
   - id: conventional-pre-commit
     stages: [commit-msg]
-    args: [feat, fix, chore, test, build, merge]
+    args: [feat, fix, chore, test, build, merge, refactor]
 - repo: local
   hooks:
   - id: eslint

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "chrysoblog",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "chrysoblog",
-			"version": "0.0.1",
+			"version": "0.0.2",
 			"dependencies": {
 				"@fortawesome/fontawesome-free": "^6.6.0",
 				"bits-ui": "^0.21.13",
@@ -15,6 +15,7 @@
 				"rehype-slug": "^6.0.0",
 				"remark-github-blockquote-alert": "^1.2.1",
 				"remark-toc": "^9.0.0",
+				"shiki": "^1.22.0",
 				"svelte-radix": "^1.1.1",
 				"tailwind-merge": "^2.5.2",
 				"tailwind-variants": "^0.2.1"
@@ -1019,6 +1020,57 @@
 				"win32"
 			]
 		},
+		"node_modules/@shikijs/core": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.22.0.tgz",
+			"integrity": "sha512-S8sMe4q71TJAW+qG93s5VaiihujRK6rqDFqBnxqvga/3LvqHEnxqBIOPkt//IdXVtHkQWKu4nOQNk0uBGicU7Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/engine-javascript": "1.22.0",
+				"@shikijs/engine-oniguruma": "1.22.0",
+				"@shikijs/types": "1.22.0",
+				"@shikijs/vscode-textmate": "^9.3.0",
+				"@types/hast": "^3.0.4",
+				"hast-util-to-html": "^9.0.3"
+			}
+		},
+		"node_modules/@shikijs/engine-javascript": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.22.0.tgz",
+			"integrity": "sha512-AeEtF4Gcck2dwBqCFUKYfsCq0s+eEbCEbkUuFou53NZ0sTGnJnJ/05KHQFZxpii5HMXbocV9URYVowOP2wH5kw==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/types": "1.22.0",
+				"@shikijs/vscode-textmate": "^9.3.0",
+				"oniguruma-to-js": "0.4.3"
+			}
+		},
+		"node_modules/@shikijs/engine-oniguruma": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.22.0.tgz",
+			"integrity": "sha512-5iBVjhu/DYs1HB0BKsRRFipRrD7rqjxlWTj4F2Pf+nQSPqc3kcyqFFeZXnBMzDf0HdqaFVvhDRAGiYNvyLP+Mw==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/types": "1.22.0",
+				"@shikijs/vscode-textmate": "^9.3.0"
+			}
+		},
+		"node_modules/@shikijs/types": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.22.0.tgz",
+			"integrity": "sha512-Fw/Nr7FGFhlQqHfxzZY8Cwtwk5E9nKDUgeLjZgt3UuhcM3yJR9xj3ZGNravZZok8XmEZMiYkSMTPlPkULB8nww==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/vscode-textmate": "^9.3.0",
+				"@types/hast": "^3.0.4"
+			}
+		},
+		"node_modules/@shikijs/vscode-textmate": {
+			"version": "9.3.0",
+			"resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.3.0.tgz",
+			"integrity": "sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==",
+			"license": "MIT"
+		},
 		"node_modules/@sveltejs/adapter-auto": {
 			"version": "3.2.5",
 			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.2.5.tgz",
@@ -1175,6 +1227,15 @@
 			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
+		"node_modules/@types/mdast": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+			"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
 		"node_modules/@types/node": {
 			"version": "22.5.5",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz",
@@ -1806,6 +1867,16 @@
 				}
 			]
 		},
+		"node_modules/ccount": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+			"integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/chai": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz",
@@ -1838,6 +1909,26 @@
 				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
+		"node_modules/character-entities-html4": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+			"integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/character-entities-legacy": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+			"integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/check-error": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
@@ -1917,6 +2008,16 @@
 			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
 		},
+		"node_modules/comma-separated-tokens": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+			"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/commander": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2032,6 +2133,19 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/devlop": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+			"integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+			"license": "MIT",
+			"dependencies": {
+				"dequal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/didyoumean": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2703,6 +2817,35 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/hast-util-to-html": {
+			"version": "9.0.3",
+			"resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.3.tgz",
+			"integrity": "sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"ccount": "^2.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"hast-util-whitespace": "^3.0.0",
+				"html-void-elements": "^3.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"stringify-entities": "^4.0.0",
+				"zwitch": "^2.0.4"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-html/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"license": "MIT"
+		},
 		"node_modules/hast-util-to-string": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz",
@@ -2716,6 +2859,29 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/hast-util-whitespace": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+			"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/html-void-elements": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+			"integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/human-signals": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
@@ -3041,6 +3207,27 @@
 				"@jridgewell/sourcemap-codec": "^1.5.0"
 			}
 		},
+		"node_modules/mdast-util-to-hast": {
+			"version": "13.2.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+			"integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"trim-lines": "^3.0.0",
+				"unist-util-position": "^5.0.0",
+				"unist-util-visit": "^5.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/mdast-util-toc": {
 			"version": "7.1.0",
 			"resolved": "https://registry.npmjs.org/mdast-util-toc/-/mdast-util-toc-7.1.0.tgz",
@@ -3060,15 +3247,6 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
-		"node_modules/mdast-util-toc/node_modules/@types/mdast": {
-			"version": "4.0.4",
-			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
-			"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
-			"license": "MIT",
-			"dependencies": {
-				"@types/unist": "*"
-			}
-		},
 		"node_modules/mdast-util-toc/node_modules/mdast-util-to-string": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
@@ -3173,6 +3351,95 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-encode": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+			"integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/micromark-util-sanitize-uri": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+			"integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-encode": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/micromark-util-types": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+			"integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
 		"node_modules/micromatch": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -3367,6 +3634,18 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/oniguruma-to-js": {
+			"version": "0.4.3",
+			"resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.4.3.tgz",
+			"integrity": "sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==",
+			"license": "MIT",
+			"dependencies": {
+				"regex": "^4.3.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			}
+		},
 		"node_modules/optionator": {
 			"version": "0.9.4",
 			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3893,6 +4172,16 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/property-information": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+			"integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3952,6 +4241,12 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/regex": {
+			"version": "4.3.3",
+			"resolved": "https://registry.npmjs.org/regex/-/regex-4.3.3.tgz",
+			"integrity": "sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==",
+			"license": "MIT"
+		},
 		"node_modules/rehype-slug": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz",
@@ -3998,15 +4293,6 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
-		"node_modules/remark-toc/node_modules/@types/mdast": {
-			"version": "4.0.4",
-			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
-			"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
-			"license": "MIT",
-			"dependencies": {
-				"@types/unist": "*"
-			}
-		},
 		"node_modules/resolve": {
 			"version": "1.22.8",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -4148,6 +4434,20 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/shiki": {
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.22.0.tgz",
+			"integrity": "sha512-/t5LlhNs+UOKQCYBtl5ZsH/Vclz73GIqT2yQsCBygr8L/ppTdmpL4w3kPLoZJbMKVWtoG77Ue1feOjZfDxvMkw==",
+			"license": "MIT",
+			"dependencies": {
+				"@shikijs/core": "1.22.0",
+				"@shikijs/engine-javascript": "1.22.0",
+				"@shikijs/engine-oniguruma": "1.22.0",
+				"@shikijs/types": "1.22.0",
+				"@shikijs/vscode-textmate": "^9.3.0",
+				"@types/hast": "^3.0.4"
+			}
+		},
 		"node_modules/siginfo": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
@@ -4187,6 +4487,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/space-separated-tokens": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/stackback": {
 			"version": "0.0.2",
 			"resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -4256,6 +4566,20 @@
 				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
 			}
 		},
+		"node_modules/stringify-entities": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+			"integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+			"license": "MIT",
+			"dependencies": {
+				"character-entities-html4": "^2.0.0",
+				"character-entities-legacy": "^3.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/strip-ansi": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -4705,6 +5029,16 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/trim-lines": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+			"integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/ts-api-utils": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -4806,6 +5140,25 @@
 			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
 			"license": "MIT"
 		},
+		"node_modules/unist-util-position": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+			"integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-position/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"license": "MIT"
+		},
 		"node_modules/unist-util-stringify-position": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
@@ -4905,6 +5258,20 @@
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
 		},
+		"node_modules/vfile": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+			"integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/vfile-message": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
@@ -4920,6 +5287,39 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/vfile/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"license": "MIT"
+		},
+		"node_modules/vfile/node_modules/unist-util-stringify-position": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+			"integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile/node_modules/vfile-message": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+			"integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-stringify-position": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/vite": {
 			"version": "5.4.6",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
@@ -5234,6 +5634,16 @@
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
+		},
+		"node_modules/zwitch": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+			"integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
 		}
 	}
 }

package.json

@@ -52,6 +52,7 @@
 		"rehype-slug": "^6.0.0",
 		"remark-github-blockquote-alert": "^1.2.1",
 		"remark-toc": "^9.0.0",
+		"shiki": "^1.22.0",
 		"svelte-radix": "^1.1.1",
 		"tailwind-merge": "^2.5.2",
 		"tailwind-variants": "^0.2.1"

src/app.css

@@ -1,5 +1,4 @@
 @import url(./style/content.css);
-@import url(./style/code.css);
 @import '@fortawesome/fontawesome-free/css/all.min.css';
 @tailwind base;
 @tailwind components;
@@ -37,11 +36,14 @@
     --ring: 20 14.3% 4.1%;
 
     --radius: 0.5rem;
+
+	 --name: theme('colors.java.800');
+	 --navlink: theme('colors.eucalyptus.400');
   }
 
   .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%;
@@ -68,9 +70,15 @@
     --destructive-foreground: 60 9.1% 97.8%;
 
     --ring: 24 5.7% 82.9%;
+	 --name: theme('colors.java.300');
+	 --navlink: theme('colors.eucalyptus.200');
   }
 }
 
+body {
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
 @layer base {
   * {
     @apply border-border;
@@ -91,3 +99,71 @@ html {
 hr {
   @apply separator;
 }
+
+a, button {
+	color: theme('colors.eucalyptus.400');
+	&:hover,
+	&:focus {
+		color: theme('colors.java.500');
+	}
+}
+.dark a:not(.disabled-link),button {
+	text-shadow: 0 0 5px;
+}
+.nav-link, .nav-link * {
+	color: var(--navlink);
+	@apply text-lg;
+	font-weight: 500;
+	font-family: serif;
+}
+a.disabled-link {
+	color: rgb(128,128,128);
+	pointer-events: none;
+}
+a:not(.icon) {
+	position: relative;
+	text-decoration: inherit;
+
+	&::after {
+		content: "";
+		display: block;
+		width: 100%;
+		position: absolute;
+		height: 2px;
+		bottom: 0;
+		left: 0;
+		background-color: theme('colors.java.500');
+		transform: scaleX(0);
+		transition: transform 0.3s ease;
+	}
+
+	&:hover,
+	&:focus {
+		&::after {
+			content: "";
+			position: absolute;
+			transform: scaleX(1);
+		}
+	}
+}
+a.current-link {
+	color: theme('colors.magenta.500');
+
+	&::after {
+		background-color: theme('colors.magenta.500');
+	}
+	&:hover,
+	&:focus {
+		color: theme('colors.magenta.500');
+	}
+}
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}

src/content/home.md

@@ -17,7 +17,7 @@ Strongest of Gensokyo
 
 # Projects
 
-> This is a quote
+> People say nothing is impossible but I do nothing everyday. -- Winnie The Pooh
 
 ```python
 for i in range(9):

src/content/post/the-perfect-math-class.md

@@ -4,3 +4,15 @@ date: '2024-09-15'
 tags: ["Cirno"]
 ---
 # Content
+
+Here are some contents for the perfect math class. [A link](https://example.com)
+
+```lean
+theorem perfect_number_theorem (n: Nat),
+	Nat.is_odd → ¬perfect n := by
+	intro h
+	apply cirno_theorem
+```
+
+> :>WARNING
+> The proof is elusive!

src/lib/components/ThemeSwitch.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Moon, Sun } from 'lucide-svelte';
+	import { theme, setTheme } from '$lib/theme'
+
+	function toggleTheme() {
+		theme.update((currentTheme) => {
+			const newTheme = currentTheme === 'tokiwa' ? 'star' : 'tokiwa'
+
+			document.documentElement.setAttribute('color-scheme', newTheme)
+			localStorage.setItem('color-scheme', newTheme)
+
+			if (newTheme === "tokiwa") {
+				document.documentElement.classList.remove('dark');
+			} else {
+				document.documentElement.classList.add('dark');
+			}
+			setTheme(newTheme);
+			return newTheme
+		})
+	}
+</script>
+
+<button class="nav-link" on:click={toggleTheme} aria-label="Toggle Theme">
+	{#if $theme === "tokiwa"}
+		<Sun />
+	{:else}
+		<Moon />
+	{/if}
+</button>
+
+<style>
+	button {
+		padding: 0;
+		font-weight: inherit;
+		background: none;
+		border: none;
+		box-shadow: none;
+		overflow: hidden;
+	}
+</style>

src/lib/theme.ts

@@ -0,0 +1,13 @@
+import { writable } from 'svelte/store'
+import { browser } from "$app/environment"
+
+type Theme = 'tokiwa' | 'star'
+
+const userTheme = browser && localStorage.getItem('color-scheme')
+
+export const theme = writable(userTheme ?? 'tokiwa')
+
+// set the theme
+export function setTheme(newTheme: Theme) {
+	theme.set(newTheme)
+}

src/routes/+layout.svelte

@@ -31,59 +31,6 @@
 {/if}
 
 <style>
-	:global(.nav-link) {
-		@apply text-lg;
-		font-weight: 500;
-		font-family: serif;
-	}
-	:global(a.disabled-link) {
-		color: rgb(128,128,128);
-		pointer-events: none;
-	}
-	:global(a) {
-		color: theme('colors.eucalyptus.400');
-		&:hover,
-		&:focus {
-			color: theme('colors.java.500');
-		}
-	}
-	:global(a):not(.icon) {
-		position: relative;
-		text-decoration: inherit;
-
-		&::after {
-			content: "";
-			display: block;
-			width: 100%;
-			position: absolute;
-			height: 2px;
-			bottom: 0;
-			left: 0;
-			background-color: theme('colors.java.500');
-			transform: scaleX(0);
-			transition: transform 0.3s ease;
-		}
-
-		&:hover,
-		&:focus {
-			&::after {
-				content: "";
-				position: absolute;
-				transform: scaleX(1);
-			}
-		}
-	}
-	:global(a.current-link) {
-		color: theme('colors.magenta.500');
-
-		&::after {
-			background-color: theme('colors.magenta.500');
-		}
-		&:hover,
-		&:focus {
-			color: theme('colors.magenta.500');
-		}
-	}
 	#layout {
 		max-width: max(80vw, 100vh);
 		margin-left: auto;

src/routes/+page.svelte

@@ -2,6 +2,7 @@
 	import { routes } from "$lib/sitemap.ts"
 	import { Separator } from "$lib/components/ui/separator/index.js";
 	import { Rss } from "lucide-svelte";
+	import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
 	let scrollPosition: number = .5;
 	let scrollHeight: number = 1;
 	let progress: number = 0;
@@ -50,22 +51,27 @@
 				 style="padding-bottom: {(1 - progress) * 50}vh"
 		>
 			<div id="navbar" class="h-5 items-center space-x-4 text-sm">
-				<a href="#bio">Bio</a>
+				<a class="nav-link" href="#bio">Bio</a>
 				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 				{#each routes as item}
 					{#if item.route !== "/"}
-						<a href={item.route} class:disabled-link={item.disabled}>{item.name}</a>
+						<a
+							href={item.route}
+							class="nav-link"
+							class:disabled-link={item.disabled}>{item.name}</a>
 						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 					{/if}
 				{/each}
-				<a class="icon" href="/rss.xml"><Rss /></a>
+				<a class="icon nav-link" href="/rss.xml"><Rss /></a>
+				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
+				<ThemeSwitch />
 			</div>
 		</div>
 	</div>
 </div>
 
 <main>
-	<div id="bio" class="bg-background">
+	<div id="bio">
 		<div class="p-1">
 			<div class="flex">
 				<div id="info flex-col">
@@ -81,7 +87,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>
@@ -131,8 +137,9 @@
 	main {
 		width: 100%;
 		@apply bg-background;
+		@apply dark:bg-gray-800;
 		box-shadow:
-			0px -5px 10px 10px rgba(200,200,200,0.4);
+			0px -5px 10px 10px var(--foreground);
 	}
 	#bio {
 		max-width: max(50vw, 100vh);
@@ -145,14 +152,14 @@
 		font-family: serif;
 		font-size: min(10vw, 60px);
 		display: inline-block;
-		color: theme('colors.java.800');
+		color: var(--name);
 	}
 	#avatar {
 		line-height: 0;
 		display: inline-block;
 		margin: 5px;
 		margin-right: auto;
-		border: 4px solid theme('colors.eucalyptus.500');
+		border: 1px solid var(--name);
 		border-radius: 50%;
 		aspect-ratio: 1;
 		max-width: 20%;
@@ -171,7 +178,6 @@
 		margin-left: 50px;
 	}
 	#bio-core > :global(h1) {
-		color: theme('colors.eucalyptus.700');
 		font-weight: normal;
 		border-bottom: 1px solid;
 	}

src/routes/Navbar.svelte

@@ -2,6 +2,7 @@
 	import { page } from '$app/stores';
 	import { routes } from "$lib/sitemap.ts"
 	import { name } from '$content/metadata.json';
+	import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
 	import { Rss } from "lucide-svelte";
 
 	function isCurrentLink(pathname, route) {
@@ -20,6 +21,7 @@
 			href={item.route}>{item.name}</a>
 	{/each}
 	<a class="nav-link icon" href="/rss.xml"><Rss /></a>
+	<div><ThemeSwitch /></div>
 </div>
 
 <style>
@@ -27,7 +29,7 @@
 		font-family: serif;
 		font-size: 3rem;
 		font-weight: normal;
-		color: theme('colors.java.800');
+		color: var(--name);
 	}
 	#navbar {
 		display: flex;

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

src/style/code.css

@@ -1,209 +0,0 @@
-/* Adapted from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-material-light.css */
-
-code[class*="language-"],
-pre[class*="language-"] {
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	color: #90a4ae;
-	background: #fafafa;
-	font-family: Roboto Mono, monospace;
-	font-size: 1em;
-	line-height: 1.5em;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-}
-
-code[class*="language-"]::-moz-selection,
-pre[class*="language-"]::-moz-selection,
-code[class*="language-"] ::-moz-selection,
-pre[class*="language-"] ::-moz-selection {
-	background: #cceae7;
-	color: #263238;
-}
-
-code[class*="language-"]::selection,
-pre[class*="language-"]::selection,
-code[class*="language-"] ::selection,
-pre[class*="language-"] ::selection {
-	background: #cceae7;
-	color: #263238;
-}
-
-:not(pre) > code[class*="language-"] {
-	white-space: normal;
-	border-radius: 0.2em;
-	padding: 0.1em;
-}
-
-pre[class*="language-"] {
-	overflow: auto;
-	position: relative;
-	margin: 0.5em 0;
-	padding: 1.25em 1em;
-}
-
-.language-css > code,
-.language-sass > code,
-.language-scss > code {
-	color: #f76d47;
-}
-
-[class*="language-"] .namespace {
-	opacity: 0.7;
-}
-
-.token.atrule {
-	color: #7c4dff;
-}
-
-.token.attr-name {
-	color: #39adb5;
-}
-
-.token.attr-value {
-	color: #f6a434;
-}
-
-.token.attribute {
-	color: #f6a434;
-}
-
-.token.boolean {
-	color: #7c4dff;
-}
-
-.token.builtin {
-	color: #39adb5;
-}
-
-.token.cdata {
-	color: #39adb5;
-}
-
-.token.char {
-	color: #39adb5;
-}
-
-.token.class {
-	color: #39adb5;
-}
-
-.token.class-name {
-	color: #6182b8;
-}
-
-.token.comment {
-	color: #aabfc9;
-}
-
-.token.constant {
-	color: #7c4dff;
-}
-
-.token.deleted {
-	color: #e53935;
-}
-
-.token.doctype {
-	color: #aabfc9;
-}
-
-.token.entity {
-	color: #e53935;
-}
-
-.token.function {
-	color: #7c4dff;
-}
-
-.token.hexcode {
-	color: #f76d47;
-}
-
-.token.id {
-	color: #7c4dff;
-	font-weight: bold;
-}
-
-.token.important {
-	color: #7c4dff;
-	font-weight: bold;
-}
-
-.token.inserted {
-	color: #39adb5;
-}
-
-.token.keyword {
-	color: #7c4dff;
-}
-
-.token.number {
-	color: #f76d47;
-}
-
-.token.operator {
-	color: #39adb5;
-}
-
-.token.prolog {
-	color: #aabfc9;
-}
-
-.token.property {
-	color: #39adb5;
-}
-
-.token.pseudo-class {
-	color: #f6a434;
-}
-
-.token.pseudo-element {
-	color: #f6a434;
-}
-
-.token.punctuation {
-	color: #39adb5;
-}
-
-.token.regex {
-	color: #6182b8;
-}
-
-.token.selector {
-	color: #e53935;
-}
-
-.token.string {
-	color: #f6a434;
-}
-
-.token.symbol {
-	color: #7c4dff;
-}
-
-.token.tag {
-	color: #e53935;
-}
-
-.token.unit {
-	color: #f76d47;
-}
-
-.token.url {
-	color: #e53935;
-}
-
-.token.variable {
-	color: #e53935;
-}

src/style/content.css

@@ -1,5 +1,4 @@
 blockquote {
-    background: #fafaee;
     font-style: italic;
 }
 

svelte.config.js

@@ -1,14 +1,41 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import { mdsvex } from 'mdsvex';
 import adapter from '@sveltejs/adapter-static';
 
+import { mdsvex, escapeSvelte } from 'mdsvex';
 import remarkAlert from './src/lib/markdown.js'
 import relativeImages from 'mdsvex-relative-images'
 import remarkToc from 'remark-toc'
 import rehypeSlug from 'rehype-slug'
+import { getHighlighter } from 'shiki'
 
 const contentDir = process.env?.CHRYSOBLOG_CONTENT ?? "src/content";
 
+const langs = [
+   "javascript",
+   "lean",
+   "lisp",
+   "nix",
+   "python",
+   "rust",
+   "toml",
+   "typescript",
+   "yaml",
+   "c",
+   "c++",
+   "sh",
+];
+const highlightingThemes = {
+   light: 'vitesse-light',
+   dark: 'vitesse-dark',
+};
+
+const themes = Object.keys(highlightingThemes).map(function(k){ return highlightingThemes[k] });
+const highlighter = await getHighlighter({
+   themes,
+   langs,
+})
+await highlighter.loadLanguage(...langs);
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
@@ -23,7 +50,16 @@ const config = {
          ],
          rehypePlugins: [
             rehypeSlug,
-         ]
+         ],
+         highlight: {
+		      highlighter: async (code, lang = 'text') => {
+			      const html = escapeSvelte(highlighter.codeToHtml(code, {
+                  lang,
+                  themes: highlightingThemes,
+               }))
+			      return `{@html \`${html}\` }`
+		      }
+	      },
       }),
       vitePreprocess(),
    ],

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,61 @@ const config: Config = {
 							color: theme('colors.java.500'),
 						},
 					},
-					ul: {
+					blockquote: {
-						listStyleType: "square",
+						color: theme('colors.gray.800'),
-						listStylePosition: "outside",
 					},
-					ol: {
+					code: {
-						listStyleType: "decimal",
+						color: theme('colors.gray.800'),
-						listStylePosition: "outside",
+					},
+				};
+				const themeStar = {
+					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'),
+						},
+					},
+					blockquote: {
+						color: theme('colors.gray.300'),
+					},
+					code: {
+						color: theme('colors.gray.300'),
 					},
-					maxWidth: "100%",
 				};
 
 				return {
 					DEFAULT: {
 						css: {
-							...markdownCommon,
+							...themeTokiwa,
+							...common,
+						},
+					},
+					dark: {
+						css: {
+							...themeStar,
+							...common,
 						},
 					},
 				};
 			}),
 		}
 	},
+	variants: {
+		extend: { typography: ["dark"] }
+	},
 	plugins: [
 		typography,
 	],