🌗 1 line of code to apply auto dark / light theme and support custom theme for your website. Super fast and lightweight theme library.

Overview

themes.js

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

Latest Release Package Size MIT 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

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

Quick start

Prepare CSS

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

Auto Dark / Light and auto localStorage sync theme by default

ESM

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

CDN

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

Usage

Custom theme

const themes = new Themes('ocean')
.ocean body {
  background-color: blue;
}

Dynamic force change theme

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.

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]

Configs

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
})

Events

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

Development

pnpm i

Playground

pnpm dev

Inspiration

next-themes

LICENSE

MIT

You might also like...

Dark theme for VSCode with italics support (good for Dank Mono, Operator Mono)

Dark theme for VSCode with italics support (good for Dank Mono, Operator Mono)

Omni Owl for Visual Studio Code Dark theme for Visual Studio Code (with Italics) Install • Team • Imitate Preview • License Install All instructions c

Dec 23, 2022

DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode

DO ME Todo App Live Preview : DO ME Built With : - ReactJS - TailwindCSS Make sure you have: - Git - Nodejs version 14 or higher (we recommend using

Nov 18, 2022

Automatically switch Terminal profile based on dark / light mode

Automatically switch Terminal profile based on dark / light mode

auto-terminal-profile Automatically switch the macOS Terminal profile based on the system-wide dark / light appearance mode Prerequisites Node.js 14-1

Jan 2, 2023

Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options e.g custom text or HTML message, duration, custom class, toggle close button, position, custom close icon and backgorund color.

Pure Javascript Toaster Requires Nothing Demo Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options

Jun 21, 2022

📊🌍 Super small, light, privacy-focused, self-hostable web statistics provider

📊🌍 Super small, light, privacy-focused, self-hostable web statistics provider

femtostats Update: It turns out Fathom Lite does everything I wanted to do except custom events for free, so I'm going to stop working on this for now

Nov 17, 2022

CSS only library to apply color filters.

CSS only library to apply color filters.

filters.css CSS only library to apply color filters. See the full documentation Features Only CSS. No JavaScript! ~1KB minified and gzipped! Supports

Dec 17, 2022

Theme Redone is a custom WordPress theme starter/framework with its own Gutenberg blocks solution and a CLI that speeds up the block creation process.

Theme Redone is a custom WordPress theme starter/framework with its own Gutenberg blocks solution and a CLI that speeds up the block creation process.

Theme Redone The Framework for Developing Custom WordPress Themes with its own Gutenberg Blocks creation solution. Theme Redone is a custom WordPress

Dec 30, 2022

A drop in replacement for Hacker News with support for dark mode and more.

A drop in replacement for Hacker News with support for dark mode and more.

Worker News A drop in replacement for Hacker News with support for dark mode, quotes in comments, user identicons and submission favicons. What's cool

Dec 31, 2022

Query for CSS brower support data, combined from caniuse and MDN, including version support started and global support percentages.

css-browser-support Query for CSS browser support data, combined from caniuse and MDN, including version support started and global support percentage

Nov 2, 2022
Comments
  • Feature request: Add a custom storageKey option

    Feature request: Add a custom storageKey option

    Currently the storageKey (for localStorage) is hard coded to theme, and this might not be flexible enough for apps where state management solutions and other scripts are often used in conjuction with themes.js.

    I propose a new config setup for the initalization:

    From (this will still work)

    const themes = new Themes('ocean');
    

    To

    const themes = new Themes({
      theme: 'ocean',
      storageKey: 'theme',
    });
    

    Where the storageKey can be provided as an option for the constructor, or it defaults to theme, however if a string is provided to the constructor, then existing behaviour is to be expected.

    opened by itsezc 0
Releases(v0.0.9)
Owner
SerKo
A lazy developer coding to be more lazy 😴
SerKo
Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden data on the www

Paranoia ?? Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden dat

Alice Snow 3 Dec 29, 2022
MDN-Dark-Mode - Simple extension to add a dark mode with different themes to the MDN Web Docs website

MDN-Dark-Mode Information Chrome and Firefox extension that adds a dark mode wit

Santiago Galán Barlo 2 Mar 18, 2022
Perfect SvelteKit dark mode in 2 lines of code. Support System preference and any other theme with no flashing

This library is a port of next-theme for SvelteKit. All credit goes to pacocoursey and all next-themes contributors While usable, this library is stil

null 42 Sep 30, 2022
A table component for your Mantine data-rich applications, supporting asynchronous data loading, column sorting, custom cell data rendering, row context menus, dark theme, and more.

Mantine DataTable A "dark-theme aware" table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagina

Ionut-Cristian Florescu 331 Jan 4, 2023
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
🌓 Add dark mode/night mode custom elements to your website.

dark-mode A custom element that allows you to easily put a Dark Mode ?? toggle. so you can initially adhere to your users' preferences according to pr

小弟调调™ 12 Oct 20, 2022