Make engine stream react to prefers-color-scheme media query change (#4008)

* Add event listener for theme media query to update engine theme

* tsc fixes

* Add a Playwright test for UI and engine theme switch

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/lib/theme.ts

@@ -1,5 +1,12 @@
 import { AppTheme } from 'wasm-lib/kcl/bindings/AppTheme'
 
+/** A media query matcher for dark mode */
+export const darkModeMatcher =
+  (typeof globalThis.window !== 'undefined' &&
+    'matchMedia' in globalThis.window &&
+    globalThis.window.matchMedia('(prefers-color-scheme: dark)')) ||
+  undefined
+
 export enum Themes {
   Light = 'light',
   Dark = 'dark',
@@ -25,7 +32,7 @@ export function appThemeToTheme(
 export function getSystemTheme(): Exclude<Themes, 'system'> {
   return typeof globalThis.window !== 'undefined' &&
     'matchMedia' in globalThis.window
-    ? window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? darkModeMatcher?.matches
       ? Themes.Dark
       : Themes.Light
     : Themes.Light