Skip to content

Instantly share code, notes, and snippets.

Anas R. Firdousi afirdousi

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.