This is a custom theme made for Material
in Angular
. It used Twitter
color palletes by default, feel free to make changes as you want.
- Download/clone this repository
- Copy both
light-theme.scss
anddark-theme.scss
tosrc
directory. - Import those files in your
styles.scss
.
@import "light-theme.scss";
@import "dark-theme.scss";
- Add these files in all
angular.json
styles sections as well
...
"styles": [
...,
"src/light-theme.scss",
"src/dark-theme.scss",
"src/styles.scss",
...
],
...
- Copy the
theming-service
folder into the desired module(s) directories. - Import the
service
in module(s)
...
import { ThemingService } from './theming-service/themes.service';
import { OverlayContainer } from '@angular/cdk/overlay';
...
Add it providers section
...
providers: [
...,
ThemingService,
...
]
...
Add classes to export class
...
export class YourModule {
constructor(overlayContainer: OverlayContainer, theming: ThemesService) {
theming.defaultTheme.subscribe((theme: string) => {
let themeToRemove = 'dark-theme';
if (theme === 'dark-theme') {
themeToRemove = 'light-theme';
document.querySelector("body").style.background = '#060b0f';
} else {
document.querySelector("body").style.background = '#fff';
}
overlayContainer.getContainerElement().classList.remove(themeToRemove);
overlayContainer.getContainerElement().classList.add(theme);
});
}
}
...
- In root html template (or any you want), create a
container div
withclass
to take the current theme value.
<div [className]="theme">
...
ALL YOUR COMPNENTS HERE
...
</div>
IN .ts
theme: string = 'light-theme'; //default to light
contructor(private theming: ThemingService) {}
ngOnInit() {
...
//Get the current theme
this.theming.defaultTheme.subscribe((theme: string) => {
this.theme = theme;
});
...
}
//Change theme theme function to be called accordingly
changeTheme(theme: string) {
this.theming.toggleTheme(theme);
}