feat: Light and dark themes

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

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'],
+                  themes,
-				      langs: ['rust', 'nix', "lean", "python"]
+				      langs,
 			      })
-			      await highlighter.loadLanguage('rust', 'nix', 'lean', 'python')
+			      await highlighter.loadLanguage(...langs);
-			      const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme: 'poimandres' }))
+			      const html = escapeSvelte(highlighter.codeToHtml(code, {
+                  lang,
+                  themes: highlightingThemes,
+               }))
 			      return `{@html \`${html}\` }`
 		      }
 	      },