<div *skyThemeIf="'modern'" class="sky-theme-if-test">modern theme</div>
<div *skyThemeIf="'default'" class="sky-theme-if-test">default theme</div>

<div [skyTheme]="themeSettings">
  <div *skyThemeIf="'modern'" class="sky-theme-if-wrapped-test">
    wrapped in modern theme
  </div>
  <div *skyThemeIf="'default'" class="sky-theme-if-wrapped-test">
    wrapped in default theme
  </div>
</div>

<div *skyThemeIf="testThemeName" class="sky-theme-if-input-test">
  This text shown for {{ testThemeName }} theme.
</div>

<div class="sky-theme-template">
  <ng-container *skyThemeIf="'default'">
    default:<ng-container *ngTemplateOutlet="foo" />
  </ng-container>
  <ng-container *skyThemeIf="'modern'">
    modern:<ng-container *ngTemplateOutlet="foo" />
  </ng-container>
  <ng-template #foo>
    <ng-content select=".projectable" />
  </ng-template>
</div>
