gear_menu: Allow user to configure preferred theme.

We save the preferred theme in localstorage so that user doesn't
have to re-select the theme on every reload. Users on slow
computers might see flash of a theme change, if it happens.

static/js/click_handlers.js

@@ -17,6 +17,7 @@ import * as compose_actions from "./compose_actions";
 import * as compose_error from "./compose_error";
 import * as compose_state from "./compose_state";
 import {media_breakpoints_num} from "./css_variables";
+import * as dark_theme from "./dark_theme";
 import * as emoji_picker from "./emoji_picker";
 import * as hash_util from "./hash_util";
 import * as hotspots from "./hotspots";
@@ -831,6 +832,20 @@ export function initialize() {
         $(".modal.in").removeClass("in");
     });
 
+    // GEAR MENU
+
+    $("body").on("click", "#gear-menu .dark-theme", (e) => {
+        // Allow propagation to close gear menu.
+        e.preventDefault();
+        dark_theme.enable();
+    });
+
+    $("body").on("click", "#gear-menu .light-theme", (e) => {
+        // Allow propagation to close gear menu.
+        e.preventDefault();
+        dark_theme.disable();
+    });
+
     // MAIN CLICK HANDLER
 
     $(document).on("click", (e) => {

static/js/dark_theme.js

@@ -0,0 +1,26 @@
+import $ from "jquery";
+
+import {localstorage} from "./localstorage";
+import {page_params} from "./page_params";
+
+export function enable() {
+    $("body").removeClass("color-scheme-automatic").addClass("dark-theme");
+
+    if (page_params.is_spectator) {
+        const ls = localstorage();
+        ls.set("spectator-theme-preference", "dark");
+    }
+}
+
+export function disable() {
+    $("body").removeClass("color-scheme-automatic").removeClass("dark-theme");
+
+    if (page_params.is_spectator) {
+        const ls = localstorage();
+        ls.set("spectator-theme-preference", "light");
+    }
+}
+
+export function default_preference_checker() {
+    $("body").removeClass("dark-theme").addClass("color-scheme-automatic");
+}

static/js/dark_theme.ts

@@ -1,13 +0,0 @@
-import $ from "jquery";
-
-export function enable(): void {
-    $("body").removeClass("color-scheme-automatic").addClass("dark-theme");
-}
-
-export function disable(): void {
-    $("body").removeClass("color-scheme-automatic").removeClass("dark-theme");
-}
-
-export function default_preference_checker(): void {
-    $("body").removeClass("dark-theme").addClass("color-scheme-automatic");
-}

static/js/ui_init.js

@@ -25,6 +25,7 @@ import * as compose_pm_pill from "./compose_pm_pill";
 import * as composebox_typeahead from "./composebox_typeahead";
 import * as condense from "./condense";
 import * as copy_and_paste from "./copy_and_paste";
+import * as dark_theme from "./dark_theme";
 import * as drafts from "./drafts";
 import * as echo from "./echo";
 import * as emoji_picker from "./emoji_picker";
@@ -37,6 +38,7 @@ import * as i18n from "./i18n";
 import * as invite from "./invite";
 import * as lightbox from "./lightbox";
 import * as linkifiers from "./linkifiers";
+import {localstorage} from "./localstorage";
 import * as markdown from "./markdown";
 import * as markdown_config from "./markdown_config";
 import * as message_edit from "./message_edit";
@@ -547,6 +549,16 @@ export function initialize_everything() {
     const user_settings_params = pop_fields("user_settings");
     const realm_settings_defaults_params = pop_fields("realm_user_settings_defaults");
 
+    if (page_params.is_spectator) {
+        const ls = localstorage();
+        const preferred_theme = ls.get("spectator-theme-preference");
+        if (preferred_theme === "dark") {
+            dark_theme.enable();
+        } else if (preferred_theme === "light") {
+            dark_theme.disable();
+        }
+    }
+
     i18n.initialize(i18n_params);
     tippyjs.initialize();
     popover_menus.initialize();

static/styles/dark_theme.css

@@ -466,6 +466,16 @@ body.dark-theme {
         }
     }
 
+    #gear-menu {
+        .dark-theme {
+            display: none;
+        }
+
+        .light-theme {
+            display: block;
+        }
+    }
+
     .nav .dropdown-menu::after,
     .popover.bottom .arrow {
         border-bottom-color: hsl(235, 18%, 7%);

static/styles/zulip.css

@@ -660,6 +660,10 @@ strong {
     color: inherit;
 }
 
+#gear-menu .light-theme {
+    display: none;
+}
+
 /* .dropdown-menu from v2.3.2
    + https://github.com/zulip/zulip/commit/7a3a3be7e547d3e8f0ed00820835104867f2433d
    basic idea of this fix is to remove decorations from :hover and apply them only

static/templates/gear_menu.hbs

@@ -32,7 +32,17 @@
                 </a>
             </li>
             {{/unless}}
-            <li class="divider hidden-for-spectators" role="presentation"></li>
+            <li role="presentation" class="only-visible-for-spectators">
+                <a class="dark-theme" role="menuitem">
+                    <i class="fa fa-moon-o" aria-hidden="true"></i> {{t 'Switch to dark theme' }}
+                </a>
+            </li>
+            <li role="presentation" class="only-visible-for-spectators">
+                <a class="light-theme" role="menuitem">
+                    <i class="fa fa-sun-o" aria-hidden="true"></i> {{t 'Switch to light theme' }}
+                </a>
+            </li>
+            <li class="divider" role="presentation"></li>
             <li role="presentation">
                 <a href="/help" target="_blank" rel="noopener noreferrer" role="menuitem">
                     <i class="fa fa-question-circle" aria-hidden="true"></i> {{t 'Help center' }}

tools/test-js-with-node

@@ -69,7 +69,7 @@ EXEMPT_FILES = make_set(
         "static/js/copy_and_paste.js",
         "static/js/csrf.ts",
         "static/js/css_variables.js",
-        "static/js/dark_theme.ts",
+        "static/js/dark_theme.js",
         "static/js/debug.js",
         "static/js/deprecated_feature_notice.js",
         "static/js/desktop_integration.js",