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

@@ -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.
 

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

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>