Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/serkodev/themes.js
🌗 1 line of code to apply auto dark / light theme and support custom theme for your website. Super fast and lightweight theme library.
https://github.com/serkodev/themes.js
css custom-theme dark dark-mode dark-theme javascript js library style theme themes
Last synced: 3 months ago
JSON representation
🌗 1 line of code to apply auto dark / light theme and support custom theme for your website. Super fast and lightweight theme library.
- Host: GitHub
- URL: https://github.com/serkodev/themes.js
- Owner: serkodev
- License: mit
- Created: 2022-05-19T15:33:00.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-03T10:31:21.000Z (over 1 year ago)
- Last Synced: 2024-04-27T03:42:50.389Z (9 months ago)
- Topics: css, custom-theme, dark, dark-mode, dark-theme, javascript, js, library, style, theme, themes
- Language: TypeScript
- Homepage:
- Size: 214 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# themes.js
A super lightweight and fast Theme library with auto system color scheme detection in JavaScript.
[](https://www.npmjs.com/package/themes.js)
[](https://unpkg.com/themes.js 'brotli package size (without dependencies)')
[](https://github.com/master-co/css/blob/main/LICENSE)
## Features
- Auto detect Dark / Light mode by JavaScript
- Support custom theme
- Support localStorage save and sync with other windows
- Use class instead of `@media prefers-color-scheme`
## Install
Package Manager
```
npm i themes.js
yarn add themes.js
pnpm i themes.js
```
CDN
```html
```
## Quick start
Prepare CSS
```css
.light body {
background-color: white;
}
.dark body {
background-color: black;
}
```
Auto Dark / Light and auto localStorage sync theme by default
### ESM
```js
import Themes from 'themes.js'
const themes = new Themes()
```
### CDN
```html
new window.Themes()
```
## Usage
### Custom theme
```js
const themes = new Themes('ocean')
```
```css
.ocean body {
background-color: blue;
}
```
### Dynamic force change theme
```js
const themes = new Themes()
themes.theme = 'dark'
// sync to localStorage if needed
themes.commit()
```
### Sync with localStorage
By default, localStorage sync will auto **enable** If you calling `new Themes()` with empty arguments.
```js
const themes = new Themes()
// sync localStorage is enabled by default
```
If you passing init theme (like `new Themes('dark')`), the localStorage sync would be **disable** by default.
```js
const themes = new Themes('dark')
// sync localStorage is disabled by default
```
You can switch on and off sync after init `Themes` by setting `.sync`.
```js
themes.sync = true
```
Notice: after calling `commit()`, localStorage sync will auto set to **enable**, you can turn off the sync manuelly if needed.
```js
themes.commit()
// themes.sync = true [auto]
```
### Configs
You can pass `theme`, `storageKey` or `sync` config when initialize.
```js
const themes = new Themes({
theme: 'dark', // (optional) default: null
storageKey: 'theme', // (optional) default: 'theme'
sync: true, // (optional) default: false
})
```
### Events
```js
// theme on change
themes.onChange = (theme) => {
console.log('theme changed', theme)
}
```
## Development
```
pnpm i
```
Playground
```
pnpm dev
```
## Inspiration
[next-themes](https://github.com/pacocoursey/next-themes)
## LICENSE
MIT