From 3dd84910f4cc42408205521edcfd990471a96884 Mon Sep 17 00:00:00 2001
From: palashb01 <palash.baderia@outlook.com>
Date: Sat, 4 Mar 2023 18:13:50 +0530
Subject: [PATCH] display_settings: Rename and reorder the theme dropdown menu.

Rename 'Sync with computer' to 'Automatic (follows system settings)',
'Light Theme' to 'Light' and 'Dark Theme' to 'Dark', and rename the
color scheme label to 'Theme'.

Reorder the dropdown menu to have light theme before dark theme.
---
 help/dark-theme.md                          |  9 ++++++---
 web/src/settings_config.ts                  | 12 ++++++------
 web/templates/settings/display_settings.hbs |  2 +-
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/help/dark-theme.md b/help/dark-theme.md
index 1afca0c6c8..31a911ff6b 100644
--- a/help/dark-theme.md
+++ b/help/dark-theme.md
@@ -11,12 +11,15 @@ for working in a dark space.
 
 {settings_tab|display-settings}
 
-1. Under **Theme**, configure **Color scheme**.
 
-The default is **Sync with computer**, which detects which theme to use based
+1. Under **General**, select the desired color scheme from the **Theme** dropdown.
+
+
+The default is **Automatic (follows system settings)**, which detects which theme to use based
 on the color scheme used by your operating system.
 
-You can also specify **Dark theme** or **Light theme** if you'd like
+You can also specify **Light** or **Dark** if you'd like
+
 Zulip to use the same color scheme regardless of your operating system
 configuration.
 
diff --git a/web/src/settings_config.ts b/web/src/settings_config.ts
index b2ea8497fd..7cfc9f356b 100644
--- a/web/src/settings_config.ts
+++ b/web/src/settings_config.ts
@@ -69,15 +69,15 @@ export const default_view_values = {
 export const color_scheme_values = {
     automatic: {
         code: 1,
-        description: $t({defaultMessage: "Sync with computer"}),
-    },
-    night: {
-        code: 2,
-        description: $t({defaultMessage: "Dark theme"}),
+        description: $t({defaultMessage: "Automatic (follows system settings)"}),
     },
     day: {
         code: 3,
-        description: $t({defaultMessage: "Light theme"}),
+        description: $t({defaultMessage: "Light"}),
+    },
+    night: {
+        code: 2,
+        description: $t({defaultMessage: "Dark"}),
     },
 };
 
diff --git a/web/templates/settings/display_settings.hbs b/web/templates/settings/display_settings.hbs
index 138f1c37f8..9e3b234750 100644
--- a/web/templates/settings/display_settings.hbs
+++ b/web/templates/settings/display_settings.hbs
@@ -22,7 +22,7 @@
             </select>
         </div>
         <div class="input-group">
-            <label for="color_scheme" class="dropdown-title">{{t "Color scheme" }}</label>
+            <label for="color_scheme" class="dropdown-title">{{t "Theme" }}</label>
             <select name="color_scheme" class="setting_color_scheme prop-element settings_select bootstrap-focus-style" id="{{prefix}}color_scheme" data-setting-widget-type="number">
                 {{> dropdown_options_widget option_values=color_scheme_values}}
             </select>