PanThemeProvider
src/components/pan-theme-provider.mjs
pan-theme-provider
Manages theme state and automatically responds to system light/dark mode preferences.
Broadcasts theme changes via PAN for coordinated updates across components.
Usage:
Events emitted via PAN:
- theme.changed: { theme: 'light' | 'dark' | 'auto', effective: 'light' | 'dark' }
- theme.system-changed: { theme: 'light' | 'dark' }
Attributes:
- theme: 'light' | 'dark' | 'auto' (default: 'auto')
Manages theme state and automatically responds to system light/dark mode preferences.
Broadcasts theme changes via PAN for coordinated updates across components.
Usage:
Events emitted via PAN:
- theme.changed: { theme: 'light' | 'dark' | 'auto', effective: 'light' | 'dark' }
- theme.system-changed: { theme: 'light' | 'dark' }
Attributes:
- theme: 'light' | 'dark' | 'auto' (default: 'auto')
Class: PanThemeProvider
pan-theme-provider
Manages theme state and automatically responds to system light/dark mode preferences.
Broadcasts theme changes via PAN for coordinated updates across components.
Usage:
Events emitted via PAN:
- theme.changed: { theme: 'light' | 'dark' | 'auto', effective: 'light' | 'dark' }
- theme.system-changed: { theme: 'light' | 'dark' }
Attributes:
- theme: 'light' | 'dark' | 'auto' (default: 'auto')
Manages theme state and automatically responds to system light/dark mode preferences.
Broadcasts theme changes via PAN for coordinated updates across components.
Usage:
Events emitted via PAN:
- theme.changed: { theme: 'light' | 'dark' | 'auto', effective: 'light' | 'dark' }
- theme.system-changed: { theme: 'light' | 'dark' }
Attributes:
- theme: 'light' | 'dark' | 'auto' (default: 'auto')