afirdousi

@Component({
  selector: 'my-app',
  template: `
    <div [ngClass]="theme">
      <h2>{{name}}</h2>
      <div>Themes implemented</div> <br/><br/>
      Select Theme : <a href="#" (click)="setTheme('light')">Light </a>  | 
      <a href="#" (click)="setTheme('dark')">Dark</a> |
      <a href="#" (click)="setTheme('')">No theme</a><br/><br/>
      <p> <b>Current Theme : </b> {{ theme || 'none' }}   </p>

afirdousi

<div [ngClass]="theme">
    <h2>{{name}}</h2>
    <div>Themes implemented</div> <br/><br/>
    Select Theme : <a href="#" (click)="setTheme('light')">Light </a>  | 
    <a href="#" (click)="setTheme('dark')">Dark</a> |
    <a href="#" (click)="setTheme('')">No theme</a><br/><br/>
    <p> <b>Current Theme : </b> {{ theme || 'none' }}   </p>

    <custom-input [placeholder]="'Your name ...'"  ></custom-input> <br/>
    <custom-button [text]="'Sign In'" [state]="'primary'"  ></custom-button>

afirdousi

<div > <!-- We need to apply the theme switch classes here --> 
    <h2>{{name}}</h2>
    <div>Themes implemented</div> <br/><br/>
    Select Theme : <a href="#" (click)="setTheme('light')">Light </a>  | 
    <a href="#" (click)="setTheme('dark')">Dark</a> |
    <a href="#" (click)="setTheme('')">No theme</a><br/><br/>
    <p> <b>Current Theme : </b> {{ theme || 'none' }}   </p>

    <custom-input [placeholder]="'Your name ...'"  ></custom-input> <br/>
    <custom-button [text]="'Sign In'" [state]="'primary'"  ></custom-button>

afirdousi

/* Styles here can easily be cleaned up using SCSS */

:host-context(.dark) .primary button {
  border:1px solid 	#3f00ff;
  background:#fff;
  color:#3f00ff;
}

:host-context(.dark) .primary button:disabled,
:host-context(.dark) .primary button[disabled]{

afirdousi

/* Styles here can easily be cleaned up using SCSS */

:host-context(.light) .primary button {
  border:1px solid 	#0080ff;
  background:#fff;
  color:#0080ff;
}

:host-context(.light) .primary button:disabled,
:host-context(.light) .primary button[disabled]{

afirdousi

input {
  border:1px solid #0080ff;
  background-color:#4c4c4c;
  color:#0080ff;
}

input:disabled,
input[disabled]{
  border:1px solid #d3d3d3;
  background-color:#2e2e2e;

afirdousi

/* Styles here can easily be cleaned up using SCSS */

:host-context(.dark) input {
  border:1px solid #0080ff;
  background-color:#4c4c4c;
  color:#0080ff;
}

:host-context(.dark) input:disabled,
:host-context(.dark) input[disabled]{

afirdousi

/* Styles here can easily be cleaned up using SCSS */

:host-context(.light) input {
  border:1px solid #0080ff;
  background-color:#fff;
  color:#0080ff;
}

:host-context(.light) input:disabled,
:host-context(.light) input[disabled]{

afirdousi

:host-context(.theme-light) p {
  background-color: #eef;
  border:1px solid #d3d3d3;
}

afirdousi

@import 'component.common.css'  /* This will have the actual path of this file in your app */
@import 'custom-input-light.component.css' /* Themes files mostly stay on component level */
@import 'custom-input-dark.component.css'  /* Themes files mostly stay on component level */