Dark mode

Ndop supports three color schemes: light, dark, and the operating system's preference. provideNdop() applies one when the app starts, on the server as well as in the browser, so server-rendered pages arrive in the right colors.

Choosing the starting scheme

import { ApplicationConfig } from '@angular/core';
import { provideNdop } from '@ndop/core';

export const appConfig: ApplicationConfig = {
  providers: [provideNdop({ theme: 'system' })],
};

system is the default. It sets data-ndop-theme="system" on the root element, and the dark: variant then follows prefers-color-scheme in CSS alone, without any script.

Switching at runtime

Inject NdopTheme and call set:

import { Component, inject } from '@angular/core';
import { NdopTheme } from '@ndop/core';
import { Button } from '@/ui/button/button';

@Component({
  selector: 'app-theme-toggle',
  imports: [Button],
  template: `<button ndButton variant="outline" (click)="toggle()">Toggle theme</button>`,
})
export class ThemeToggle {
  private readonly theme = inject(NdopTheme);

  protected toggle(): void {
    this.theme.set(this.theme.mode() === 'dark' ? 'light' : 'dark');
  }
}

dark adds the dark class to the root element, which turns on the .dark token block and every dark: utility.

Remembering the choice

Ndop doesn't store the choice, because where to keep it is up to your app. If you save it, apply it again when the app starts, and before the first paint if your pages are prerendered, as this site does.