export enum ThemeOptions {
Red = 'red',
}
export enum ThemeModes {
Light = 'light-theme',
Dark = 'dark-theme',
}
themeOptions: ThemeOption[] = [
{
text: 'Red',
value: ThemeOptions.Red,
},
];
themeChanged() { // Theme color changed
document.body.className = '';
const className = this.activeTheme.value + '-' + this.themeMode;
this.themeService.switchTheme(className);
}
themeModeToggled() { // Theme mode changed: Light / Dark
document.body.className = '';
if (this.themeMode === ThemeModes.Light) {
this.themeMode = ThemeModes.Dark;
} else {
this.themeMode = ThemeModes.Light;
}
const className = this.activeTheme.value + '-' + this.themeMode;
this.themeService.switchTheme(className);
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter