message_list: Update recipient bar color on theme change.

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

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);
 }

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);