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