Add CEF runtime to Linux builds (#494)

packages/theme/src/appearance.ts

@@ -1,7 +1,10 @@
+import { listen } from "@tauri-apps/api/event";
 import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 
 export type Appearance = "light" | "dark";
 
+const SYSTEM_APPEARANCE_CHANGE_EVENT = "system_appearance_change";
+
 export function getCSSAppearance(): Appearance {
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
@@ -11,6 +14,13 @@ export async function getWindowAppearance(): Promise<Appearance> {
   return appearance ?? getCSSAppearance();
 }
 
+export function subscribeToCSSAppearanceChange(cb: (appearance: Appearance) => void): () => void {
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  const listener = () => cb(media.matches ? "dark" : "light");
+  media.addEventListener("change", listener);
+  return () => media.removeEventListener("change", listener);
+}
+
 export function subscribeToWindowAppearanceChange(
   cb: (appearance: Appearance) => void,
 ): () => void {
@@ -29,6 +39,22 @@ export function subscribeToWindowAppearanceChange(
   return () => container.unsubscribe();
 }
 
+export function subscribeToSystemAppearanceChange(
+  cb: (appearance: Appearance) => void,
+): () => void {
+  const container = {
+    unsubscribe: () => {},
+  };
+
+  void listen<Appearance>(SYSTEM_APPEARANCE_CHANGE_EVENT, (event) => {
+    cb(event.payload);
+  }).then((listener) => {
+    container.unsubscribe = listener;
+  });
+
+  return () => container.unsubscribe();
+}
+
 export function resolveAppearance(
   preferredAppearance: Appearance,
   appearanceSetting: string,
@@ -40,5 +66,16 @@ export function resolveAppearance(
 export function subscribeToPreferredAppearance(cb: (appearance: Appearance) => void) {
   cb(getCSSAppearance());
   void getWindowAppearance().then(cb);
-  subscribeToWindowAppearanceChange(cb);
+  return subscribeToPreferredAppearanceChange(cb);
+}
+
+export function subscribeToPreferredAppearanceChange(cb: (appearance: Appearance) => void) {
+  const unsubscribeCSS = subscribeToCSSAppearanceChange(cb);
+  const unsubscribeWindow = subscribeToWindowAppearanceChange(cb);
+  const unsubscribeSystem = subscribeToSystemAppearanceChange(cb);
+  return () => {
+    unsubscribeCSS();
+    unsubscribeWindow();
+    unsubscribeSystem();
+  };
 }

packages/theme/src/index.ts

@@ -1,9 +1,12 @@
 export type { Appearance } from "./appearance";
 export {
+  subscribeToCSSAppearanceChange,
   getCSSAppearance,
   getWindowAppearance,
   resolveAppearance,
   subscribeToPreferredAppearance,
+  subscribeToPreferredAppearanceChange,
+  subscribeToSystemAppearanceChange,
   subscribeToWindowAppearanceChange,
 } from "./appearance";
 export { defaultDarkTheme, defaultLightTheme } from "./defaultThemes";