fix: match code highlighter theme to app theme

Fixes that we were always using a light theme, even if the app is in dark mode.

Author: crisbeto

report-app/src/app/services/code-highligher.ts

@@ -7,6 +7,7 @@ import {
 import { createOnigurumaEngine } from 'shiki/engine/oniguruma';
 import angularTs from '@shikijs/langs/angular-ts';
 import githubLight from '@shikijs/themes/github-light';
+import githubDark from '@shikijs/themes/github-dark';
 
 @Injectable({ providedIn: 'root' })
 export class CodeHighligher implements OnDestroy {
@@ -25,7 +26,7 @@ export class CodeHighligher implements OnDestroy {
     if (!this.cachedHighligher) {
       const engine = await createOnigurumaEngine(import('shiki/wasm'));
       this.cachedHighligher = createHighlighterCoreSync({
-        themes: [githubLight],
+        themes: [githubLight, githubDark],
         langs: [angularTs],
         engine,
       });

report-app/src/app/shared/code-viewer.ts

@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 import { CodeHighligher } from '../services/code-highligher';
+import { AppColorMode } from '../services/app-color-mode';
 
 @Component({
   selector: 'app-code-viewer',
@@ -41,6 +42,7 @@ import { CodeHighligher } from '../services/code-highligher';
 })
 export class CodeViewer {
   private highlighter = inject(CodeHighligher);
+  private colorService = inject(AppColorMode);
   protected formatedCode = signal<SafeHtml>('');
 
   code = input.required<string>();
@@ -49,9 +51,10 @@ export class CodeViewer {
     const elementRef = inject(ElementRef);
 
     afterRenderEffect(async () => {
+      const colorMode = this.colorService.colorMode();
       const highlightedString = await this.highlighter.codeToHtml(this.code(), {
         lang: 'angular-ts',
-        theme: 'github-light',
+        theme: colorMode === 'dark' ? 'github-dark' : 'github-light',
       });
       elementRef.nativeElement.innerHTML = highlightedString;
     });