# Theme Provider

TypeScript source: `providers/ThemeProvider.tsx`

## Components

### ThemeProvider

Source: `providers/ThemeProvider.tsx:117`

```ts
React.FC<React.PropsWithChildren>
```

Provides shared theme state and keeps DOM/local storage in sync.

#### Remarks

The provider reads the initial preference from local storage, follows OS theme changes while the preference is `system`, persists
explicit user changes, and applies the resolved theme to the document root.

#### Example

```tsx
<ThemeProvider>{children}</ThemeProvider>
```

## Types

### ResolvedTheme

Source: `providers/ThemeProvider.tsx:16`

```ts
"light" | "dark"
```

Theme that is currently rendered on screen after resolving `system`.

### ThemeContext

Source: `providers/ThemeProvider.tsx:66`

Theme state and actions exposed by ThemeProvider.

#### Members

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `resolvedTheme` | `ResolvedTheme` | `'light'` | Concrete theme currently rendered on screen. |
| `setTheme` | `(theme: ThemePreference) => void` |  | Updates the user-selected theme and persists it to local storage. |
| `theme` | `ThemePreference` | `'system'` | User-selected preference, including `system`. |
| `toggleTheme` | `() => void` |  | Flips between light and dark, resolving `system` first. |

### ThemePreference

Source: `providers/ThemeProvider.tsx:11`

```ts
"light" | "dark" | "system"
```

Theme preference selected by the user.

#### Remarks

`system` follows the operating system preference and keeps listening for OS changes.

## Functions

### applyTheme

Source: `providers/ThemeProvider.tsx:59`

```ts
(theme: ResolvedTheme) => void
```

Applies a resolved theme to the document root.

#### Remarks

This toggles the `dark` class on `document.documentElement`. It is used both from React and from the inline bootstrap script in
`index.html`, which runs before first paint so the app never flashes the light theme on load.

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `theme` | `ResolvedTheme` |  |

### readStoredTheme

Source: `providers/ThemeProvider.tsx:46`

```ts
() => ThemePreference
```

Reads the stored theme preference from local storage.

#### Returns

Stored theme preference, or `system` when the stored value is missing or invalid.

### resolveTheme

Source: `providers/ThemeProvider.tsx:38`

```ts
(preference: ThemePreference) => ResolvedTheme
```

Resolves a user theme preference into the theme currently rendered by the UI.

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `preference` | `ThemePreference` | User-selected theme preference. |

#### Returns

Concrete light or dark theme.

### useTheme

Source: `providers/ThemeProvider.tsx:102`

```ts
() => ThemeContext
```

Returns the current theme context.

#### Remarks

Outside ThemeProvider, this hook returns the default system/light context.

## Constants

### THEME_PREFERENCES

Source: `providers/ThemeProvider.tsx:21`

```ts
ThemePreference[]
```

Supported theme preferences shown by the theme picker.