A super lightweight and fast Theme library with auto system color scheme detection in JavaScript.

• 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

Package Manager

npm i themes.js

yarn add themes.js

pnpm i themes.js

CDN

<script src="https://unpkg.com/themes.js"></script>

Prepare CSS

.light body {
  background-color: white;
}
.dark body {
  background-color: black;
}

Auto Dark / Light and auto localStorage sync theme by default

import Themes from 'themes.js'
const themes = new Themes()

<script src="https://unpkg.com/themes.js"></script>
<script>new window.Themes()</script>

const themes = new Themes('ocean')

.ocean body {
  background-color: blue;
}

const themes = new Themes()
themes.theme = 'dark'

// sync to localStorage if needed
themes.commit()

By default, localStorage sync will auto enable If you calling new Themes() with empty arguments.

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.

const themes = new Themes('dark')
// sync localStorage is disabled by default

You can switch on and off sync after init Themes by setting .sync.

themes.sync = true

Notice: after calling commit(), localStorage sync will auto set to enable, you can turn off the sync manuelly if needed.

themes.commit()
// themes.sync = true [auto]

You can pass theme, storageKey or sync config when initialize.

const themes = new Themes({
  theme: 'dark', // (optional) default: null
  storageKey: 'theme', // (optional) default: 'theme'
  sync: true, // (optional) default: false
})

// theme on change
themes.onChange = (theme) => {
  console.log('theme changed', theme)
}

pnpm i

Playground

pnpm dev

next-themes

MIT