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.
This commit is contained in:
palashb01 2023-03-04 18:13:50 +05:30 committed by Tim Abbott
parent af07db7971
commit 3dd84910f4
3 changed files with 13 additions and 10 deletions

View File

@ -11,12 +11,15 @@ for working in a dark space.
{settings_tab|display-settings} {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. 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 Zulip to use the same color scheme regardless of your operating system
configuration. configuration.

View File

@ -69,15 +69,15 @@ export const default_view_values = {
export const color_scheme_values = { export const color_scheme_values = {
automatic: { automatic: {
code: 1, code: 1,
description: $t({defaultMessage: "Sync with computer"}), description: $t({defaultMessage: "Automatic (follows system settings)"}),
},
night: {
code: 2,
description: $t({defaultMessage: "Dark theme"}),
}, },
day: { day: {
code: 3, code: 3,
description: $t({defaultMessage: "Light theme"}), description: $t({defaultMessage: "Light"}),
},
night: {
code: 2,
description: $t({defaultMessage: "Dark"}),
}, },
}; };

View File

@ -22,7 +22,7 @@
</select> </select>
</div> </div>
<div class="input-group"> <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"> <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}} {{> dropdown_options_widget option_values=color_scheme_values}}
</select> </select>