Add a light code theme for light mode (#235)

Author: symsmith

app/assets/main.css

@@ -157,6 +157,16 @@ button {
   top: 0;
 }
 
+/* Shiki theme colors */
+html.light .shiki,
+html.light .shiki span {
+  color: var(--shiki-light) !important;
+  background-color: var(--shiki-light-bg) !important;
+  font-style: var(--shiki-light-font-style) !important;
+  font-weight: var(--shiki-light-font-weight) !important;
+  text-decoration: var(--shiki-light-text-decoration) !important;
+}
+
 /* README prose styling */
 .readme-content {
   color: var(--fg-muted);
@@ -238,7 +248,7 @@ button {
 .readme-content pre,
 .readme-content .shiki {
   background: oklch(0.145 0 0) !important;
-  border: 1px solid oklch(0.2686 0 0);
+  border: 1px solid var(--border);
   border-radius: 8px;
   padding: 1rem;
   overflow-x: auto;

server/utils/code-highlight.ts

@@ -265,7 +265,8 @@ export async function highlightCode(
     try {
       let html = shiki.codeToHtml(code, {
         lang: language,
-        theme: 'github-dark',
+        themes: { light: 'github-light', dark: 'github-dark' },
+        defaultColor: 'dark',
       })
 
       // Shiki doesn't encode > in text content (e.g., arrow functions)

server/utils/shiki.ts

@@ -6,7 +6,7 @@ let highlighter: HighlighterCore | null = null
 export async function getShikiHighlighter(): Promise<HighlighterCore> {
   if (!highlighter) {
     highlighter = await createHighlighterCore({
-      themes: [import('@shikijs/themes/github-dark')],
+      themes: [import('@shikijs/themes/github-dark'), import('@shikijs/themes/github-light')],
       langs: [
         // Core web languages
         import('@shikijs/langs/javascript'),
@@ -66,7 +66,8 @@ export function highlightCodeSync(shiki: HighlighterCore, code: string, language
     try {
       let html = shiki.codeToHtml(code, {
         lang: language,
-        theme: 'github-dark',
+        themes: { light: 'github-light', dark: 'github-dark' },
+        defaultColor: 'dark',
       })
       // Remove inline style from <pre> tag so CSS can control appearance
       html = html.replace(/<pre([^>]*)\s+style="[^"]*"/, '<pre$1')

test/unit/docs-text.spec.ts

@@ -242,8 +242,8 @@ describe('renderMarkdown', () => {
     const input = '```ts\nconst a = 1\n```\n\nSome text\n\n```js\nconst b = 2\n```'
     const result = await renderMarkdown(input, emptyLookup)
     expect(result).toContain('Some text')
-    // Both code blocks should be highlighted
-    expect((result.match(/shiki/g) || []).length).toBe(2)
+    // Both code blocks should be highlighted, search for `shiki` class
+    expect((result.match(/["\s]shiki["\s]/g) || []).length).toBe(2)
   })
 
   it('should not confuse inline code with fenced code blocks', async () => {