Preview:
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);
}
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