From 3711d0ae69d4816c2f2aa831c35b171fda05495d Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Fri, 7 Apr 2023 23:59:47 +0000
Subject: [PATCH] message_list: Update recipient bar color on theme change.

---
 web/src/click_handlers.js | 6 ++++++
 web/src/message_lists.js  | 5 +++++
 web/src/zcommand.js       | 3 +++
 3 files changed, 14 insertions(+)

diff --git a/web/src/click_handlers.js b/web/src/click_handlers.js
index 0f8c620484..c5ad0b085f 100644
--- a/web/src/click_handlers.js
+++ b/web/src/click_handlers.js
@@ -809,16 +809,22 @@ export function initialize() {
         settings_display.launch_default_language_setting_modal();
     });
 
+    // We cannot update recipient bar color using dark_theme.enable/disable due to
+    // it being called before message lists are initialized and the order cannot be changed.
+    // Also, since these buttons are only visible for spectators which doesn't have events,
+    // if theme is changed in a different tab, the theme of this tab remains the same.
     $("body").on("click", "#gear-menu .dark-theme", (e) => {
         // Allow propagation to close gear menu.
         e.preventDefault();
         dark_theme.enable();
+        message_lists.update_recipient_bar_background_color();
     });
 
     $("body").on("click", "#gear-menu .light-theme", (e) => {
         // Allow propagation to close gear menu.
         e.preventDefault();
         dark_theme.disable();
+        message_lists.update_recipient_bar_background_color();
     });
 
     // MAIN CLICK HANDLER
diff --git a/web/src/message_lists.js b/web/src/message_lists.js
index 758bb1d3ee..cbd0b4dffb 100644
--- a/web/src/message_lists.js
+++ b/web/src/message_lists.js
@@ -1,6 +1,7 @@
 import {Filter} from "./filter";
 import * as message_list from "./message_list";
 import * as recent_topics_util from "./recent_topics_util";
+import * as ui_util from "./ui_util";
 
 export let home;
 export let current;
@@ -30,4 +31,8 @@ export function initialize() {
         excludes_muted_topics: true,
     });
     current = home;
+
+    // For users with automatic color scheme, we need to detect change
+    // in `prefers-color-scheme`as it changes based on time.
+    ui_util.listener_for_preferred_color_scheme_change(update_recipient_bar_background_color);
 }
diff --git a/web/src/zcommand.js b/web/src/zcommand.js
index 4dbf2b7bf8..872ffdbb16 100644
--- a/web/src/zcommand.js
+++ b/web/src/zcommand.js
@@ -4,6 +4,7 @@ import * as dark_theme from "./dark_theme";
 import * as feedback_widget from "./feedback_widget";
 import {$t} from "./i18n";
 import * as markdown from "./markdown";
+import * as message_lists from "./message_lists";
 import * as scroll_bar from "./scroll_bar";
 
 /*
@@ -56,6 +57,7 @@ export function switch_to_light_theme() {
         command: "/day",
         on_success(data) {
             dark_theme.disable();
+            message_lists.update_recipient_bar_background_color();
             feedback_widget.show({
                 populate($container) {
                     const rendered_msg = markdown.parse_non_message(data.msg);
@@ -78,6 +80,7 @@ export function switch_to_dark_theme() {
         command: "/night",
         on_success(data) {
             dark_theme.enable();
+            message_lists.update_recipient_bar_background_color();
             feedback_widget.show({
                 populate($container) {
                     const rendered_msg = markdown.parse_non_message(data.msg);