Blocks

Switch Theme

A round button that switches the light and the dark theme: the sun and the moon swap with a turn and the new theme grows as a circle from the click.

A block from @tectra-ng/blocks — it comes with tectra-ng, or alone: npm install @tectra-ng/blocks.

Features3

API

Theming

Basic

Click it: the new theme grows from the click as a circle, and the icon turns. It switches the mode of TxThemeService for the whole page; modeChange gives the new mode to save.

Now: light

Reveal

txThemeReveal gives the circle to any control: change the theme in themeChange — it runs inside the view transition. Here a slower revealDuration.

11 lines

<button  txButton  severity="secondary"  outlined  txThemeReveal  [revealDuration]="900"  [icon]="theme.mode() === 'dark' ? 'sun' : 'moon'"  (themeChange)="theme.toggleMode()">  {{ theme.mode() === 'dark' ? 'Light theme' : 'Dark theme' }}</button>

Design tokens

dt changes the tokens of one button: here a larger square button on the ground colour.