WrTheme

import { WrTheme, wrThemePrePaintScript } from 'ngwr/theme';

private readonly theme = inject(WrTheme);

this.theme.set('dark');
this.theme.toggle();

protected readonly resolved = this.theme.resolved; // Signal<'light' | 'dark'>
protected readonly mode = this.theme.mode;         // Signal<'light' | 'dark' | 'auto'>

import { provideWr } from 'ngwr';
import { withTheme } from 'ngwr/theme';

bootstrapApplication(AppComponent, {
  providers: [
    // Defaults: 'auto' and 'wr-theme'; storageKey: null stops persisting.
    provideWr(withTheme({ defaultMode: 'dark', storageKey: 'app-theme' })),
  ],
});

<script>(function(){try{var m=null,r=null;try{r=window.localStorage.getItem("wr-theme");}catch(e){}if(r!==null){try{var p=JSON.parse(r);if(p!==null&&typeof p==="object"&&"v" in p){if(p.e===undefined||p.e>=Date.now())m=p.v;}else{m=p;}}catch(e){m=r;}}if(m!=="light"&&m!=="dark"&&m!=="auto")m="auto";if(m==="light"||m==="dark")document.documentElement.style.colorScheme=m;}catch(e){}})();</script>

import { wrThemePrePaintScript } from 'ngwr/theme';

// Pass the values you gave withTheme() and withStorage():
wrThemePrePaintScript({ storageKey: 'app-theme', defaultMode: 'dark', storagePrefix: 'myapp:' });

// It returns the source without <script>, so a strict CSP can hash it:
const hash = createHash('sha256').update(wrThemePrePaintScript()).digest('base64');