cssangulardarkmodeangular-ssr

How to implement darkMode on Angular SSR

I'm using angular Server Side Rendering.

I now need to implement dark mode.
For this purpose, I used to do the following window.matchMedia('(prefers-color-scheme: dark)'). but window shall not be used in this context as the variable doesn't exists yet.

Did someone manage to implement darkMode with Angular SSR ?

Solution

  • Reading the document, window shall be used in both context

    afterRender or afterNextRender.

    So the following shall be used

    // app.component.ts
import { afterRender } from '@angular/core'

// ...

isDarkMode$ = signal<boolean>(false)

constructor() {
  const r = afterRender() {
     isDarkMode.set(window.matchMedia('(prefers-color-scheme: dark)'))
     r.destroy() // Don't forget to unsubscribe

  }
}