# WrTheme
> Light / dark theme manager. Writes `[data-theme]` on ``, persists the chosen mode to localStorage. `auto` mode follows `WrPlatform.prefersDark`.
Source: https://ngwr.dev/reference/services/theme
Kind: Service
## Install
```angular-ts
import { provideWrTheme, WrTheme } from 'ngwr/theme';
bootstrapApplication(AppComponent, {
providers: [provideWrTheme({ defaultMode: 'auto' })],
});
```
## Usage
```angular-ts
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'>
```
## SSR: no flash of the wrong theme
A server has no `localStorage` and no `prefers-color-scheme`, so every server-rendered or prerendered page ships the same attribute — `light` under the default config. A visitor whose OS is dark, or who chose dark here, sees a white page until the client bundle boots and `WrTheme` corrects it: milliseconds on localhost, seconds on a slow connection. No provider can close that window, because by the time Angular runs the browser has already painted.
The fix is a blocking script in ``, above every stylesheet, that resolves the theme before first paint. `wrThemePrePaintScript()` emits one — reading the persisted mode exactly the way `WrTheme` and `WrStorage` agree to write it — the JSON envelope, the key prefix and the TTL — so nothing here has to be re-derived from the bundle or kept in step by hand. This page's own output, ready to paste:
```html
```
It is plain ES5 with no dependency on the app bundle, and every step is wrapped: a blocked `localStorage` (private mode, a sandboxed iframe) leaves the rendered default in place rather than throwing before anything has rendered. The docs site you are reading runs this same script, and a spec in the library pins the two to the same answers.
```typescript
import { wrThemePrePaintScript } from 'ngwr/theme';
// Same script, for an app that renamed the attribute, the key or the prefix.
// Pass the same values you gave provideWrTheme() / provideWrStorage():
wrThemePrePaintScript({
attribute: 'app-theme', // provideWrTheme({ attribute })
storageKey: 'theme-mode', // provideWrTheme({ storageKey })
defaultMode: 'dark', // provideWrTheme({ defaultMode })
storagePrefix: 'myapp:', // provideWrStorage({ prefix })
});
// It returns the JS source with NO