Skip to content

Instantly share code, notes, and snippets.

Anas R. Firdousi afirdousi

Block or report user

Report or block afirdousi

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View app.component.ts
@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>
View app.component.html
<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>
View app.component.html
<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>
View custom-button-dark.component.css
/* 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]{
View custom-button-light.component.css
/* 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]{
View custom-input-dark.component.css
/* 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]{
View custom-input-light.component.css
/* 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]{
View host-context-example.css
:host-context(.theme-light) p {
background-color: #eef;
border:1px solid #d3d3d3;
}
View custom-input.component.css
@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 */
View custom-input-dark.component.css
input {
border:1px solid #0080ff;
background-color:#4c4c4c;
color:#0080ff;
}
input:disabled,
input[disabled]{
border:1px solid #d3d3d3;
background-color:#2e2e2e;
You can’t perform that action at this time.