An Angular component for toggling theme in a simple and customizable way
ngx-theme-toggler is an standalone, reusable and customizable component for Angular 18, 19 and 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:
})
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;
}
``