TIL, 2021-10-11
- Quickest way to create a timer:
action$ = timer(2000);
triggerAction() {
this.currentTemplate = this.workingTemplate;
this.action$.subscribe(
() => this.currentTemplate = this.doneTemplate
);
}
How to implement a dark theme with CSS and Angular?
- Use
CSS variables. - Use those variables in your global stylesheet.
- Toggling dark theme: Something like this.
body {
--text-color: #222;
--bkg-color: #fff;
--btn-txt-color: white;
--btn-bg-color: rgb(11, 88, 160);
}
body.dark-theme {
--text-color: #eee;
--bkg-color: #252222;
--btn-txt-color: rgb(46, 43, 43);
--btn-bg-color: rgb(20, 211, 195);
}
toggleDarkTheme(): void {
document.body.classList.toggle('dark-theme');
}
}
- Reading Dark theme preference from OS:
const prefersDarkScheme = window.matchMedia(“(prefers-color-scheme: dark)”);