# saadeghi/theme-change

Change CSS theme with toggle, buttons or select using CSS custom properties and localStorage

Repository: https://github.com/saadeghi/theme-change
Canonical: https://ross.abutalabs.com/products/theme-change
Homepage: https://codepen.io/saadeghi/pen/OJypbNM
Language: JavaScript
License: MIT
License Family: permissive
Topics: theme, localstorage, theming, css-custom-properties, css-variables, css-theme, javascript
Last push: 2026-06-14T01:19:42+00:00

## Health v2 (maintenance only)
Score: 71/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 87, release rhythm 35, longevity 100
- inputs: {"age_days": 2322, "days_push": 81, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1713, forks 50 (observed 2026-08-28T04:05:25.955884+00:00)

## What it is
A tiny JavaScript library for switching CSS themes using data attributes, CSS custom properties, and localStorage persistence. It works with buttons, selects, and checkboxes, and syncs all matching theme controls on the page.

## Use cases
- add a dark mode toggle to a website
- persist user theme preference in localStorage
- switch between multiple CSS themes with a select dropdown
- cycle through themes with a single rotate button
- sync multiple theme toggle controls on one page
- use daisyUI themes with a theme switcher
- initialize theme switching in React, Vue, Svelte, or Astro

## When to choose
- you want a lightweight, dependency-free theme switcher
- your theming is based on CSS custom properties or daisyUI data-theme attributes
- you need theme preference persisted across page loads
- you use plain HTML attributes rather than complex state management

## When to avoid
- you need a full styling framework or component library
- your theming requires server-side rendering of theme state or cookie-based persistence
- you need per-component scoped theming rather than document-level themes
- you use CSS-in-JS solutions that don't rely on data-theme attributes

## Facets
- artifact type: library
- maturity: stable
- function: theme, state-management, ui-components
- domain: frontend, web-development, web-design
- platform: browser, cross-platform
- tags: css-custom-properties, localstorage, dark-mode, theming, daisyui, zero-dependency, nodejs

## Member repositories
- saadeghi/theme-change (main) score 71

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:05:25.955884+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T03:34:43.590912+00:00, confidence not recorded.
  - readme: https://github.com/saadeghi/theme-change (fetched 2026-08-28T04:05:25.955884+00:00, sha e418e98dc995)
  - registry_npm: https://registry.npmjs.org/theme-change (fetched 2026-08-29T11:11:06.042167+00:00, sha 920de996f138)
- Data as of 2026-08-30T08:39:29.467469+00:00.