NgxThemeToggler - Angular Theme Toggler

ngx-theme-toggler is an standalone, reusable and customizable component for Angular 18, 19 and 20.

It is designed to work with signals and Angular zoneless, providing a lightweight, flexible, and accessible theme toggler.

Installation

If you want to install the latest version (currently 20):

npm install ngx-theme-toggler

Angular 19:

npm install ngx-theme-toggler@angular19

Angular 18:

npm install ngx-theme-toggler@angular18

Basic Usage

Using ngx-theme-toggler is very simple. Only two inputs/outputs are required: [isDark] and (setIsDark). All other assignable attributes are explained below and are for you to customize to your liking.

Prop	Description	Type	Default
`isDark`	Current theme value	`boolean`	`false`
`setIsDark`	Toggle the theme value	`(value: boolean) => void`	X

Here is a simple example of use:

import { Component, signal } from '@angular/core';
import { NgxThemeToggler } from 'ngx-theme-toggler';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxThemeToggler],
  template: `
    <ngx-theme-toggler
      [isDark]="darkMode()"
      (setIsDark)="darkMode.set($event)"
   />
  `
})
export class App {
  darkMode = signal(false);
}`

Advanced Usage / Optional Attributes

In addition to [isDark] and (setIsDark), ngx-theme-toggler provides several optional attributes to customize its appearance and behavior.

<ngx-theme-toggler
   [isDark]="darkMode()"
   (setIsDark)="darkMode.set($event)"
   darkColor="yellow"
   lightColor="blue"
   [colorDuration]="0"
   colorTimingFunction="ease-in-out"
   hover="scale"
   animation="rotateY"
   [faster]="true"
   [tabIndex]="-1"
   ariaLabelDark="Cambiar a modo claro"
   ariaLabelLight="Cambiar a modo oscuro"
/>

Style Options

Input	Description	Type	Default
`darkColor`	Select a custom color for icon in dark mode	string	`'white'`
`lightColor`	Select a custom color for icon in light mode	string	`'black'`
`colorDuration`	Duration in ms for color transition	number	`0`
`colorTimingFunction`	Timing function for color transition	string	`ease`
`hover`	Hover effect. Can be 'scale' or 'shadow'	string	`'scale'`
`animation`	Animation style: `'rotateX'`, `'rotateY'`, `'soft'`	string	`'soft'`
`[faster]`	Speeds up the rotate animation	boolean	`false`

Accessibility Options

Input	Description	Type	Default
`[tabIndex]`	Controls the button `tabindex` attribute	number	`0`
`ariaLabelDark`	Custom `aria-label` when is dark mode	string	`'Change to light mode'`
`ariaLabelLight`	Custom `aria-label` when is light mode	string	`'Change to dark mode'`

The component is already optimized for accessibility by default.

Advance custom styles

Custom size

This component comes with an initial size of 40px. You can easily change its size by setting the --theme-toggler-size CSS variable. For example:

ngx-theme-toggler{
    --theme-toggler-size: 40px;
}

Custom styles

You can customize styles by using ::gn-deep in css. For example:

:ng-deep .ngxThemeToggler__button{
  background color: red
}

Customizable elements

.ngxThemeToggler__button → The main button element
.ngxThemeToggler__svg → The whole svg

You can target different states by combining classes. For example:

:ng-deep .ngxThemeToggler__button.isDark {
  background-color: red;
}

:ng-deep .ngxThemeToggler__svg {
  background-color: blue;
}

📌 Report or suggest something

Choose the form that best fits your case:

🐞 Report a bug
✨ Request an improvement for an existing component
🧩 Suggest a new component

👉 Or go to the form selector.

License

MIT

Package detail