ng-theme-toggle

ng-theme-toggle is a 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 toggle button. It is also fully compatible with SSR, CSR and prerender.

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

    npm install ng-theme-toggle
  

Angular 19:

    npm install ng-theme-toggle@v19-lts
  

Angular 18:

    npm install ng-theme-toggle@v18-lts
  

Using ng-theme-toggle is easy:

• Provide a complete signal to the [isDarkSignal] input and the component will handle the state automatically.
• Configure its style, behavior, and accessibility using inputs..
• Style it with customizable CSS variables to match your design needs.

Here’s a basic usage example:

    import { Component, signal } from '@angular/core';
import { NgThemeToggle } from 'ng-theme-toggle';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgThemeToggle],
  template: `
    <ng-theme-toggle
      [isDarkSignal]="isDark"
    />
  `
})
export class App {
  isDark = signal<boolean>(false);
}
  

As shown in the example above, you can use the [isDarkSignal] input to manage your open state signal.

It’s important to provide the entire signal (not just its value, e.g. isDark()) because the component itself changes the value of the signal when clicking on it.

Here is a list of all input/ouput:

Functionality Input

Style & Behavior Inputs

Accessibility Inputs

You can easily customize the component’s appearance using the CSS variables listed below.

    ng-theme-toggle {
  --theme-toggle-bg: var(--global-color-from-theme);
  --theme-toggler-padding: 8px 16px;
}
  

There are two ways of setting the aria-label attributes: by lang attribute or by customAria attribute (See Accessibility Inputs at Inputs and Outputs section)

If needed, you can import ThemeToggleLangs and ThemeToggleCustomAria types like this:

    import { NgThemeButton, ThemeToggleLangs, ThemeToggleCustomAria } from 'ng-theme-toggle';
  

'lang' attribute:

The component includes five predefined languages for accessibility labels that you can set easily with the lang attribute:

    <ng-theme-toggle lang="es" />
  

'customAria' attribute:

In addition to the predefined languages available through the lang attribute, you can fully customize the ARIA labels for your theme button by using the customAria input.

This option gives you full control over the text announced by screen readers when the theme is dark or light — perfect for custom translations, accessibility improvements, or when you want to use a language that is not included in the predefined set.

Example of usage:

    <ng-theme-toggle
  [customAria]="{
    ariaLabelDark: 'Custom - set light mode',
    ariaLabelLight: 'Custom - set dark mode'
  }"
/>