This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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]{ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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]{ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:host-context(.theme-light) p { | |
background-color: #eef; | |
border:1px solid #d3d3d3; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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 */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
input { | |
border:1px solid #0080ff; | |
background-color:#4c4c4c; | |
color:#0080ff; | |
} | |
input:disabled, | |
input[disabled]{ | |
border:1px solid #d3d3d3; | |
background-color:#2e2e2e; |
NewerOlder