next-ucap-messenger/projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html

<div>
  <mat-list>
    <h1 mat-subheader>테마</h1>

    <ul class="theme-list">
      <li
        class="theme-box default on"
        (click)="onSelectedTabChange('theme-default')"
      ></li>
      <li
        class="theme-box lgRed"
        (click)="onSelectedTabChange('theme-lgRed')"
      ></li>
    </ul>
    <mat-list-item>
      <!-- <mat-tab-group
        mat-stretch-tabs
        animationDuration="0ms"
        (selectedTabChange)="onSelectedTabChange($event)"
      >
        <mat-tab>
          <ng-template mat-tab-label>
            <div class="theme-box default-theme"></div>
            <div>기본값</div>
          </ng-template>
        </mat-tab>
        <mat-tab>
          <ng-template mat-tab-label>
            <div class="theme-box lg-red-theme"></div>
            <div>LG Red</div>
          </ng-template>
        </mat-tab>
      </mat-tab-group> -->
      <!--
     <span>기본값</span>
      <span>어둡게</span>
      <span>밝게</span> -->
    </mat-list-item>

    <mat-divider></mat-divider>

    <h1 mat-subheader>응용 프로그램</h1>
    <mat-list-item>
      <mat-checkbox>응용 프로그램 자동 시작</mat-checkbox>
    </mat-list-item>
    <mat-list-item>
      <mat-checkbox>백그라운드에서 응용 프로그램 열기</mat-checkbox>
    </mat-list-item>
    <mat-list-item>
      <mat-checkbox>닫을 시 응용 프로그램을 계속 실행</mat-checkbox>
    </mat-list-item>

    <mat-divider></mat-divider>

    <h1 mat-subheader>로그인</h1>
    <mat-list-item>
      <mat-checkbox>실행 시 자동 로그인</mat-checkbox>
    </mat-list-item>

    <mat-divider></mat-divider>

    <h1 mat-subheader>언어</h1>
    <mat-list-item>
      <mat-form-field fxFlexFill>
        <mat-select>
          <mat-option value="ko-KR">
            한국어 (대한민국)
          </mat-option>
          <mat-option value="en-US">
            영어 (미국)
          </mat-option>
        </mat-select>
      </mat-form-field>
    </mat-list-item>

    <mat-divider></mat-divider>

    <h1 mat-subheader>시간대</h1>
    <mat-list-item>
      <mat-form-field fxFlexFill>
        <mat-select>
          <mat-option value="ko-KR">
            한국어 (대한민국)
          </mat-option>
          <mat-option value="en-US">
            영어 (미국)
          </mat-option>
        </mat-select>
      </mat-form-field>
    </mat-list-item>
  </mat-list>
</div>