theme: Rename day->light and night->dark in the frontend code.

This commit standardizes the naming of the day and night themes to light
and dark, respectively. This makes the codebase more consistent with
the naming used in the settings and the user interface.

web/src/settings_config.ts

@@ -108,11 +108,11 @@ export const color_scheme_values = {
         code: 1,
         description: $t({defaultMessage: "Automatic (follows system settings)"}),
     },
-    day: {
+    light: {
         code: 3,
         description: $t({defaultMessage: "Light"}),
     },
-    night: {
+    dark: {
         code: 2,
         description: $t({defaultMessage: "Dark"}),
     },

web/src/settings_data.ts

@@ -225,7 +225,7 @@ export function should_mask_unread_count(sub_muted: boolean): boolean {
 }
 
 export function using_dark_theme(): boolean {
-    if (user_settings.color_scheme === settings_config.color_scheme_values.night.code) {
+    if (user_settings.color_scheme === settings_config.color_scheme_values.dark.code) {
         return true;
     }
 

web/src/theme.ts

@@ -21,9 +21,9 @@ function set_automatic_theme(): void {
 }
 
 export function set_theme(color_scheme: number): void {
-    if (color_scheme === settings_config.color_scheme_values.night.code) {
+    if (color_scheme === settings_config.color_scheme_values.dark.code) {
         set_dark_theme();
-    } else if (color_scheme === settings_config.color_scheme_values.day.code) {
+    } else if (color_scheme === settings_config.color_scheme_values.light.code) {
         set_light_theme();
     } else {
         // If the color_scheme_code is not valid, fallback to automatic.

web/src/zcommand.ts

@@ -64,11 +64,11 @@ export function tell_user(msg: string): void {
 
 export function switch_to_light_theme(): void {
     send({
-        command: "/day",
+        command: "/light",
         on_success(raw_data) {
             const data = data_schema.parse(raw_data);
             requestAnimationFrame(() => {
-                theme.set_theme_and_update(settings_config.color_scheme_values.day.code);
+                theme.set_theme_and_update(settings_config.color_scheme_values.light.code);
             });
             feedback_widget.show({
                 populate($container) {
@@ -77,7 +77,7 @@ export function switch_to_light_theme(): void {
                 },
                 on_undo() {
                     send({
-                        command: "/night",
+                        command: "/dark",
                     });
                 },
                 title_text: $t({defaultMessage: "Light theme"}),
@@ -89,11 +89,11 @@ export function switch_to_light_theme(): void {
 
 export function switch_to_dark_theme(): void {
     send({
-        command: "/night",
+        command: "/dark",
         on_success(raw_data) {
             const data = data_schema.parse(raw_data);
             requestAnimationFrame(() => {
-                theme.set_theme_and_update(settings_config.color_scheme_values.night.code);
+                theme.set_theme_and_update(settings_config.color_scheme_values.dark.code);
             });
             feedback_widget.show({
                 populate($container) {
@@ -102,7 +102,7 @@ export function switch_to_dark_theme(): void {
                 },
                 on_undo() {
                     send({
-                        command: "/day",
+                        command: "/light",
                     });
                 },
                 title_text: $t({defaultMessage: "Dark theme"}),
@@ -131,14 +131,14 @@ export function process(message_content: string): boolean {
         return true;
     }
 
-    const day_commands = ["/day", "/light"];
-    if (day_commands.includes(content)) {
+    const light_commands = ["/day", "/light"];
+    if (light_commands.includes(content)) {
         switch_to_light_theme();
         return true;
     }
 
-    const night_commands = ["/night", "/dark"];
-    if (night_commands.includes(content)) {
+    const dark_commands = ["/night", "/dark"];
+    if (dark_commands.includes(content)) {
         switch_to_dark_theme();
         return true;
     }

web/templates/popovers/navbar/navbar_gear_menu_popover.hbs

@@ -91,11 +91,11 @@
                 <label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="select-automatic-theme" aria-label="{{t 'Select automatic theme' }}" data-tooltip-template-id="automatic-theme-template" tabindex="0">
                     <i class="zulip-icon zulip-icon-monitor" aria-hidden="true"></i>
                 </label>
-                <input type="radio" id="select-light-theme" class="tab-option" name="theme-select" data-theme-code="{{color_scheme_values.day.code}}" {{#if (eq user_color_scheme color_scheme_values.day.code)}}checked{{/if}} />
+                <input type="radio" id="select-light-theme" class="tab-option" name="theme-select" data-theme-code="{{color_scheme_values.light.code}}" {{#if (eq user_color_scheme color_scheme_values.light.code)}}checked{{/if}} />
                 <label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="select-light-theme" aria-label="{{t 'Select light theme' }}" data-tippy-content="{{t 'Light theme' }}" tabindex="0">
                     <i class="zulip-icon zulip-icon-sun" aria-hidden="true"></i>
                 </label>
-                <input type="radio" id="select-dark-theme" class="tab-option" name="theme-select" data-theme-code="{{color_scheme_values.night.code}}" {{#if (eq user_color_scheme color_scheme_values.night.code)}}checked{{/if}} />
+                <input type="radio" id="select-dark-theme" class="tab-option" name="theme-select" data-theme-code="{{color_scheme_values.dark.code}}" {{#if (eq user_color_scheme color_scheme_values.dark.code)}}checked{{/if}} />
                 <label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="select-dark-theme" aria-label="{{t 'Select dark theme' }}" data-tippy-content="{{t 'Dark theme' }}" tabindex="0">
                     <i class="zulip-icon zulip-icon-moon" aria-hidden="true"></i>
                 </label>

web/templates/popovers/navbar/navbar_personal_menu_popover.hbs

@@ -111,11 +111,11 @@
                         <label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="select-automatic-theme" aria-label="{{t 'Select automatic theme' }}" data-tooltip-template-id="automatic-theme-template" tabindex="0">
                             <i class="zulip-icon zulip-icon-monitor" aria-hidden="true"></i>
                         </label>
-                        <input type="radio" id="select-light-theme" class="tab-option" name="theme-select" data-theme-code="{{color_scheme_values.day.code}}" {{#if (eq user_color_scheme color_scheme_values.day.code)}}checked{{/if}} />
+                        <input type="radio" id="select-light-theme" class="tab-option" name="theme-select" data-theme-code="{{color_scheme_values.light.code}}" {{#if (eq user_color_scheme color_scheme_values.light.code)}}checked{{/if}} />
                         <label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="select-light-theme" aria-label="{{t 'Select light theme' }}" data-tippy-content="{{t 'Light theme' }}" tabindex="0">
                             <i class="zulip-icon zulip-icon-sun" aria-hidden="true"></i>
                         </label>
-                        <input type="radio" id="select-dark-theme" class="tab-option" name="theme-select" data-theme-code="{{color_scheme_values.night.code}}" {{#if (eq user_color_scheme color_scheme_values.night.code)}}checked{{/if}} />
+                        <input type="radio" id="select-dark-theme" class="tab-option" name="theme-select" data-theme-code="{{color_scheme_values.dark.code}}" {{#if (eq user_color_scheme color_scheme_values.dark.code)}}checked{{/if}} />
                         <label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="select-dark-theme" aria-label="{{t 'Select dark theme' }}" data-tippy-content="{{t 'Dark theme' }}" tabindex="0">
                             <i class="zulip-icon zulip-icon-moon" aria-hidden="true"></i>
                         </label>

web/tests/settings_data.test.js

@@ -234,7 +234,7 @@ test_message_policy(
 );
 
 run_test("using_dark_theme", () => {
-    user_settings.color_scheme = settings_config.color_scheme_values.night.code;
+    user_settings.color_scheme = settings_config.color_scheme_values.dark.code;
     assert.equal(settings_data.using_dark_theme(), true);
 
     user_settings.color_scheme = settings_config.color_scheme_values.automatic.code;
@@ -251,7 +251,7 @@ run_test("using_dark_theme", () => {
     };
     assert.equal(settings_data.using_dark_theme(), false);
 
-    user_settings.color_scheme = settings_config.color_scheme_values.day.code;
+    user_settings.color_scheme = settings_config.color_scheme_values.light.code;
     assert.equal(settings_data.using_dark_theme(), false);
 });