fix: consistent code block colors with shiki defaultColor: false

Use CSS variables only (no inline styles) for syntax highlighting.
Both light and dark themes controlled via CSS selectors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: rsbh

packages/chronicle/src/server/vite-config.ts

@@ -41,7 +41,7 @@ export async function createViteConfig(options: ViteConfigOptions): Promise<Inli
           remarkDirective,
         ],
         rehypePlugins: [
-          [rehypeShiki, { themes: { light: 'github-light', dark: 'github-dark' } }],
+          [rehypeShiki, { themes: { light: 'github-light', dark: 'github-dark' }, defaultColor: false }],
         ],
         mdExtensions: ['.md'],
         mdxExtensions: ['.mdx'],

packages/chronicle/src/themes/default/Page.module.css

@@ -38,18 +38,22 @@
   margin-bottom: var(--rs-space-3);
 }
 
-.content :global(pre code span) {
-  color: var(--shiki-light);
+.content :global(pre) {
+  background-color: var(--shiki-light-bg, #fff);
 }
 
-:global([data-theme="dark"]) .content :global(pre code span) {
-  color: var(--shiki-dark);
+.content :global(pre code span) {
+  color: var(--shiki-light);
 }
 
 :global([data-theme="dark"]) .content :global(pre) {
   background-color: var(--shiki-dark-bg, #24292e);
 }
 
+:global([data-theme="dark"]) .content :global(pre code span) {
+  color: var(--shiki-dark);
+}
+
 .content img {
   max-width: 100%;
   height: auto;