refactor(chat): replace only default theme colors

Author: simeonoff

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

@@ -60,6 +60,15 @@ export async function createMarkdownRenderer(
   if (!options?.noHighlighter) {
     const themes = options?.theme ?? DEFAULT_THEME;
     const langs = options?.languages ?? DEFAULT_LANGUAGES;
+    const colorReplacements = {
+      '#6f42c1': 'var(--shiki-purple)',
+      '#032f62': 'var(--shiki-dark-blue)',
+      '#24292e': 'var(--shiki-navy)',
+      '#d73a49': 'var(--shiki-red)',
+      '#005cc5': 'var(--shiki-blue)',
+      '#22863a': 'var(--shiki-green)',
+      '#e36209': 'var(--shiki-orange)',
+    };
 
     const highlighter = await createHighlighter({
       langs,
@@ -70,33 +79,15 @@ export async function createMarkdownRenderer(
       markedShiki({
         highlight(code, lang, _) {
           try {
-            const html = highlighter.codeToHtml(code, { lang, themes });
-
-            const colorMap: Record<string, string> = {
-              '6f42c1': 'var(--shiki-purple)',
-              '032f62': 'var(--shiki-dark-blue)',
-              '24292e': 'var(--shiki-navy)',
-              'd73a49': 'var(--shiki-red)',
-              '005cc5': 'var(--shiki-blue)',
-              '22863a': 'var(--shiki-green)',
-              'e36209': 'var(--shiki-orange)',
-            };
-
-            const processed = html.replace(
-              /style="([^"]*)"/g,
-              (_m, styleContent) => {
-                const replaced = styleContent.replace(
-                  /#([0-9a-fA-F]{6})/g,
-                  (_full: any, hex: string) => {
-                    const rep = colorMap[hex.toLowerCase()];
-                    return rep ?? `#${hex}`;
-                  }
-                );
-                return `style="${replaced}"`;
-              }
-            );
-
-            return processed;
+            return highlighter.codeToHtml(code, {
+              lang,
+              themes,
+              colorReplacements: {
+                'github-light': colorReplacements,
+                'github-dark': colorReplacements,
+              },
+              defaultColor: 'light-dark()',
+            });
           } catch {
             return `<pre><code>${sanitizer(code)}</code></pre>`;
           }

src/components/chat/themes/dark/chat.shared.scss

@@ -4,6 +4,8 @@
 $theme: $base;
 
 :host {
+    color-scheme: dark;
+
     @include css-vars-from-theme($theme, 'ig-chat');
 
     igc-chat-message::part(message-container) {

src/components/chat/themes/light/chat.shared.scss

@@ -4,5 +4,17 @@
 $theme: $base;
 
 :host {
+    color-scheme: light;
+
     @include css-vars-from-theme($theme, 'ig-chat');
+
+    igc-chat-message::part(message-container) {
+        --shiki-purple: #6f42c1;
+        --shiki-navy: #24292e;
+        --shiki-dark-blue: #032f62;
+        --shiki-red: #d73a49;
+        --shiki-blue: #005cc5;
+        --shiki-green: #22863a;
+        --shiki-orange: #e36209;
+    }
 }

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

@@ -3,16 +3,6 @@
 
 $theme: $material;
 
-:host {
-    --shiki-navy: #24292e;
-    --shiki-dark-blue: #032F62;
-    --shiki-purple: #6f42c1;
-    --shiki-red: #d73a49;
-    --shiki-blue: #005cc5;
-    --shiki-green: #22863a;
-    --shiki-orange: #e36209;
-}
-
 [part~='sent'] {
     background: var-get($theme, 'message-background');
 }
@@ -31,4 +21,4 @@ $theme: $material;
     igc-icon-button::part(icon) {
         color: var-get($theme, 'message-actions-color');
     }
-}
+}