https://github.com/preachjs/themes
Simple, lightweight theme management for Preact applications
https://github.com/preachjs/themes
Last synced: 3 months ago
JSON representation
Simple, lightweight theme management for Preact applications
- Host: GitHub
- URL: https://github.com/preachjs/themes
- Owner: preachjs
- License: mit
- Created: 2025-03-28T13:05:12.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-01T05:52:14.000Z (about 1 year ago)
- Last Synced: 2025-09-01T03:08:28.590Z (10 months ago)
- Language: TypeScript
- Homepage: https://preachjs.github.io/themes/
- Size: 188 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @preachjs/themes
> Simple, lightweight theme management for Preact applications
[](https://www.npmjs.com/package/@preachjs/themes)
[Demo →](https://preachjs.github.io/themes/)
## Highlights
- 📦 Tiny bundle size (~413B GZipped)
- 🤌 Simple API
- No FOUC (in cases where preact isn't loaded on network)
- Based on [@dumbjs/persona](https://github.com/dumbjs/persona)
## Install
```sh
# npm
npm install @preachjs/themes
# yarn
yarn add @preachjs/themes
# pnpm
pnpm add @preachjs/themes
```
## Usage
```jsx
import { ThemeProvider, useTheme } from '@preachjs/themes'
const Main = () => {
return (
)
}
const App = () => {
const { theme, setTheme } = useTheme('system')
return (
<>
Current Theme: {theme}
{
setTheme('light')
}}
>
Light
{
setTheme('dark')
}}
>
Dark
{
setTheme('system')
}}
>
System
>
)
}
```
## Configuration
The `ThemeProvider` component accepts the following props:
- `defaultTheme`: The initial theme to use (`'light'`, `'dark'`, or `'system'`).
Defaults to `'system'`.
- `storageKey`: The key used to persist theme preference in localStorage.
Defaults to `'theme'`.
```jsx
```
## Theme Options
Three theme options are available:
- `light`: Forces light theme
- `dark`: Forces dark theme
- `system`: Automatically switches between light and dark based on system
preferences
## API Reference
### useTheme(defaultTheme?: string)
React hook that provides theme management functionality.
Returns:
- `theme`: Current theme value (`'light'`, `'dark'`, or `'system'`)
- `setTheme`: Function to update the theme
Example:
```jsx
const { theme, setTheme } = useTheme('system')
```
### ThemeProvider
Context provider component that must wrap your application.
Props:
- `defaultTheme`: Initial theme (optional)
- `storageKey`: localStorage key for persistence (optional)
- `children`: React nodes
Example:
```jsx
```
### Advanced Usage
For Advanced use cases like multiple themes and different default states, you
can write your own context and use
[@dumbjs/persona](https://github.com/dumbjs/persona) that abstracts the browser
APIs to make it simpler for you to use.