zulip/web/templates/settings/display_settings.hbs

<form class="preferences-settings-form">
    <div class="general-settings {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">
        <!-- this is inline block so that the alert notification can sit beside
        it. If there's not an alert, don't make it inline-block.-->
        <div class="subsection-header inline-block">
            <h3>{{t "General" }}</h3>
            {{> settings_save_discard_widget section_name="general-settings" show_only_indicator=(not for_realm_settings) }}
        </div>
        {{#unless for_realm_settings}}
            {{> language_selection_widget
              section_name="default_language_name"
              setting_value=default_language_name
              section_title=settings_label.default_language_settings_label
              language_code=default_language }}
        {{/unless}}

        <div class="input-group">
            <label for="twenty_four_hour_time" class="dropdown-title">{{ settings_label.twenty_four_hour_time }}</label>
            <select name="twenty_four_hour_time" class="setting_twenty_four_hour_time prop-element settings_select bootstrap-focus-style" id="{{prefix}}twenty_four_hour_time" data-setting-widget-type="string">
                {{#each twenty_four_hour_time_values}}
                    <option value='{{ this.value }}'>{{ this.description }}</option>
                {{/each}}
            </select>
        </div>
        <div class="input-group">
            <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>
        </div>
    </div>

    <div class="emoji-preferences {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">
        <div class="subsection-header">
            <h3 class="light">{{t "Emoji" }}</h3>
            {{> settings_save_discard_widget section_name="emoji-preferences" show_only_indicator=(not for_realm_settings) }}
        </div>

        <div class="input-group">
            <label class="emoji-theme title">{{t "Emoji theme" }}</label>
            <div class="emojiset_choices grey-box prop-element" id="{{prefix}}emojiset" data-setting-widget-type="radio-group" data-setting-choice-type="string">
                {{#each settings_object.emojiset_choices}}
                    <label class="preferences-radio-choice-label">
                        <div class="radio-choice-controls">
                            <input type="radio" class="setting_emojiset_choice" name="emojiset" value="{{this.key}}"/>
                            <span>{{this.text}}</span>
                            {{#if (eq this.key "google-blob")}}
                            <span>(<em>{{t "deprecated" }}</em>)</span>
                            {{> ../help_link_widget link="/help/emoji-and-emoticons#change-your-emoji-set" }}
                            {{/if}}
                        </div>
                        <span class="right">
                            {{#if (eq this.key "text") }}
                            <div class="emoji_alt_code">&nbsp;:relaxed:</div>
                            {{else}}
                            <img class="emoji" src="/static/generated/emoji/images-{{this.key}}-64/1f642.png" />
                            <img class="emoji" src="/static/generated/emoji/images-{{this.key}}-64/1f44d.png" />
                            <img class="emoji" src="/static/generated/emoji/images-{{this.key}}-64/1f680.png" />
                            <img class="emoji" src="/static/generated/emoji/images-{{this.key}}-64/1f389.png" />
                            {{/if}}
                        </span>
                    </label>
                {{/each}}
            </div>
        </div>

        {{> settings_checkbox
          setting_name="translate_emoticons"
          is_checked=settings_object.translate_emoticons
          label=settings_label.translate_emoticons
          help_link="/help/configure-emoticon-translations"
          prefix=prefix}}

        {{> settings_checkbox
          setting_name="display_emoji_reaction_users"
          is_checked=settings_object.display_emoji_reaction_users
          label=settings_label.display_emoji_reaction_users
          prefix=prefix}}
    </div>

    <div class="advanced-settings {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">
        <div class="subsection-header">
            <h3 class="light">{{t "Advanced" }}</h3>
            {{> settings_save_discard_widget section_name="advanced-settings" show_only_indicator=(not for_realm_settings) }}
        </div>

        <div class="input-group">
            <label for="web_mark_read_on_scroll_policy" class="dropdown-title">{{t "Automatically mark messages as read" }}
                {{> ../help_link_widget link="/help/marking-messages-as-read" }}
            </label>
            <select name="web_mark_read_on_scroll_policy" class="setting_web_mark_read_on_scroll_policy prop-element settings_select bootstrap-focus-style" id="{{prefix}}web_mark_read_on_scroll_policy"  data-setting-widget-type="number">
                {{> dropdown_options_widget option_values=web_mark_read_on_scroll_policy_values}}
            </select>
        </div>

        <div class="input-group">
            <label class="title">{{t "User list style" }}</label>
            <div class="user_list_style_values grey-box prop-element" id="{{prefix}}user_list_style" data-setting-widget-type="radio-group" data-setting-choice-type="number">
                {{#each user_list_style_values}}
                    <label class="preferences-radio-choice-label">
                        <div class="radio-choice-controls">
                            <input type="radio" class="setting_user_list_style_choice" name="user_list_style" value="{{this.code}}"/>
                            <span>{{this.description}}</span>
                        </div>
                        <span class="right preview">
                            {{#if (eq this.code 1)}}
                            <div class="user-name-and-status-emoji">
                                <span class="user-name">{{../full_name}}</span>
                                {{> ../status_emoji emoji_code="1f3e0"}}
                            </div>
                            {{/if}}
                            {{#if (eq this.code 2)}}
                            <div class="user-name-and-status-text">
                                <div class="user-name-and-status-emoji">
                                    <span class="user-name">{{../full_name}}</span>
                                    {{> ../status_emoji emoji_code="1f3e0"}}
                                </div>
                                <span class="status-text">{{t "Working remotely" }}</span>
                            </div>
                            {{/if}}
                        </span>
                    </label>
                {{/each}}
            </div>
        </div>

        <div class="input-group thinner setting-next-is-related">
            <label for="web_home_view" class="dropdown-title">{{t "Home view" }}
                {{> ../help_link_widget link="/help/configure-home-view" }}
            </label>
            <select name="web_home_view" class="setting_web_home_view prop-element settings_select bootstrap-focus-style" id="{{prefix}}web_home_view" data-setting-widget-type="string">
                {{> dropdown_options_widget option_values=web_home_view_values}}
            </select>
        </div>

        {{> settings_checkbox
          setting_name="web_escape_navigates_to_home_view"
          is_checked=settings_object.web_escape_navigates_to_home_view
          label=settings_label.web_escape_navigates_to_home_view
          prefix=prefix}}

        <div class="input-group">
            <label for="demote_inactive_streams" class="dropdown-title">{{t "Demote inactive streams" }}
                {{> ../help_link_widget link="/help/manage-inactive-streams" }}
            </label>
            <select name="demote_inactive_streams" class="setting_demote_inactive_streams prop-element settings_select bootstrap-focus-style" id="{{prefix}}demote_inactive_streams"  data-setting-widget-type="number">
                {{> dropdown_options_widget option_values=demote_inactive_streams_values}}
            </select>
        </div>

        <div class="input-group">
            <label for="web_stream_unreads_count_display_policy" class="dropdown-title">{{t "Show unread counts for" }}</label>
            <select name="web_stream_unreads_count_display_policy" class="setting_web_stream_unreads_count_display_policy prop-element bootstrap-focus-style settings_select" id="{{prefix}}web_stream_unreads_count_display_policy"  data-setting-widget-type="number">
                {{> dropdown_options_widget option_values=web_stream_unreads_count_display_policy_values}}
            </select>
        </div>

        {{#each display_settings.settings.user_display_settings}}
            {{> settings_checkbox
              setting_name=this
              is_checked=(lookup ../settings_object this)
              label=(lookup ../settings_label this)
              render_only=(lookup ../display_settings.render_only this)
              prefix=../prefix}}
        {{/each}}

    </div>
</form>