From 17a41407738bc7a03d584b968182904c36544953 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Wed, 5 Apr 2023 17:42:00 +0000
Subject: [PATCH] ui_util: Extract listener for change in
 `preferred-color-scheme`.

This will further be used for recipient bar colors since they
have different colors in dark and light color scheme.
---
 web/src/realm_logo.js | 14 ++------------
 web/src/ui_util.ts    | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/web/src/realm_logo.js b/web/src/realm_logo.js
index 4af5b026bc..b4ed1702f9 100644
--- a/web/src/realm_logo.js
+++ b/web/src/realm_logo.js
@@ -3,6 +3,7 @@ import $ from "jquery";
 import * as channel from "./channel";
 import {page_params} from "./page_params";
 import * as settings_data from "./settings_data";
+import * as ui_util from "./ui_util";
 import * as upload_widget from "./upload_widget";
 
 export function build_realm_logo_widget(upload_function, is_night) {
@@ -105,16 +106,5 @@ export function initialize() {
     render();
 
     // Rerender the realm-logo when the browser detects color scheme changes.
-    const media_query_list = window.matchMedia("(prefers-color-scheme: dark)");
-    // MediaQueryList.addEventListener is missing in Safari < 14
-    const listener = () => {
-        if ($(":root").hasClass("color-scheme-automatic")) {
-            render();
-        }
-    };
-    if ("addEventListener" in media_query_list) {
-        media_query_list.addEventListener("change", listener);
-    } else {
-        media_query_list.addListener(listener);
-    }
+    ui_util.listener_for_preferred_color_scheme_change(render);
 }
diff --git a/web/src/ui_util.ts b/web/src/ui_util.ts
index 394c4bc384..43f1bbbd73 100644
--- a/web/src/ui_util.ts
+++ b/web/src/ui_util.ts
@@ -94,3 +94,18 @@ export async function play_audio(elem: HTMLVideoElement): Promise<void> {
         blueslip.debug(`Unable to play audio. ${error.name}: ${error.message}`);
     }
 }
+
+export function listener_for_preferred_color_scheme_change(callback: () => void): void {
+    const media_query_list = window.matchMedia("(prefers-color-scheme: dark)");
+    // MediaQueryList.addEventListener is missing in Safari < 14
+    const listener: () => void = () => {
+        if ($(":root").hasClass("color-scheme-automatic")) {
+            callback();
+        }
+    };
+    if ("addEventListener" in media_query_list) {
+        media_query_list.addEventListener("change", listener);
+    } else {
+        (media_query_list as MediaQueryList).addListener(listener);
+    }
+}