feat(elements): listen to prefers-color-scheme event to switch theme (#3518)

Author: hugo-vrijswijk

packages/elements/src/components/app/app.component.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-enum-comparison */
 import type { PropertyValues } from 'lit';
-import { html, nothing, unsafeCSS, isServer } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { html, isServer, nothing, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
 import type {
   FileUnderTestModel,
   Metrics,
@@ -24,10 +24,9 @@ import { mutantChanges } from '../../lib/mutant-changes.js';
 import { locationChange$, View } from '../../lib/router.js';
 import type { Theme } from '../../lib/theme.js';
 import { globals, tailwind } from '../../style/index.js';
+import { type MutationTestReportFilePickerComponent } from '../file-picker/file-picker.component.js';
 import { RealTimeElement } from '../real-time-element.js';
 import theme from './theme.scss?inline';
-import { type MutationTestReportFilePickerComponent } from '../file-picker/file-picker.component.js';
-import { createRef, ref } from 'lit/directives/ref.js';
 
 interface BaseContext {
   path: string[];
@@ -88,7 +87,10 @@ export class MutationTestReportAppComponent extends RealTimeElement {
     return getComputedStyle(this).getPropertyValue('--mut-body-bg');
   }
 
-  #filePickerRef = createRef<MutationTestReportFilePickerComponent>();
+  @query('mte-file-picker')
+  private declare filePicker: MutationTestReportFilePickerComponent;
+
+  #abortController = new AbortController();
 
   @property()
   public get title(): string {
@@ -161,6 +163,10 @@ export class MutationTestReportAppComponent extends RealTimeElement {
     }
   }
 
+  #handlePrefersColorScheme = () => {
+    this.theme = this.getTheme();
+  };
+
   private getTheme(): Theme {
     // 1. check local storage
     const theme = isLocalStorageAvailable() && localStorage.getItem('mutation-testing-elements-theme');
@@ -246,6 +252,9 @@ export class MutationTestReportAppComponent extends RealTimeElement {
 
   public connectedCallback() {
     super.connectedCallback();
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener?.('change', this.#handlePrefersColorScheme, { signal: this.#abortController.signal });
     this.subscriptions.push(locationChange$.subscribe((path) => (this.path = path)));
     this.initializeSse();
   }
@@ -328,6 +337,7 @@ export class MutationTestReportAppComponent extends RealTimeElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
+    this.#abortController.abort();
     this.subscriptions.forEach((subscription) => subscription.unsubscribe());
   }
 
@@ -347,15 +357,15 @@ export class MutationTestReportAppComponent extends RealTimeElement {
   public render() {
     if (this.context.result ?? this.errorMessage) {
       return html`
-        <mte-file-picker ${ref(this.#filePickerRef)} .rootModel="${this.rootModel}"></mte-file-picker>
+        <mte-file-picker .rootModel="${this.rootModel}"></mte-file-picker>
         <div class="container bg-white pb-4 font-sans text-gray-800 motion-safe:transition-max-width">
           <div class="space-y-4 transition-colors">
             ${this.renderErrorMessage()}
             <mte-theme-switch @theme-switch="${this.themeSwitch}" class="sticky top-offset z-20 float-right pt-6" .theme="${this.theme}">
             </mte-theme-switch>
             ${this.renderTitle()} ${this.renderTabs()}
             <mte-breadcrumb
-              @mte-file-picker-open="${() => this.#filePickerRef.value?.open()}"
+              @mte-file-picker-open="${() => this.filePicker.open()}"
               .view="${this.context.view}"
               .path="${this.context.path}"
             ></mte-breadcrumb>

packages/elements/src/components/drawer/drawer.component.ts

@@ -1,9 +1,7 @@
 import { ResizeController } from '@lit-labs/observers/resize-controller.js';
 import { html, LitElement, nothing, unsafeCSS } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import type { Ref } from 'lit/directives/ref.js';
-import { createRef, ref } from 'lit/directives/ref.js';
 import { renderIf } from '../../lib/html-helpers.js';
 import { tailwind } from '../../style/index.js';
 import { renderEmoji } from '../drawer-mutant/util.js';
@@ -34,7 +32,8 @@ export class MutationTestReportDrawer extends LitElement {
     }
   }
 
-  #headerRef: Ref<HTMLElement>;
+  @query('header')
+  private declare header: HTMLElement | undefined;
 
   #contentHeightController: ResizeController<number>;
 
@@ -46,11 +45,10 @@ export class MutationTestReportDrawer extends LitElement {
     this.hasDetail = false;
     this.#abortController = new AbortController();
 
-    this.#headerRef = createRef();
     this.#contentHeightController = new ResizeController(this, {
       callback: (entries) => {
         const total = entries[0]?.contentRect.height ?? 0;
-        const header = this.#headerRef.value?.clientHeight ?? 0;
+        const header = this.header?.clientHeight ?? 0;
         return total - header;
       },
     });
@@ -87,7 +85,7 @@ export class MutationTestReportDrawer extends LitElement {
     const height = this.#contentHeightController.value;
 
     return html`<aside @click="${(event: Event) => event.stopPropagation()}" class="ml-6 mr-4">
-      <header class="w-full py-4" ${ref(this.#headerRef)}>
+      <header class="w-full py-4">
         <h2>
           <slot name="header"></slot>
           ${renderIf(

packages/elements/src/components/file/file.component.ts

@@ -1,8 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { html, nothing, svg, unsafeCSS } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
-import { createRef, ref } from 'lit/directives/ref.js';
 import type { FileUnderTestModel, MutantModel } from 'mutation-testing-metrics';
 import type { MutantResult, MutantStatus } from 'mutation-testing-report-schema/api';
 import { findDiffIndices, gte, highlightCode, transformHighlightedLines } from '../../lib/code-helpers.js';
@@ -39,9 +38,10 @@ export class FileComponent extends RealTimeElement {
   @state()
   public declare mutants: MutantModel[];
 
-  #abortController: AbortController;
+  @query('code')
+  private declare code: HTMLElement;
 
-  private codeRef = createRef<HTMLElement>();
+  #abortController: AbortController;
 
   public constructor() {
     super();
@@ -124,7 +124,7 @@ export class FileComponent extends RealTimeElement {
         id="report-code-block"
         class="line-numbers ${this.selectedMutantStates.map((state) => `mte-selected-${state}`).join(' ')} flex rounded-md py-4"
       >
-        <code ${ref(this.codeRef)} class="flex language-${this.model.language}">
+        <code class="flex language-${this.model.language}">
           <table>${map(this.lines, (line, lineIndex) => {
         const lineNr = lineIndex + 1;
         const mutantDots = this.renderMutantDots(mutantLineMap.get(lineNr));
@@ -180,7 +180,7 @@ export class FileComponent extends RealTimeElement {
     }
 
     this.selectedMutant = mutant;
-    const lines = this.codeRef.value!.querySelectorAll('tr.line');
+    const lines = this.code.querySelectorAll('tr.line');
     for (let i = mutant.location.start.line - 1; i < mutant.location.end.line; i++) {
       lines.item(i).classList.add(diffOldClass);
     }
@@ -192,9 +192,10 @@ export class FileComponent extends RealTimeElement {
   }
 
   private removeCurrentDiff() {
-    const oldDiffLines = this.codeRef.value!.querySelectorAll(`.${diffOldClass}`);
+    const code = this.code;
+    const oldDiffLines = code.querySelectorAll(`.${diffOldClass}`);
     oldDiffLines.forEach((oldDiffLine) => oldDiffLine.classList.remove(diffOldClass));
-    const newDiffLines = this.codeRef.value!.querySelectorAll(`.${diffNewClass}`);
+    const newDiffLines = code.querySelectorAll(`.${diffNewClass}`);
     newDiffLines.forEach((newDiffLine) => newDiffLine.remove());
   }
 
@@ -295,7 +296,7 @@ export class FileComponent extends RealTimeElement {
   }
 
   #animateMutantToggle(mutant: MutantModel) {
-    beginElementAnimation(this.codeRef.value, 'mutant-id', mutant.id);
+    beginElementAnimation(this.code, 'mutant-id', mutant.id);
   }
 }