Theme Switcher Component

The ThemeSwitcherComponent provides a simple, interactive way for users to toggle between light and dark themes. It is designed to integrate seamlessly into Angular applications and leverages the ThemeService for managing theme changes dynamically.

How to use the component in your app :

1. import the component :

import { ThemeSwitcherComponent } from '@tradinos/cms-frontend-layout';

1. The selector for component , like it :

<lib-theme-switcher>
</lib-theme-switcher>

Features

• Interactive Theme Switching: Allows users to toggle between light and dark themes with a click.

• Dynamic Icon: Displays a sun or moon icon based on the current theme.

• Ripple Effect: Includes a modern ripple effect for a visually engaging user experience.

Methods

toggleTheme()

• Description: Switches between available themes (e.g., light and dark).

• Usage: Automatically called when the component is clicked.

• How it Works:

  • Retrieves the current theme using the ThemeService.

  • Switches to an alternative theme from the available themes defined in the ThemeService

3. Configure the ThemeService

Ensure the ThemeService is properly set up in your application to manage themes. Define the available themes in its configuration.

Example configuration for ThemeService:

themeConfig: { 
  availableThemes: [  // add your own theme
    {
      name: 'lara-light', // add your name 
      extension: 'css', // add your extantion can be css or scss 
    },
    {
      name: 'lara-dark',
      extension: 'css',
    },
  ],
  defaultTheme: { // chose your default theme 
    name: 'lara-light',
    extension: 'css',
  },
}

Theme Family	Light Themes	Dark Themes
Bootstrap4	bootstrap4-light-blue, bootstrap4-light-purple,	bootstrap4-dark-blue, bootstrap4-dark-purple
Material Design (MD)	md-light-indigo , md-light-deeppurple	md-dark-indigo ,md-dark-deeppurple
Fluent	fluent-light	-
Lara	lara-light-blue , lara-light-indigo, lara-light-purple, lara-light-teal	lara-dark-blue ,lara-dark-indigo, lara-dark-purple ,lara-dark-teal
Soho	soho-light	soho-dark
Viva	viva-light	viva-dark
Mira	mira	-
Nano	nano	-
Saga	saga-blue,saga-green,saga-orange,saga-purple	-
vela	-	vela-blue ,vela-green,vela-orange, vela-purple
Arya		arya-blue , arya-green, arya-orange , arya-purple
Nova	nova, Nova-alt ,Nova-accent
Luna	-	luna-amber, luna-blue,luna-green, luna-pink
Rhea	rhea	-

for more info you can visit this link : https://v17.primeng.org/theming#builtinthemes