zulip/static/templates/settings/display_settings.hbs

<div id="display-settings" class="settings-section" data-name="display-settings">
    <form class="display-settings-form">
        <div id="user-lang-settings">
            <!-- 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. -->
            <h3 class="inline-block">{{t "Language settings" }}</h3>
            <div class="alert-notification" id="language-settings-status"></div>

            <div class="input-group user-name-section">
                <label class="inline-block title">{{t "Default language" }}</label>
                <button id="default_language" type="button" class="button btn-link rounded small inline-block">
                    <span id="default_language_name">{{page_params.default_language_name}}</span>
                    <i class="fa fa-pencil"></i>
                </button>
            </div>

            {{> ../default_language_modal guidelines_link="https://zulip.readthedocs.io/en/latest/translating/translating.html"}}
        </div>

        <div id="user-display-settings">
            <h3 class="inline-block">{{t "Display settings" }}</h3>
            <div class="alert-notification" id="display-settings-status"></div>

            <div class="input-group">
                <label for="default_view" class="dropdown-title">{{t "Default view" }}
                    {{> ../help_link_widget link="/help/change-default-view" }}
                </label>
                <select name="default_view" id="default_view">
                    {{> dropdown_options_widget option_values=default_view_values}}
                </select>
            </div>

            <div class="input-group">
                <label for="color_scheme" class="dropdown-title">{{t "Color scheme" }}
                </label>
                <select name="color_scheme" id="color_scheme">
                    {{> dropdown_options_widget option_values=color_scheme_values}}
                </select>
            </div>

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

            <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" id="demote_inactive_streams">
                    {{> dropdown_options_widget option_values=demote_inactive_streams_values}}
                </select>
            </div>
        </div>

        <div id="user-time-settings">
            <h3 class="inline-block">{{t "Time settings" }}</h3>
            <div class="alert-notification" id="time-settings-status"></div>

            <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" id="twenty_four_hour_time">
                    {{#each twenty_four_hour_time_values}}
                    <option value='{{ this.value }}'>{{ this.description }}</option>
                    {{/each}}
                </select>
            </div>

            <div class="input-group">
                <label for="timezone" class="dropdown-title">{{t "Time zone" }}</label>
                <select name="timezone" id="user_timezone">
                    {{#unless page_params.timezone}}
                    <option></option>
                    {{/unless}}

                    {{#each timezones}}
                    <option value="{{ this }}">{{ this }}</option>
                    {{/each}}
                </select>
            </div>
        </div>

        <div id="user-emoji-settings">
            <h3 class="inline-block light">{{t "Emoji settings" }}</h3>
            <div class="alert-notification" id="emoji-settings-status"></div>

            <div class="input-group">
                <div class="emojiset_choices grey-box">
                    {{#each page_params.emojiset_choices}}
                    <label>
                        <input type="radio" class="emojiset_choice" name="emojiset_group" value="{{this.key}}" />
                        <span>{{this.text}}</span>
                        <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=page_params.translate_emoticons
              label=settings_label.translate_emoticons}}
        </div>
    </form>
</div>