refactor(chat): don't hardcode code background

Author: simeonoff

src/components/chat/extras/markdown-renderer.ts

@@ -7,8 +7,8 @@ import type { IgcChatMessage } from '../types.js';
 
 const DEFAULT_LANGUAGES = ['javascript', 'typescript', 'html', 'css'];
 const DEFAULT_THEME = {
-  light: 'github-light',
-  dark: 'github-dark',
+  light: 'min-light',
+  dark: 'min-dark',
 };
 
 /**
@@ -83,8 +83,16 @@ export async function createMarkdownRenderer(
               lang,
               themes,
               colorReplacements: {
-                'github-light': colorReplacements,
-                'github-dark': colorReplacements,
+                'github-light': {
+                  ...colorReplacements,
+                  '#fff': 'var(--shiki-bg)',
+                  '#24292e': 'var(--shiki-fg)',
+                },
+                'github-dark': {
+                  ...colorReplacements,
+                  '#24292e': 'var(--shiki-bg)',
+                  '#e1e4e8': 'var(--shiki-fg)',
+                },
               },
               defaultColor: 'light-dark()',
             });

src/components/chat/themes/shared/chat-message/chat-message.common.scss

@@ -3,16 +3,18 @@
 
 $theme: $material;
 
+:host {
+    --shiki-bg: #{var-get($theme, 'code-background')};
+}
+
 [part~='sent'] {
     background: var-get($theme, 'message-background');
 }
 
 [part~='message-container'] {
     color: var-get($theme, 'message-color');
 
-    // override shiki styles
     pre.shiki {
-        background-color: var-get($theme, 'code-background') !important;
         border: rem(1px) solid var-get($theme, 'code-border');
     }
 }