From 8632ae7a795a75f758f7d986673731aa15283892 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Tue, 15 Oct 2024 18:59:02 -0700
Subject: [PATCH] feat: Light and dark themes

---
 src/app.css      | 10 ++++++++++
 svelte.config.js | 25 +++++++++++++++++++++----
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/app.css b/src/app.css
index e30ce37..e302cbc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -157,3 +157,13 @@ a.current-link {
 		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;
+}
diff --git a/svelte.config.js b/svelte.config.js
index a0ac1de..242dc27 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -10,6 +10,19 @@ import { getHighlighter } from 'shiki'
 
 const contentDir = process.env?.CHRYSOBLOG_CONTENT ?? "src/content";
 
+const langs = [
+   "rust",
+   "nix",
+   "python",
+   "lean",
+   "javascript",
+   "typescript",
+];
+const highlightingThemes = {
+   light: 'solarized-light',
+   dark: 'andromeeda',
+};
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
@@ -27,12 +40,16 @@ const config = {
          ],
          highlight: {
 		      highlighter: async (code, lang = 'text') => {
+               const themes = Object.keys(highlightingThemes).map(function(k){ return highlightingThemes[k] });
 			      const highlighter = await getHighlighter({
-				      themes: ['poimandres'],
-				      langs: ['rust', 'nix', "lean", "python"]
+                  themes,
+				      langs,
 			      })
-			      await highlighter.loadLanguage('rust', 'nix', 'lean', 'python')
-			      const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme: 'poimandres' }))
+			      await highlighter.loadLanguage(...langs);
+			      const html = escapeSvelte(highlighter.codeToHtml(code, {
+                  lang,
+                  themes: highlightingThemes,
+               }))
 			      return `{@html \`${html}\` }`
 		      }
 	      },