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):
``bash
npm install ngx-theme-toggler
`

Angular 19:
`bash
npm install ngx-theme-toggler@angular19
`

Angular 18:
`bash
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:

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

@Component({
selector: 'app-root',
standalone: true,
imports: [NgxThemeToggler],
template:
[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.

`html
[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"
/>
`

$3

| 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 |

$3

| 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

$3

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:

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

$3

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

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

$3

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

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

`css
: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