discourse/app/assets/javascripts/admin/addon/templates/modal/admin-install-theme.hbs

<DModalBody @class="install-theme" @title="admin.customize.theme.install">
  {{#unless this.directRepoInstall}}
    <div class="install-theme-items">
      <InstallThemeItem
        @value="popular"
        @selection={{this.selection}}
        @label="admin.customize.theme.install_popular"
      />
      <InstallThemeItem
        @value="local"
        @selection={{this.selection}}
        @label="admin.customize.theme.install_upload"
      />
      <InstallThemeItem
        @value="remote"
        @selection={{this.selection}}
        @label="admin.customize.theme.install_git_repo"
      />
      <InstallThemeItem
        @value="create"
        @selection={{this.selection}}
        @label="admin.customize.theme.install_create"
        @showIcon={{true}}
      />
    </div>
  {{/unless}}
  <div class="install-theme-content">
    {{#if this.popular}}
      <div class="popular-theme-items">
        {{#each this.themes as |theme|}}
          <div class="popular-theme-item" data-name={{theme.name}}>
            <div class="popular-theme-name">
              <a
                href={{theme.meta_url}}
                rel="noopener noreferrer"
                target="_blank"
              >
                {{#if theme.component}}
                  {{d-icon
                    "puzzle-piece"
                    title="admin.customize.theme.component"
                  }}
                {{/if}}
                {{theme.name}}
              </a>
              <div class="popular-theme-description">
                {{theme.description}}
              </div>
            </div>

            <div class="popular-theme-buttons">
              {{#if theme.installed}}
                <span>{{i18n "admin.customize.theme.installed"}}</span>
              {{else}}
                <DButton
                  @class="btn-small"
                  @label="admin.customize.theme.install"
                  @disabled={{this.installDisabled}}
                  @icon="upload"
                  @action={{action "installThemeFromList" theme.value}}
                />

                {{#if theme.preview}}
                  <a
                    href={{theme.preview}}
                    rel="noopener noreferrer"
                    target="_blank"
                  >{{d-icon "desktop"}}
                    {{i18n "admin.customize.theme.preview"}}</a>
                {{/if}}
              {{/if}}
            </div>
          </div>
        {{/each}}
      </div>
    {{/if}}

    {{#if this.local}}
      <div class="inputs">
        <input
          onchange={{action "uploadLocaleFile"}}
          type="file"
          id="file-input"
          accept=".dcstyle.json,application/json,.tar.gz,application/x-gzip,.zip,application/zip"
        /><br />
        <span class="description">{{i18n
            "admin.customize.theme.import_file_tip"
          }}</span>
      </div>
    {{/if}}

    {{#if this.remote}}
      <div class="inputs">
        <div class="repo">
          <div class="label">{{i18n
              "admin.customize.theme.import_web_tip"
            }}</div>
          <Input
            @value={{this.uploadUrl}}
            placeholder={{this.urlPlaceholder}}
          />
        </div>

        <DButton
          @class="btn-small advanced-repo"
          @action={{action "toggleAdvanced"}}
          @label="admin.customize.theme.import_web_advanced"
        />

        {{#if this.advancedVisible}}
          <div class="branch">
            <div class="label">{{i18n
                "admin.customize.theme.remote_branch"
              }}</div>
            <Input @value={{this.branch}} placeholder="main" />
          </div>
        {{/if}}

        {{#if this.showPublicKey}}
          <div class="public-key">
            <div class="label">{{i18n "admin.customize.theme.public_key"}}</div>
            <div class="public-key-text-wrapper">
              <Textarea
                class="public-key-value"
                readonly={{true}}
                @value={{this.publicKey}}
              />
              <CopyButton @selector="textarea.public-key-value" />
            </div>
          </div>
        {{/if}}
      </div>
    {{/if}}

    {{#if this.create}}
      <div class="inputs">
        <div class="label">{{i18n "admin.customize.theme.create_name"}}</div>
        <Input @value={{this.name}} placeholder={{this.placeholder}} />

        <div class="label">{{i18n "admin.customize.theme.create_type"}}</div>
        <ComboBox
          @valueProperty="value"
          @content={{this.createTypes}}
          @value={{this.selectedType}}
          @onChange={{action (mut this.selectedType)}}
        />
      </div>
    {{/if}}

    {{#if this.directRepoInstall}}
      <div class="repo">
        <div class="label">{{html-safe
            (i18n
              "admin.customize.theme.direct_install_tip" name=this.uploadName
            )
          }}</div>
        <pre><code>{{this.uploadUrl}}</code></pre>
      </div>
    {{/if}}
  </div>

</DModalBody>

{{#unless this.popular}}
  <div class="modal-footer">
    {{#if this.duplicateRemoteThemeWarning}}
      <div class="install-theme-warning">
        ⚠️
        {{this.duplicateRemoteThemeWarning}}
      </div>
    {{/if}}
    {{#if this.themeCannotBeInstalled}}
      <div class="install-theme-warning">
        ⚠️
        {{this.themeCannotBeInstalled}}
      </div>
    {{/if}}
    <DButton
      @action={{action "installTheme"}}
      @disabled={{this.installDisabled}}
      @class="btn {{if this.themeCannotBeInstalled 'btn-danger' 'btn-primary'}}"
      @label={{this.submitLabel}}
    />
    <DModalCancel @close={{route-action "closeModal"}} />
  </div>
{{/unless}}