From b29dfd8332f002c096c7b82d5401c4fd52c03e8d Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Wed, 15 Jan 2025 16:05:41 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20New=20light/dark=20theme=20for?=
 =?UTF-8?q?=20Shiki?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.css      |  9 +++++++++
 svelte.config.js | 12 ++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index f85c976..0f54e63 100644
--- a/src/app.css
+++ b/src/app.css
@@ -72,3 +72,12 @@
   src: url('/fonts/GeistMonoVariableVF.woff2') format('woff2');
   font-display: swap;
 }
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: transparent !important;
+  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 aaa6f5c..4d22dda 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -36,11 +36,19 @@ const mdsvexOptions = {
   highlight: {
     highlighter: async (code, lang = 'text') => {
       const highlighter = await getHighlighter({
-        themes: ['vesper'],
+        themes: ['github-light', 'github-dark'],
         langs: ['javascript', 'typescript', 'bash', 'json']
       });
       await highlighter.loadLanguage('javascript', 'typescript', 'bash');
-      const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme: 'vesper' }));
+      const html = escapeSvelte(
+        highlighter.codeToHtml(code, {
+          lang,
+          themes: {
+            light: 'github-light',
+            dark: 'github-dark'
+          }
+        })
+      );
       return `{@html \`${html}\` }`;
     }
   }